目录
1.HTML的概述
- HTML是一门超文本标记语言而不是编程语言，其包括诸多标签可以用于构建基本的网页，而浏览器可以通过其内核去解析这些标签，将其界面正确的展示出来；
- HTML的标签是由尖括号包围的关键词，如<div>;
- HTML的标签一般是成对出现的，如<div></div>,类似这种的称为双标签；当然也有单标签，如<br>；
- 标签的关系有包含关系和并列关系,如下所示：
-
//包含关系：<html>标签里包含着<head>标签，因此可以称为是包含关系（父子关系） //并列关系：<head>标签和<body>标签不存在包含关系，而是并列在一起的，因此称为并列关系（兄弟关系） <html> <head></head> <body></body> </html>
2.HTML的基本结构标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>- <!DOCTYPE html>表示当前页面用HTML5版本来显示网页，它不是一个html标签（它不包括在html标签里面）,它是一个文档类型声明标签
- 这段代码可以在VSCode中输入英文感叹号后回车便可自动生成
- lang="en"规定了元素内容所用的语言是英语，基本所有主流浏览器都支持lang属性，因为可以帮助搜索引擎更快的解析网页内容；lang="zh-CN"则规定了元素内容所用的语言是中文
- charset是字符集的意思，“UTF-8”被称为“万国码”，基本包括了所有国家会用到的字符；这个属性是必须设置的，不然页面会乱码
- <title>标签指定了这个网页的标题
3.HTML的基本标签
1.标题标签
- 在页面中经常需要使用到不同大小的标题，<h1>-<h6>,<h1>是一级标题，<h6>是六级标题，字体大小依次递减
- 每个标题与其他标题之间的距离是比较大的，但如果使用换行标签的话就不会
2.段落标签
- 语法格式：
<p>这是一个段落标签</p>使用场景：当页面中需要将文本分为几个段落来显示就可以使用
特点：段落中的文本会根据浏览器窗口的大小自动换行；段落和段落之间有一定的空隙
3.换行标签
- 语法格式
<br>使用场景：如果需要对文本强制进行换行显示，那么可以在文本的末尾加上一个换行标签
特点：它是一个单标签并且换行后的内容是正常的距离不会像段落那些空隙那么大
4.文本格式化标签
- 在设计网页中，有时候需要用到加粗，斜体，下划线，删除线这些比较特殊的显示，那么可以使用文本格式化标签来实现
| 语义 | 标签 |
| 加粗 | <strong></strong> |
| 斜体 | <em></em> |
| 删除线 | <del></del> |
| 下划线 | <ins></ins> |
- 加粗和斜体用的会相对较多
5.div标签和span标签（非常重要，很常用！）
- 他们是没有语义的标签，可以将其理解成一个用来装内容的容器（盒子）
- <div>标签用于布局时一行只能放一个，并且可以设置宽高，可以理解为一个较大的盒子
- <span>用于布局时一行可以放很多个，不可以设置宽高，可以理解为较小的盒子
- <div>标签和<span>标签在今后的开发中运用会非常的广泛
<div>这是一个一行只能放一个的大盒子</div> <span>这是一个一行可以放很多个的小盒子</span>
6.图像标签和路径（重点！）
6.1 图像标签
- 语法格式：
<img src="目标资源地址" />
- <img>标签可以用于定义HTML页面中的图像，其中，src属性是必须属性，其指定了图像的地址
- 图像标签还有以下几个属性：
属性 说明 src 指定了图像的路径，必须属性 alt 当图片显示不了时就显示此文字 title 鼠标移到图片上时会显示的文字 width 设置图像的宽 height 设置图像的高 border 设置图像的边框 
6.2 路径解读
- 在<img>标签中存在一个必须属性“src”，“src”可以通过绝对路径或者相对路径来表示
- 在实际开发中，我们需要将我们写的文件统一放在一个目录下，这个称之为目录文件夹，而进入目录文件夹的第一层则称为根目录
- 绝对路径：是指目录下的绝对位置，直接到达目标位置；如上面src的值用的就是绝对路径，如“D:\Users\image\01.png”便可以称为绝对路径
- 相对路径：图像相对于HTML页面所在的位置，下面分析这三种情况：
相对路径分类 符号 说明 同一级路径 图像和html文件位于同一级，如 <img src="01.jpeg" alt="">
下一级路径 / 图像位于html文件的下一级路径，如
<img src="images/02.jpeg" alt="">
上一级路径 ../ 图像位于html文件的上一级路径，如
<img src="../01.jpeg" alt="">
7.超链接标签（重点！）
- 语法格式：
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>属性 说明 href 指定链接跳转的url地址，必须填写的属性 target 指定链接页面的打开方式，默认值是_self即在此窗口打开，另一个值是_blank为在新窗口打开 - 超链接分类：
| 超链接类别 | 说明 |
| 外部链接 | 如<a href="http://www.baidu.com">百度</a> |
| 内部链接 | 如<a href="index.html"></a>，跳转到自己文件夹里的页面 |
| 空链接 | <a href="#">链接</a>，若暂未的值链接的地址可以先用#代替 |
| 下载链接 | 如果href的值是一个压缩包，那么会进行下载 |
| 网页元素链接 | 网页中的各种元素（文本，音频，图像..）都可添加超链接 |
| 锚点链接 | 当点击链接时可以快速跳转到指定的位置，分为两个步骤： 1）将链接的href设置为属性值是“#名字”的形式，如<a href="#one"></a> 2）找到目标位置的标签，为其添加一个id属性，如<p id="one">段落标签内容</p> |
8.表格标签
- 表格的作用：用于展示数据，更加直观地了解数据
- 表格的基本结构：
<!-- 表格基本结构 --> <table> <!-- 表头单元格，与其他普通行作区分 --> <tr> <th></th> </tr> <tr> <td></td> </tr> </table>1）<table>标签用于定义一个表格，表格中的所有内容必须内嵌在这个标签之中；
2）<th>代表表头单元格，表头单元格中的内容会加粗居中显示
3）<tr>代表表格中的行
4）<td>代表表格中每一行中的列
- 表格属性：不太常用，后面直接通过css设置样式，主要分为以下几个：
属性名 属性值 说明 align center，left，right 规定表格大的对齐方式 border 1或“” 设置表格的边框 cellpadding 像素值 设置了单元格里的内容与边框的距离 cellspacing 像素值 设置了单元格与单元格之间的距离 width 像素值或百分比 设置了表格的宽度 - 表格结构标签：为了让表格结构标签有更好地语义化
<table> <!-- 表格头部 --> <thead> <tr> <th></th> </tr> </thead> <!-- 表格主体部分 --> <tbody> <tr> <td></td> </tr> </tbody> </table><thead></thead>标签代表着表格的头部，一般位于第一行
<tbody></tbody>标签代表着表格的主体部分，主要用于存放数据
5.合并单元格
- 跨行合并：rowspan="合并单元格的个数"，目标单元格为最上侧的单元格
- 跨列合并：colspan="合并单元格的个数"，目标单元格为最左侧的单元格
- 合并单元格的步骤：1）先确定是跨行合并还是跨列合并；2）找到目标单元格，写上合并代码，如<td rowspan="2"></td>；3）删除多余的单元格
9.列表标签
- 列表可以用于布局，分为有序列表，无序列表，自定义列表这三类
1.无序列表（非常重要）
- 基本语法格式如下：
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul>注意：<ul>标签中只能包含<li>标签，而<li>标签中可以包含其他所有元素
在开发中运用十分广泛，比如一个商品的模块就可以用无序列表来实现
2.有序列表（理解即可）
- 基本语法格式如下：
<ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ol>注意：<ol>标签中只能包含<li>标签，而<li>标签中可以包含其他所有元素
3.自定义列表（重要）
- 基本语法格式如下：
<dl> <dt>人名</dt> <dt>小小</dt> <dt>大大</dt> </dl><dl>标签中只能存放<dt>标签和<dd>标签，而<dt><dd>可以存放任何其他标签10.表单标签
10.表单标签
- 一个完整的表单是由表单域，表单标签以及提示信息组成的
1.表单域
- 是一个包含表单元素的区域，<form>标签用于定义表单域以实现用户信息的收集和传递，收集完毕后可以提交给服务器
<form action="url地址" method="提交方式" name="表单域名称">
表单中的组件
</form>| 属性 | 属性值 | 说明 |
| action | url地址 | 指定了要将表单域的内容提交到哪台服务器上 |
| method | get或post | 指定了提交时要用哪种方式 |
| name | 名字 | 指定了表单的名字，与其他表单作区分 |
2.表单标签（表单控件）
1.input表单元素
- 语法格式如下：
<input type="text"> - input的主要属性如下：
属性 说明 type type属性的不同的属性值都代表着不同的控件类 name 定义input的名字，让后台区分不同的input，要求单选按钮和复选框需要有相同的name值 value 定义input元素的值 checked 当属性值为checked时意味着被选中 maxlength 规定可以输入字符的最大长度 - type属性的属性值如下分布：
属性值 描述 button 点击按钮 checbox 定义复选框 file 可供文件上传 hidden 定义隐藏的输入字段 image 定义图像形式的提交按钮 password 定义密码字段 radio 定义单选按钮 reset 定义重置按钮 submit 定义提交按钮，会将表单数据发送到服务器 text 定义单行的输入字段
2.label标签
- 作用：可以用于绑定一个表单元素，当点击此标签内的文本时，光标会自动将焦点转到对应的表单元素上，增加用户体验
- 语法格式如下：
<input type="radio" name="sex" id="sex1"> <label for="sex1">男</label> <input type="radio" name="sex" id="sex2"> <label for="sex2">女</label>以上的代码可以实现点击男的时候光标自动对焦到input标签上
核心步骤：<label>标签中的for属性和相关绑定元素的id属性的属性值要相同，如for的属性值为sex1，那么对应元素的id属性值也应为sex1
3.select下拉标签
- 作用：当有多个选项可供用户选择时，可以通过下拉标签实现
- 语法格式：
<select name="city" id=""> <option value="">--城市选择--</option> <option value="">北京</option> <option value="">上海</option> <option value="">汕头</option> <option value="">深圳</option> </select>外部是用一个<select>标签包裹着，里面是<option>,可供选择的选项，具体数量根据实际情况而定
在<option>中也可以定义select="selected"，默认当前选项是被选中的状态
4. HTML5新特性
1.语义化标签
<header>头部标签</header>
<nav>导航标签</nav>
<article>内容标签</article>
<section>定义文档的某个区域</section>
<aside>侧边栏标签</aside>
<footer>底部标签</footer>主要是为了搜索引擎方便解析
2.多媒体标签
1.视频<video>
- 作用：添加这个标签可以在页面中播放音频，可以选择静音播放或者自动播放或者显示播放控件或者来调节这个音频的大小等等，可以让用户有更好地体验
- 语法格式：
<video src=""></video> - 主要属性如下：
属性 值 说明 src url src中存放的是该音频的链接地址 autoplay autoplay 自动播放功能 loop loop 循环播放功能 width 数值 设置音频的宽 height 数值 设置音频的高 controls controls 显示音频控件 muted muted 是否静音播放 preload auto/none 是否预先加载视频 poster imgurl 音频加载时等待的图片
注意：视频的属性值有些可以直接省略不写
2.音频<audio>
- 作用:使用这个插件可以在页面中播放一段音频，比如歌曲等等，主要的属性有autoplay，loop，src，controls，基本的含义与视频的相似
- 语法格式：
<audio src=""></audio>
3.新增的input类型
| 属性值 | 说明 |
| type=“email” | 限制用户输入必须为email类型 |
| type=“url” | 限制用户输入必须为url类型 |
| type=“date” | 限制用户输入必须为date类型 |
| type=“time” | 限制用户输入必须为time类型 |
| type=“month” | 限制用户输入必须为month类型 |
| type=“week” | 限制用户输入必须为week类型 |
| type=“number” | 限制用户输入必须为number类型 |
| type=“tel” | 限制用户输入必须为tel类型 |
| type=“search” | 限制用户输入必须为search类型 |
| type=“color” | 限制用户输入必须为color类型 |
4.新增的表单属性
| 属性 | 值 | 说明 |
| required | required | 拥有该属性的表单内容不能为空，必填 |
| placeholder | 文本内容 | 表单的提示文本，如果表单本来就存在默认值则不再显示 |
| autofocus | autofocus | 自动聚焦功能，页面加载完后自动聚焦到拥有该属性的表单 |
| autocomplete | off/on | 若值为on，则表单会保留上一次输入的内容，否则不会 |
| multiple | multiple | 可以选择多个文件提交 |
当需要修改placeholder的颜色时，可以通过以下的方法：
input::placeholder {
color: black;
}
5.属性选择器
- 这部分不怎么常用
6.结构伪类选择器
在实际运用中，前三个会用得比较多，尤其是第三个在选择一写<li>时会用得很频繁，而后三个基本不用到，
7.伪元素选择器（重点）
- 运用：当页面需要使用一些遮罩层或者轮播图里的左右轮播按钮，都可以使用伪元素选择器来实现
- 作用：可以简化HTML的结构，因为伪元素在后台文档树中是找不到的
- 语法：element::before {}
选择符 简介 ::before 在元素内部的前面插入内容 ::after 在元素内部的后面插入内容
通过before和after创建的元素是行内元素
before和after必须拥有content属性，内容可以为空
权重为1
2570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
