昔洛 的个人博客

Bug不空,誓不成佛

  menu
70 文章
14633 浏览
3 当前访客
ღゝ◡╹)ノ❤️

记录前端学习----第一天

前言

     随着 5G 时代的来临,大前端也更加火热的发展...前端技术也是非常有前景的一门技术,接下来一段时间将记录前端的自学经历

7月22日 学习的知识点

  • 常见浏览器内核
  • Web 标准
  • sublime 几个常用的快捷键
  • 标签分类
  • SEO 简介
  • 一些常用的文本格式标签
  • 图片标签
  • 超链接标签
  • 其他

1、常见浏览器内核

    当今互联网的浏览器非常多,主流知名的浏览器内核有:blink(谷歌浏览器内核)WebKit(Safari浏览器内核)Trident(IE浏览器内核)gecko(火狐浏览器内核)

2、Web 标准

    Web 标准主要是为了服从 w3c 和其他标准化组织制定的一系列标准的集合而言,其主要分为三个内容标准即:结构标准(structure)表现标准(Presentation)行为标准(Behavior)

3、sublime 几个常用的快捷键

    sublime 是现在主流的方便、快捷,轻量,高效的开发编辑器之一,熟练其中几个快捷键可以提高编写代码的效率

tab 补全代码
ctrl+shift+d 快速复制一行
ctrl+shift+k 快速删除一行
ctrl+shift+↑(↓) 快速上移(下移)一行
ctrl+k+b 隐藏(显示)侧边栏
ctrl+L 快速选中一行
ctrl+h 查找替换
ctrl+f 查找
ctrl+鼠标单击 集体编辑

sublime也提供嵌套标签的快速创建如表格,列表等
table>tr*3>td*3 按下tab可以快速创建三行三列的表格
ul>li*3 可以快速创建有三个选项的下拉菜单
其他的嵌套标签均可使用该方法
>表示嵌套关系;*表示数量.

4、标签分类

    对于 html 的标签来讲,主要分为两类,就是单标签与双标签。
单标签:如<br/>(换行)、<hr/>(一条线)
双标签:只成对出现的标签,如<html></html>、<head></head>、<p></p>等

5、SEO 简介

    SEO简单来书就是搜索引擎的优化,一般来说写网页只允许有一个<h1>标签,否则对网页的搜索来说并不是优化很好。

6、一些常用的文本格式标签

常用的文本格式标签有如下几个:
加粗:<b></b>,<strong></strong>,XHTML 推荐使用 strong 效果如下:粗体
斜体:<i></i>,<em></em>,文字以斜体方式显示(XHTML 推荐使用 em)效果如下:斜体
删除线:<s></s>,<del></del>,文字以加删除线方式显示(XHTML 推荐使用 del)效果如下:删除线
下划线:<u></u>和</ins></ins>,文字以加下划线方式显示(XHTML不赞成使用u)效果如下:下划线

注意:b i s u 只有使用没有强调的意思,strong em del ins 表示语义更强烈,其语义的应用可以用于只能语音的发音。

7、图片标签

图片标签用来在网页显示出一张图片,其标签名为<img/>
属性有如下:

属性属性值描述
srcURL图像的路径
alt文本图像不能显示时的替换文本
title文本鼠标悬停时显示的内容
width像素(XHTML不支持%页面百分比)设置图像的宽度
height像素(XHTML不支持%页面百分比)设置图像的高度
border数字设置图像边框的宽度

8、超链接标签

超链接标签可以说一个网站里是必有得,它具有跳转页面的功能其基本标签写法如下:
<a href="#"></a>,'#'表示空链接。
其属性有如下:

属性描述
href跳转的位置链接地址
target跳转方式_self(当前页)_blank(新建页面)

超链接标签也可和图片标签内嵌进行图片超链接的跳转代码如下:

<a href="https://www.baidu.com" target="_blank">
	<img src="https://www.baidu.com/img/bd_logo1.png?where=super" width="100px" height="50px"/>
</a>

效果如下:


ps:在<head>标签里面可以添加<base target="_blank" />设置默认连接跳转方式

锚点:利用 a 标签可以对网页的任意位置进行跳转定位,步骤有两步
1.设置锚点,需要设置的锚点标签需要设置 id 属性,例如设置 h1 标签为锚点
<h1 id="top"></h1>
2.设置跳转,建立a标签,代码如下
<a href="#top">跳转到本页面前言处</a>
效果如下:本篇文章第一行的大标题已经设置了锚点位置,可以进行跳转到前言位置。
点我跳转

9、其他

<!-- 声明浏览器采用的 html 版本 -->
<!DOCTYPE html>
<!-- 告诉搜索引擎的网页语言类型,en英文也支持中文,中文标准 zh-CN -->
<html lang="en">
<head>
	<!-- meta 元信息,元信息主要给搜索引擎和浏览器看。 -->
	<meta charset="UTF-8">
	<!--
		ascll
		ansi
		unicode 万国码
		gb2312	简体中文
		big5	繁体字
		GBK		所有中文字体
	-->
	<title>Document</title>
</head>
<body>
	<h1>我是一个大标题</h1>
</body>
</html>
(゚д゚)σ弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌⊃