HTML学习

📚 Web 学习目录

🚀 HTML学习 - 📝 CSS学习 - 🚗 Flex 与 Grid 学习 - 🔦 JavaScript学习 - 🎉 JavaScript 高级

📦 jQuery学习 - 📌 Ajax学习 - 🔮 Nodejs学习 - 🎀 Axios学习

本教程里的资料来源于网友的资料，自己整理以供学习。视频学习：黑马程序员

什么是HTML?

HTML：超文本标签语言、注意：H5 并不是新语言，而是 Html 语言的第五个版本

支持：

所有主流浏览器都支持H5(Chrome，Firefox，Safari …)
IE9(部分支持）及以上支持H5，但是IE8(完全不支持)及以下不支持H5

增加了新特性:

语义特性(aside、nav、header、footer…)
本地存储特性(localStorage、sessionStorage)
网页多媒体(video、audio）
二维三维(transform)
特效

HTML的基本骨架

<!--根标签/根节点-->
<html> 
    <!--用于存放title、meta、base、style、script、link-->
    <head> 
        <!--标题标签-->
        <title></title> 
    </head>
    <body> 
        <!--主体标签-->
    </body>
</html>

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标签

标签可以拥有多个属性，必须写在开始标签中，位于标签名后面
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
任何标签的属性都有默认值，省略该属性则取默认值
采取 键值对 的格式 key=”value”的格式

图像标签

基本语法格式

1 2	<img src="图像URL(图像路径)" /> <img src="./public/img.jpg" />

标记属性
属性属性值
src URL
alt 文本
title 文本
width 像素
height 像素
border 像素

属性	属性值
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
2
3

<a href="#id=uu">xxx</a>
<!-- 记得添加#和""号！非常重要！-->
<标签名 id=uu> </标签名>

点我跳转到开头

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“

一般不用绝对路径

无序列表

各个列表项之间没有顺序级别之分，是并列的(没有顺序数字前戳)。

基本语法格式：

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ul>

列表项1
列表项2
列表项3

注意事项：

<ul></ul>之间只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
<li></li>之间相当于一个容器,可以容纳所有元素
无序列表的样式可让CSS来完成设置

有序列表

带顺序数字前缀的列表

基本语法格式：

<ol>
    <li>列表项</li>
    ....
</ol>

属性说明：

属性	值	说明
	1	百度吧。。。
	A	百度吧。。。
type	a	百度吧。。。
	I	百度吧。。。
	i	百度吧。。。
start	数值	有序列表的起始数字

列表项

注意事项与无序列表相同

自定义列表(理解即可）

常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。一般用于网页结尾。

基本语法：

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
    ...
    <dt>名词2</dt>
    <dd>名词2解释1</dd>
    <dd>名词2解释2</dd>
    ...
</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里可以放任何东西。

标题1	标题2
内容1	内容2

表格属性

属性名	含义	像素值
`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

<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>

姓名性别年龄克拉克肯特男35布鲁斯韦恩男戴安娜普林斯女28巴里艾伦

表格不要纠结于外观，是CSS的作用

表单

组成：表单控件，提示信息，表单域3个部分构成

input控件（重点）及其属性

属性	属性值	描述
	`text`	单行文本输入框
	`password`	密码输入框
	`radio`	单选按钮
	`checkbox`	复选框
`type`	`button`	普通按钮
	`submit`	提交按钮
	`reset`	重置按钮
	`image`	图像形式的提交按钮
	`file`	文件域
`name`	由用户自定义	控件的名称
`value`	由用户自定义	input控件中的默认文本值
`size`	正整数	input控件在页面中的可见的字符数
`checked`	checked	定义选择控件默认被选中的项
`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下拉菜单标签

<select> 
    <option>北京</option> 
    <option selected="selected" >上海</option>
    <option >广州</option> 
    <option>深圳</option>
</select>

其中selected="selected"代表默认选项

option也可以为单标签，效果一样

实现多选 multiple

<select multiple="multiple"> 
    <option>北京</option> 
    <option>上海</option>
    <option >广州</option> 
    <option>深圳</option>
</select>

表单域

即整个表单框架

基本语法：

1	<form action="url地址" method="提交方式" name="表单名称">各种表单控件</form>

常用属性：
action：表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址
method:用于设置表单数据的提交方式，其取值为get或post
enctype：设置解码方式，如果有file表单元素，则一定为multipart/form-data
name：用于指定表单的名称，以区分同一个页面中的多个表单。
注意：每个表单都要有自己的表单域

H5 常用新标签

header：定义文档的页眉头部

nav：定义导航链接的部分

footer：定义文档或节的页脚底部

article：定义文章

section：定义文档中的节

aside：定义其所处内容之外的内容侧边

datalist：标签定义选项列表，请与input元素配合使用该元素

fieldset:可将表单内的相关元素分组，打包

Datalist用法

通过设置id并在input中的list属性链接这个id，从而达到智能显示的效果

<input type="text" value="输入明星" list="star">
<!-- input里面用list -->
<datalist id="star"> 
    <!-- datalist里面用id实现和input的链接 --> 
    <option >刘德华</option> 
    <option >郭富城</option> 
    <option >黎明</option> 
    <option >张学友</option> 
</datalist>

datalist与selection的区别:前者不仅可以选择，还可以输入。

datalist弊端：在不同浏览器的显示不同，少用

注：如果与之连接的input type值为url，则其value值必须添加http://

Fieldset用法

与legend搭配使用，legend包含在fieldset里面负责写标题。例：

<fieldset> 
    <legend>用户登录</legend> 
    <!-- 标题 --> 
    用户名：<input type="text"> <br /> 
    密　　码：<input type="password">
</fieldset>

用户登录用户名：
密　码：

多媒体标签

引用网上的视频：embed

引用本地视频：video 三种格式：mp4、ogg、wmv

引用本地音频：audio 三种格式：mp3、ogg、wav

常用属性：

autoplay：控制自动播放

controls：添加进度条等控制元素

loop：x 循环播放x次

poster：设置视频封面

格式的兼容：

<!-- 从上往下一个个尝试 --> 
<video controls> 
    <source src="xxx.ogg" type="video/ogg">
    <source src="xxx.mp4" type="video/mp4">
</video>

解决低版本浏览器新标签不兼容的措施

通过创建新标签并转化标签模式

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>

HTML学习

HTML学习

什么是HTML?

HTML的基本骨架

其他

字符集

HTML标签

标签

标签分类

标签关系

标签类型

标签属性

图像标签

链接标签

锚点定位

Base标签

特殊字符代码

注释标签

路径

无序列表

有序列表

自定义列表(理解即可）

表格

表单

Label

textarea

select下拉菜单标签

表单域

H5 常用新标签

Datalist用法

Fieldset用法

多媒体标签

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
“	引号	`"`	`"`
‘	撇号	`' (IE不支持)`	`'`
￠	分（cent）	`¢`	`¢`
£	镑（pound）	`£`	`£`
¥	元（yen）	`¥`	`¥`
€	欧元（euro）	`€`	`€`
§	小节	`§`	`§`
©	版权（copyright）	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
“	引号	`"`	`"`
‘	撇号	`' (IE不支持)`	`'`
￠	分（cent）	`¢`	`¢`
£	镑（pound）	`£`	`£`
¥	元（yen）	`¥`	`¥`
€	欧元（euro）	`€`	`€`
§	小节	`§`	`§`
©	版权（copyright）	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
“	引号	`"`	`"`
‘	撇号	`' (IE不支持)`	`'`
￠	分（cent）	`¢`	`¢`
£	镑（pound）	`£`	`£`
¥	元（yen）	`¥`	`¥`
€	欧元（euro）	`€`	`€`
§	小节	`§`	`§`
©	版权（copyright）	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`