HTML学习
HTML学习
📚 Web 学习目录
🚀 HTML学习 - 📝 CSS学习 - 🔦 JavaScript学习 - 🎉 JavaScript 高级
本教程里的资料来源于网友的资料，自己整理以供学习。视频学习：黑马程序员
什么是HTML?
HTML：超文本标签语言、注意：H5 并不是新语言，而是 Html 语言的第五个版本
支持：
- 所有主流浏览器都支持H5(Chrome，Firefox，Safari …)
- IE9(部分支持）及以上支持H5，但是IE8(完全不支持)及以下不支持H5
增加了新特性:
- 语义特性(aside、nav、header、footer…)
- 本地存储特性(localStorage、sessionStorage)
- 网页多媒体(video、audio）
- 二维三维(transform)
- 特效
HTML的基本骨架
1 | <!--根标签/根节点--> |
vscode 快速生成 html 骨架：
- !后tab
- *快速生成必备插件：emmet
其他
<!DOCTYPE xxx>（DTD）：文件类型定义，用于告诉浏览器该用什么规范解析文件，必须写在HTML文档第一行、如：说明使用的是H5版本
严格模式：又称标准模式，指浏览器按照W3C标准解析代码
混杂模式：又称怪异模式或兼容模式，值浏览器按照自己的方式解析代码
如何区分？：看DTD，如果文档包含严格的DOCTYPE，那么一般以严格模式呈现。(严格DTD–严格模式);如果包含过渡DTD和URI(统一资源标识符)的DOCTYPE，也以严格模式呈现。但有过渡DTD而没有URI会导致页面以混杂模式呈现。(有URI的过渡DTD——严格模式;没有URI的过渡DTD——混杂模式);DOCTYPE不存在或形式不正确会导致文档以混杂模式呈现(DTD不存在或者格式不正确——混杂模式);HTML5没有DTD，没有严格模式与混杂模式的区别；区分意义：如果只有严格模式，那么旧网站会受到影响，如果只有混杂模式，那么就会回到浏览器大战的混乱，每个浏览器都有自己的解析模式
严格模式与混杂模式的解析不同点：
- 严格模式设置元素的宽高指的是元素内容的宽度和高度，而在混杂模式则包括了padding和margin
- 严格模式无法设置行内元素的高宽。混杂模式则可以
margin：0 auto 在IE会失效
html标签的lang属性：用来定义当前文档显示的语言，en为英语，zh-CN为中文
字符集
- UTF-8：包含全世界所有国家需要用到的字符
- GB2312：简体中文
- BIG5：繁体中文
- GBK：包含全部中文字符
H5中字符集写法
1 | <meta charset="UTF-8"> |
标签的语义化：即用合适的标签标记对应的内容，内容与标签的含义相近。比如说导航栏用nav标签，文章段落用p标签等等。标签语义化的好处在于使Html结构更清晰，便于阅读和SEO，有利于团队开发
遵循的原则：先确定语义的Html，再选合适的CSS
HTML标签
标签
标签分类
- 双标签
<标签名>内容</标签名>:div、p、span等 - 单标签
<标签名/>:br、input、img等
标签关系
- 嵌套关系：如Html是所有标签的父标签
- 并列关系：如head和body标签
- 注：如果两个标签是嵌套关系，子元素最好缩进一个Tab的身位。若是并列关系，最好上下对齐。
标签类型
一、排版标签
标题标签：
1
2
3
4
5
6<h1>标题一共六级选</h1>
<h2>文字加粗一行显</h2>
<h3>从大到小依次减</h3>
<h4>从重到轻随之变</h4>
<h5>语法规范书写后</h5>
<h6>具体效果刷新见</h6>文字大小h1-h5逐渐变小
段落标签：
1
<p> 文本内容 </p>
文本内容
水平线标签：
1
<hr />(单标签) 增加一条线 hr=horizon
换行标签：
1
2<br />
br=<break></break>div span标签：
1
2
3
4网页布局的两个主要盒子 div=division
<div></div>
<span></span>
二、文本格式化标签
字体加粗
1
2<strong></strong>
<b></b>字体加粗
字体加粗
字体倾斜
1
2<em> </em>
<i> </i>字体倾斜
字体倾斜字体加删除线
1
<del> </del>
字体加删除线字体加下划线
1
2<ins> </ins>
<u></u>字体加下划线
其他
1
2
3
4<sup>定义上标</sup>
<sub>定义下标</sub>
<small>变小字号</small>
<big>变大字号</big>123定义上标
123定义下标
变小字号
变大字号
标签属性
基本语法格式
1 | 格式： |
在上面的语法中:
- 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面
- 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
- 任何标签的属性都有默认值，省略该属性则取默认值
- 采取
键值对的格式 key=”value”的格式
图像标签
基本语法格式
1
2<img src="图像URL(图像路径)" />
<img src="./public/img.jpg" />
标记属性
属性 属性值 src URL alt 文本 title 文本 width 像素 height 像素 border 像素
链接标签
基本语法格式：
1 | <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a> |
href：用于指定链接目标的url地址，当为标签应用href属性值时，它就具有了超链接的功能
target：用于指定链接页面打开方式，有 _self 和 _blank 两种取值，其中self为默认值(在当前页面打开)，blank为在新窗口中打开方式。
即如果想要对元素添加点击链接功能，则需要对其加上链接标签即a标签
注意 :
外部链接:需要添加
https://内部链接:直接链接内部页面名称即可 比如
<a href="index.html">首页</a>如果没有确定链接目标，通常将链接标签的href属性值定义为”#”，表示该链接暂时为一个空链接
除了文本，图像表格音频视频等都可以添加超链接
如：<a href="img标签.html" target="blank"> <img src="C:\photo.jpg"> </a>
锚点定位
1 | <a href="#id=uu">xxx</a> |
Base标签
在head中添加<base target="_blank" />可实现所有链接都以新窗口打开，同理_blank改为_self则实现所有链接都以自身窗口打开
若想实现其中某个链接以不同方式打开，则对其单独设置target属性即可。
特殊字符代码
都要记得加&
注意：实体名称对大小写敏感！
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| “ | 引号 | " | " |
| ‘ | 撇号 | ' (IE不支持) | ' |
| ￠ | 分（cent） | ¢ | ¢ |
| £ | 镑（pound） | £ | £ |
| ¥ | 元（yen） | ¥ | ¥ |
| € | 欧元（euro） | € | € |
| § | 小节 | § | § |
| © | 版权（copyright） | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
注释标签
1 | <!--注释内容--> |
养成注释的习惯！
路径
相对路径:
- 图像文件和HTML文件位于同一文件夹。只需输入图像文件的名称即可，如
<img src="logo.gif" /> - 图像文件位于HTML文件的下一级文件夹:输入文件夹名和文件名，之间用”隔开，如
<img src="img/logo.gif" 1> - 图像文件位于HTML文件的上- -级文件夹:在文件名之前加入.””，如果是上两级，则需要使用”./. .”.以此类推，如
<img src="./logo.gif">
绝对路径:
“D:\logo.gif”.或完整的网络地址，例如:网络地址:”https://zykjofficial.gitee.io/img/avatar.png“
一般不用绝对路径
无序列表
各个列表项之间没有顺序级别之分，是并列的(没有顺序数字前戳)。
基本语法格式：
1 | <ul> |
- 列表项1
- 列表项2
- 列表项3
注意事项：
<ul></ul>之间只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。<li></li>之间相当于一个容器,可以容纳所有元素无序列表的样式可让CSS来完成设置
有序列表
带顺序数字前缀的列表
基本语法格式：
1 | <ol> |
属性说明：
| 属性 | 值 | 说明 |
|---|---|---|
| 1 | 百度吧。。。 | |
| A | 百度吧。。。 | |
| type | a | 百度吧。。。 |
| I | 百度吧。。。 | |
| i | 百度吧。。。 | |
| start | 数值 | 有序列表的起始数字 |
- 列表项
注意事项与无序列表相同
自定义列表(理解即可）
常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。一般用于网页结尾。
基本语法：
1 | <dl> |
- 名词1
- 名词1解释1
- 名词1解释2
- 名词2
- 名词2解释1
- 名词2解释2
表格
基本语法格式：
1
2
3
4
5
6
7
8
9
10
11
12<table>
<tr>
<th>标题1</th>
<th>标题2</th>
...
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
...
</tr>
</table>标题1 标题2 内容1 内容2 table：为整体框架tr：行数th: 表头(通俗来说就是标题)td：每一行内的单元格数(没有列的说法)注意事项：
table里只能放tr标签，不能放其他。而td里可以放任何东西。表格属性
属性名 含义 像素值 border设置表格的边框(默认border=”0”无边框) 像素值 cellspacing设置单元格与单元格边框之间的空白间距 像素值(默认为2像素) cellpadding设置单元格内容与单元格边框之间的空白间距 像素值(默认为1像素) width设置表格的宽度 像素值 height设置表格的高度 像素值 align设置表格在网页中的水平对齐方式 left、center、 right 表头标签
把表头的<td>换成<th>，会自动加粗居中表头结构
表格布局时可分为头部主体和页脚
<thead></thead>:用于定义表格头部<tbody></tbody>:用于定位表格主体以上两种都不显示，只是用于布局。
表格标题
<caption>标题</caption>写在table标签内合并单元格
跨行合并：
rowspan跨列合并：colspan合并单元格的思想：将多个内容合并的时候，会有多余的东西，将其删除。例如把3个td合并成一个，就多于2个，需要删除
公式 删除的个数=合并的个数-1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36<table width="500" height="200" border="1" cellpadding="0" cellspacing="0" align="center">
<!--表格框架标签-->
<caption>表格</caption>
<thead>
<!--表头结构标签-->
<tr>
<!--行标签-->
<th>姓名</th>
<!--表头标签-->
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<!--表头主题标签-->
<tr>
<td>克拉克肯特</td>
<!--单元标签-->
<td>男</td>
<td>35</td>
</tr>
<tr>
<td>布鲁斯韦恩</td>
<td colspan="2">男</td>
<!--跨列合并-->
</tr>
<tr>
<td>戴安娜普林斯</td>
<td>女</td>
<td rowspan="2">28</td>
</tr>
<tr>
<td colspan="2">巴里艾伦</td>
</tr>
</tbody>
</table>表格
表格不要纠结于外观，是CSS的作用
表单
组成：表单控件，提示信息，表单域3个部分构成
input控件（重点）及其属性
属性 属性值 描述 text单行文本输入框 password密码输入框 radio单选按钮 checkbox复选框 typebutton普通按钮 submit提交按钮 reset重置按钮 image图像形式的提交按钮 file文件域 name由用户自定义 控件的名称 value由用户自定义 input控件中的默认文本值 size正整数 input控件在页面中的可见的字符数 checkedchecked 定义选择控件默认被选中的项 maxlength正整数 控件允许输入的最多字符数 type：image可以设置按钮为其他图像<input type="image" src="img/logo.jpg">radio: 通过设置相同name属性来实现单选 男 女file：类型可以用来上传文件 添加multiple属性可以上传多个文件name：如果单选框radio是同一组，那么可以通过name属性来设置为一组，从而限制选择value：属性可以改变按钮中的文本checked：属性可以设置默认选中项 即<input type="button" checked="checked" />maxlength：可以设置其最大输入字符数其他常用属性值:
placeholder：可实现用户输入时里面的文字消失，删除所有文字，自动返回autofocus：实现打开网页时，光标自动定位到其所在表单autocomplete：实现自动记录表单内容，再次输入时可智能提示1
2
3用户名：
<input type="text" autocomplete="on" name="username">
<input type="submit">注意：必须要有提交按钮。其次表单
必须要有名字。required：要求必须输入pattern：正则表达式验证multiple： 实现上传填写多个东西form：指定某个表单id，再将当前表单的form属性值设置为与其id相同。在将来指定id号的表单进行数据提交的时候，也会将当前表单元素的数据进行提交H5 input新增的type类型
类型 使用示例 含义 email <input type="email">输入邮箱格式 tel <input type="tel">输入手机号格式 url <input type="url">输入url格式 number <input type="number">输入数字格式 search <input type="search">搜索框(体积语义化) range <input type="range">自由拖动滑块 time <input type="time">小时分钟 date <input type="date">年月日 datetime <input type="datetime">时间 month <input type="month">月年 week <input type="week">星期年 email：用于填写邮箱，填写时必须有@符号，同时包含服务器域名。如不能满足验证，则会阻止当前的数据提交tel：用于填写号码，不是用来验证，是为了能在移动端打开键盘时打开数字键盘。即限制了用户只能输入数字url：填写网址。只能输入合法的网址，必须包含http://number：只能输入数字 其中 max最大值 min最小值 value默认值color：选择颜色
Label
若想实现点击文字就可进入文本框，则可用label标签包裹整个表单选项
1 | <label>输入账号：<input type="text" /></label> |
若有多个输入框，想定位到某个，则对目标框设置id，然后<label for="id"></label>
textarea
若想实现大量文本输入，则可用textarea标签
1 | <textarea>请输入留言</textarea> |
H5新增的属性
| 属性 | 值 | 描述 |
|---|---|---|
autofocus | autofocus | 规定在页面加载后文本区域自动获得焦点。 |
cols | number | 规定文本区内的可见宽度。 |
disabled | disabled | 规定禁用该文本区。 |
form | form_id | 规定文本区域所属的一个或多个表单。 |
maxlength | number | 规定文本区域的最大字符数。 |
name | name_of_textarea | 规定文本区的名称。 |
placeholder | text | 规定描述文本区域预期值的简短提示。 |
readonly | readonly | 规定文本区为只读。 |
required | required | 规定文本区域是必填的。 |
rows | number | 规定文本区内的可见行数。 |
wrap | hardsoft | 规定当在表单中提交时，文本区域中 |
select下拉菜单标签
1 | <select> |
其中selected="selected"代表默认选项
option也可以为单标签，效果一样
实现多选 multiple
1 | <select multiple="multiple"> |
表单域
即整个表单框架
基本语法：
1
<form action="url地址" method="提交方式" name="表单名称">各种表单控件</form>
常用属性：
action：表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址method:用于设置表单数据的提交方式，其取值为get或postenctype：设置解码方式，如果有file表单元素，则一定为multipart/form-dataname：用于指定表单的名称，以区分同一个页面中的多个表单。注意：每个表单都要有自己的表单域
H5 常用新标签
header：定义文档的页眉头部
nav：定义导航链接的部分
footer：定义文档或节的页脚 底部
article：定义文章
section：定义文档中的节
aside：定义其所处内容之外的内容 侧边
datalist：标签定义选项列表，请与input元素配合使用该元素
fieldset:可将表单内的相关元素分组，打包
Datalist用法
通过设置id并在input中的list属性链接这个id，从而达到智能显示的效果
1 | <input type="text" value="输入明星" list="star"> |
datalist与selection的区别:前者不仅可以选择，还可以输入。
datalist弊端：在不同浏览器的显示不同，少用
注：如果与之连接的input type值为url，则其value值必须添加http://
Fieldset用法
与legend搭配使用，legend包含在fieldset里面负责写标题。例：
1 | <fieldset> |
多媒体标签
引用网上的视频：embed
引用本地视频：video 三种格式：mp4、ogg、wmv
引用本地音频：audio 三种格式：mp3、ogg、wav
常用属性 ：
autoplay：控制自动播放
controls：添加进度条等控制元素
loop：x 循环播放x次
poster：设置视频封面
格式的兼容：
1 | <!-- 从上往下一个个尝试 --> |
解决低版本浏览器新标签不兼容的措施
通过创建新标签并转化标签模式
1
2
3<script>
document.createElement("名字"); //默认为行级元素
</script>通过引入第三方插件
1
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
- 支付宝
- 微信
