HTML笔记——千锋Ghost老师_2019前端入门

了解 VSCode 编辑器

1. Shift + Alt + ↓：快速复制该行内容到下一行

2. Alt + ↑或↓：将该行内容快速移动一行

3. Tab键：向后缩进

4. Tab + Shift：向前缩进

5. 多光标：Alt + 鼠标左键

6. 将光标快速移动到行首/行尾：Home/End，在笔记本上这两个键和方向键为同一个键，需要使用Fn+Home/End

7. 一些快速输入的方法记录：

   li{列表项$}*4
   

---

HTML基本结构和属性

Web前端三大核心技术

HTML：结构
CSS：样式
JavaScript：做与用户的交互行为

HTML：超文本标记语言

1. 超文本：文本内容 + 非文本内容
2. 标记：<***>
   标记也叫“标签”，写法分为两种：
   a) 单标签：< img>
   b) 双标签：< head>< /head>
3. 语言：编程语言

• 创建标签的快捷键：单词+Tab（先写一个单词，之后按下Tab键），编辑器就会自动识别完成标签的创建
• 标签可以上下排列，也可以组合嵌套
• HTML5标签含义之元素周期表
• 标签的属性：来修饰标签的，设置当前标签的一些功能
  
  

---

初始代码

每个.html文件都有的代码叫做初始代码。
创建初始代码的方法：! + Tab（一要注意是英文状态下的!，二要注意保证文件名后缀是.html）

<!DOCTYPE html>     //文档声明：告诉浏览器这是一个html文档
<html lang="en">    // html文件的最外层标签。包裹着所有html标签代码。
<head>
    <meta charset="UTF-8">  // charset属性规定html文档的字符编码,防止乱码
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>     //设置网页的标题
</head>

<body>
	显示网页内容的区域
</body>
</html>

---

HTML注释

1. 写法

   <!-- 这里是注释的内容 -->
   

2. 快速创建和删除注释的两种方法：
   • Ctrl + /
   • Shift + Alt + a
   
   

---

标题与段落

1. 标题
   • h标签，做的是网页内容中的标题
   • 是双标签，分为六个等级，< h1>< /h1> … < h6></ h6>
   • 在一个网页中h1标题最重要，并且一个.html文件中只能出现一次h1标签
   • h5、h6标签在网页中不经常使用
2. 段落
   • p标签，也是双标签，< p>< /p>
   • 每一个段落就是一个p标签，不要把所有段落都写在一个p标签里
   
   

---

文本修饰标签

1. 强调：< strong>< /strong>、< em>< /em>
   • strong标签会对文本进行加粗，strong的强调性更强
   • em标签会对文本进行斜体，强调性稍弱
2. < sub>< /sub>、< sup>< /sup>：下标文本、上标文本
3. < del>< /del>、< ins>< /ins>：删除文本、插入文本，一般情况下，删除和插入配合使用
   
   

---

图片标签与图片属性

< img>，是一个单标签，向网页中嵌入一幅图像，具有以下属性：

1. src：必需的属性，是引入图片的地址
2. alt：必需的属性，当图片出现问题的时候，可以显示一段友好的文字代替图片，可以优化用户体验；图片没问题时不会显示该文字
3. title：可选属性，title其实是所有html标签都具有的一个属性，它表示一个提示信息，当我们把鼠标放到标签上时，该提示信息就会显示出来
4. width和height：可选属性，控制图片的大小，单位是像素。建议设置该属性，这样可以在页面加载时为图像预留空间。如果没有这些属性，浏览器就无法了解图像的尺寸，也就无法为图像保留合适的空间，因此当图像加载时，页面的布局就会发生变化。
   
   

---

引入文件的地址路径

相对路径

1. 以引用文件之网页所在位置为参考基础，而建立出的目录路径。
   . 表示当前路径，通常情况下可省略
   . . 表示父目录（上一级路径）
2. 图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如< img src=”logo.gif” />。
3. 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如< img src=”img/img01/logo.gif” />。
4. 图像文件位于HTML文件的上一级文件夹：在文件名之前加入“ . . / ”，如果是上两级，则需要使用 “ . . / . . / ”，以此类推，如< img src=”../logo.gif” />。

绝对路径

指从盘符开始的路径，一般很少使用。

---

跳转链接

1. 链接标签：< a>< /a>，具有以下属性：
   • href：链接的地址
   • target：可以改变链接打开的方式
   默认情况下，在当前页面打开_self，在新窗口打开则设为_blank
2. < base> 标签：规定页面中所有链接的基准URL。
   < base>必须写在< head>< /head>当中
   • URL：统一资源定位符，又叫网页地址，是互联网上标准的资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
   
   

---

跳转锚点

也是用 < a>< /a> 标签实现，有两种实现方式：

1. #+ id属性（id必须是唯一的）

   <a href="#surprise">
   	<p>点击有惊喜<p>
   </a>
   
   <p id="surprise">
   	<p>惊喜来啦<p>
   </P>
   

2. #+ name属性（name属性是加给a标签的）

   <a href="#surprise">
   	<p>点击有惊喜<p>
   </a>
   
   <a name="surprise">
   	<p>惊喜来啦</P>
   </a>
   

#代表网页中的一个位置，其右边的字符，就是该位置的标识符。
在设置一个锚点链接的地方href属性的属性值最前面要加#；锚点href的属性值不加#。

二者区别：

1. name可以重复，但id不行，但都应该尽量保持其唯一性
2. id可以直接插在< h>、< p>里，name则是在< h>上再开一个a元素，在< a>标签里实现
3. id存在定位偏移，name定位较准确。

• 跳转到顶部的代码：

  <a href="#">
  	<p>回到顶部</p>
  </a>
  

关于跳转锚点一篇不错的总结：html 页面内锚点定位及跳转方法总结

1. 以上的跳转方法的缺点是点击锚点之后，浏览器的URL会发生变化，如果刷新可能会出现问题。

2. 页面内锚点定位建议使用js的srollIntoView方法：
   例如：

   //点击id是#roll1的元素可以滚动到id是#roll1_top的地方
   document.querySelector("#roll1").onclick = function(){  
     	document.querySelector("#roll1_top").scrollIntoView(true);  
   }  
   

---

特殊符号

编写一些文本时，经常会遇到输入法无法输入的字符，如版权符号©； 商标注册符号 ® 等。还有往一段文字加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在HTML中，为这些字符准备了专门的代码。

特殊字符代码	字符	含义
&lt ;	<	小于号或显示标记
&gt ;	>	大于号或显示标记
&amp ;	&	可用于显示其它特殊字符
&quot ;	“	引号
&reg ;	®	已注册
&copy ;	©	版权
&trade ;	™	商标
&bull ;	·	点点
&ensp ;		半个空白位
&emsp ;		一个空白位
&nbsp ;		不断行的空白

---

列表标签

无序列表（< ul>< /ul>、< li>< /li>）

1. 无序列表是一个没有特定顺序的列表项的集合，也称为项目列表。在无序列表中，各个列表之间属于并列关系，没有先后顺序之分，它们之间以一个项目符号来标记。
2. 使用无序列表标签ul的type属性（一般使用CSS的list-style来代替），用户可以指定出现在列表项前的项目符号的样式，主要有：disc（实心圆点-默认值）、circle（空心圆点）、square（实心方块）、none（无项目符号）。
3. < ul>、< li>：列表的最外层容器、列表项，ul和li必须是组合出现的，它们之间是不能有其他标签的。

列表之间可以互相嵌套，形成多层级的列表。

有序列表（< ol>< /ol>、< li>< /li>）

1. < ol>、< li>：列表最外层容器、列表项，同样 ol 和 li 必须是组合出现，且二者之间不能有其他内容。
2. 有序列表使用的非常少，经常使用的是无序列表。

自定义列表

1. 自定义列表不仅仅是一列项目，而是项目及其注释的组合。列表项需要添加标题和对标题进行描述时使用定义列表。
   < dl>< /dl>：定义列表（list）
   < dt>< /dt>：定义专业术语或名词（title）
   < dd>< /dd>：对名词进行解释和描述（description）
   
   

   <dl>
   	<dt>Coffee</dt>
   	<dd>Black hot drink</dd>
   	<dt>Milk</dt>
   	<dd>White hot drink</dd>
   </dl>
   

---

表格

表格标签

1. < table>< /table>：表格的最外层容器
2. < caption>< /caption>：定义表格标题，caption 标签必须紧随 table 标签之后。每个表格只能定义一个标题。通常这个标题会被居中于表格之上
3. < tr>< /tr>：定义表格中的行，tr元素包含一个或多个th或td元素
4. < th>< /th>：定义表头单元格，th 元素内部的文本通常会呈现为居中的粗体文本
5. < td>< /td>：定义表格单元格，td 元素内的文本通常是左对齐的普通文本

以上标签之间有嵌套关系，要符合嵌套规范。
例子：下面只定义了表格的结构，样式可以通过属性或CSS进行设置。

    <table border="1">
        <caption>我喜欢的</caption>
        <tr>
            <th colspan="3">水果</th>
            <th>蔬菜</th>
        </tr>
        <tr>
            <td>葡萄</td>
            <td>香瓜</td>
            <td>西瓜</td>
            <td>菠菜</td>
        </tr>
    </table>

表格的语义化标签：

< thead>< /thead>、< tbody>< /tbody>、< tfoot>< /tfoot>
在一个table中，< tbody>可以出现多次，但< thead>和< tfoot>都只能出现一次

表格属性

属性	含义
border	表格边框
cellpadding	单元格内的空间
cellspacing	单元格之间的空间
rowspan	跨行合并
colspan	跨列合并
align	左右对齐方式，left、center、right
valign	上下对齐方式，top、middle、buttom
合并单元格步骤：

1. 明确合并哪几个单元格
2. 通过左上原则，确定保留谁删除谁：
   上下合并–>只保留最上的,删除其他
   左右合并–>只保留最左的，删除其他
3. 给保留的单元格设置跨行合并(rowspan)或跨列合并(colspan)
   
   

---

表单

表单标签

1. < form>< /form>：表单的最外层容器，表单用于向服务器传输数据
2. < input>：单标签，该标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。

type属性	含义
text	普通的文本输入框
password	密码输入框
checkbox	复选框。默认选中:checked
radio	单选框。如果要实现单选效果，需要设置相同的name属性。默认选中：checked
file	上传文件
submit	提交按钮
reset	重置按钮

表格需要严格按照嵌套规范，表单不需要，< form > < /form >之间可以嵌套其他标签。

3. < textarea>< /textarea>：多行文本框

4. < select>< /select>、< option>< /option>：option定义下拉列表中的一个条目

5. < label>< /label>：label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
   < label> 标签的 for 属性应当与相关元素的 id 属性相同。

   <!-- 采用辅助标签后，用户点击文字也可以勾选性别 -->
   <!--方法一-->
   <input type="radio" name="gender" id="boy"><label for="boy">男</label>
   <input type="radio" name="gender" id="girl"><label for="girl">女</label>
   
   <!--方法二-->
   <label>
   	<input type="checkbox">熬夜
   </label>
   

---

表格表单组合

因为表格有嵌套规范，表单没有，所以嵌套时先写表单，再写表格。

div 与 span

1. < div>< /div>（块）
   < div>标签用来划分一个区域，相当于一块区域容器，< div>中也可以嵌套多层< div>，用来将网页分隔成独立的、不同的部分，实现网页的规划和布局。
2. < span>< /span>（内联）
   用来对文字进行修饰，div和span都是默认没有任何样式的，需要配合CSS。