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

原创已于 2022-05-11 15:02:20 修改 · 974 阅读

18 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html

于 2020-11-30 16:53:10 首次发布

前端基础笔记专栏收录该内容

14 篇文章

订阅专栏

本文是HTML5的基础教程，介绍了HTML的基本结构和属性，包括Web前端三大核心技术，HTML的定义和标记，VSCode编辑器的快捷操作。讲解了标题、段落、文本修饰、图片、链接、表格、表单、列表等元素的使用，并提到了文件路径、注释、特殊符号等内容，是前端新手入门的良好参考资料。

了解 VSCode 编辑器

Shift + Alt + ↓：快速复制该行内容到下一行
Alt + ↑或↓：将该行内容快速移动一行
Tab键：向后缩进
Tab + Shift：向前缩进
多光标：Alt + 鼠标左键
将光标快速移动到行首/行尾：Home/End，在笔记本上这两个键和方向键为同一个键，需要使用Fn+Home/End
一些快速输入的方法记录：
```
li{列表项$}*4
```

HTML基本结构和属性

Web前端三大核心技术

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

HTML：超文本标记语言

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

创建标签的快捷键：单词+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注释

写法
```

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

标题与段落

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

文本修饰标签

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

图片标签与图片属性

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

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

引入文件的地址路径

相对路径

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

绝对路径

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

跳转链接

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

跳转锚点

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

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

<a href="#surprise">
	<p>点击有惊喜<p>
</a>

<p id="surprise">
	<p>惊喜来啦<p>
</P>

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

<a href="#surprise">
	<p>点击有惊喜<p>
</a>

<a name="surprise">
	<p>惊喜来啦</P>
</a>

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

二者区别：

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

跳转到顶部的代码：
```
<a href="#">
	<p>回到顶部</p>
</a>
```

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

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

页面内锚点定位建议使用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>）

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

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

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

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

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。列表项需要添加标题和对标题进行描述时使用定义列表。
< 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>
```

表格

表格标签

< table>< /table>：表格的最外层容器
< caption>< /caption>：定义表格标题，caption 标签必须紧随 table 标签之后。每个表格只能定义一个标题。通常这个标题会被居中于表格之上
< tr>< /tr>：定义表格中的行，tr元素包含一个或多个th或td元素
< th>< /th>：定义表头单元格，th 元素内部的文本通常会呈现为居中的粗体文本
< 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
合并单元格步骤：

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

表单

表单标签

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

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

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

< textarea>< /textarea>：多行文本框
< select>< /select>、< option>< /option>：option定义下拉列表中的一个条目
< 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

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