自学前端笔记——（一）HTML

该笔记实际完成于2019/7/30

一、标签： (一般成对出现)

1. 标题标签

<h1>~<h6> 1~6级标题

2. 段落标签

<p> </p>

3.换行标签 <br /> （单个出现）

空格字符：&nbsp (特殊字符 全小写，用&开头)

4.预留格式标签：<pre> （保留源代码中的段落格式，很适合显示代码的缩进）

5.行内组合标签 <span> (对标签内的元素进行组合，以便通过css样式来格式化)

6.水平线标签 <hr /> (单个出现)

7.注释标签 (注释不会再浏览器中显示，注释可以跨行)

（Sublime text 3 中输入！再按Tab可以直接生成html结构）

8.超链接标签

<a href= “需要链接到的网址”>文字或图片</a>

9.图像标签

（单个出现）alt属性：图片无法显示时替换的文字

10.区域标签 div （好处：可以用css对每个区域单独设置格式）

Id属性：区域的名称 ，align属性：布局格式 center：居中

添加上角标 sup

11.列表标签：

（1）无序列表

（2）有序列表

12.表格： table标签 （tr标签：行 ，td标签：列）

表头：th标签

13.表单与表单元素标签（表单：form，表单元素：input、select、textarea）

表单元素用于收集用户信息

action属性表示收集的信息交由哪个页面处理（后端）

name属性：让后端收集数据时，知道来源于哪个表单元素

二、Sublime的基础操作：

1）Ctrl+ +：放大，-：缩小

2）alt+shift+2：分两屏 （好处：可以同时浏览html和css代码）

3）Ctrl+d：选择一个单词

4）Ctrl+l：选择一行

5）多位置同时输入：按住ctrl鼠标单击多处，即可。

6）代码缩进：ctrl+]:向右缩进，[:向左缩进。

7）Ctrl+s：保存

8）自动生成结构：先输入英文!再按tab

9）代码、注释互相转换：选择代码ctrl+/转换为注释；撤销注释：ctrl+shift+/

10）标签扩展：直接输入相应字母按tab即可生成标签，相应标签的字母+{标签中的内容}+tab即可生成带内容的标签

11）标签属性取值添加：标签+[属性=””]+tab即可

12）标签分组：（）括起来即可，例如：（div>a）+（div>p）

13)生成多个同名标签：标签*标签数 +tab即可

14）快速生成文本：输入Lorem+tab 生成一段文本，Lorem4+tab 生成4个单词的文本