转自：https://blog.csdn.net/qq_40945903/article/details/78609887
HTML
1.html由浏览器去解析，存在兼容性问题
2.html文件的后缀名可以是 .html 或 .htm
3.它是一个标记语言，并非编程语言
标签
1.标签是由尖括号包围的关键词比如 <html>
2.标签分为单标签和双标签 <br/> <p></p>
3.标签之间可以相互嵌套，切记不准许穿插嵌套 <div><p></br></p></div>
属性
1.<标签名 属性名1="属性值" 属性名2="属性值" ... 属性名N="属性值">
<!– 输出内容… -->
</标签名>
2.所有关于样式的属性，我们均可以不去记忆，有单独的css可以完成
注释 重要
1.html <!-- 被注释的内容 -->
2.为了提高代码的可读性
html文档特性
1.在源码中所敲空格和回车都只起一个空格的作用，写再多也没有效果
2.切记不要使用空格去排版
文档命名规则
第一个字符必须是字母，之后的字符可以是数字，字母，下划线(还可以有点 .)
文档主体结构h5
<!DOCTYPE html> 文档声明头，告知浏览器下面所写的代码用那个版本去解析
<html>
<head>填写公共属性信息,用户所查看不到的内容，填写在这里面</head>
<body>凡是想让用户查看的信息，我们填写在body里</body>
</html>
head中的内容
<meta charset="UTF-8"> 设置中文字符集
<meta http-equiv="refresh" content="5;url=https://www.baidu.com"> 自动刷新及跳转
<title></title> 设置网页标题的标签
body中的内容
<h1~6>填写标题内容</h1~6> 独占一行 样式上字体较大，文字加粗。对搜索引擎有很好的优化作用！但是一个页面仅限用一次
<p>填写段落内容</p> 独占一行
<br/> 单标签 具有换行效果
<pre></pre> 按照html源码中的格式展现在浏览器上！
<hr/> 单标签 显示一条与父标签等宽的水平线
<span></span> 无意义的行及标签 不会独占一行
<div></div> 无意义的块及标签 独占一行
非重点
粗体标签 <b></b>
斜体标签 <i></i>
下划线标签 <u></u>
删除线标签 <del></del>
上标标签 <sup></sup>
下标标签 <sub></sub>
字符实体
用于显示是一些有特殊意义的符号，在源码中所写的内容不能直接显示在页面当中，就需要用到字符实体
常用的字符实体：
空格：
< : <
> : >
& : &
￥ : ¥ 中国钱的单位
a链接标签
<a href="填写链接地址" target="设置打开方式" title="用于对链接的描述">链接名称</a>
href ：
1.可填写具体的网络地址
2.还可以填写相对地址
3.可以填写绝对地址
4.什么都不填写，代表当前页面的
5.填写#号，代表当前页面刷新
target：
1._blank 新页面打开
2._self 默认形式，代表在当前打开新的页面
title：当用户鼠标放在链接上时，会有一个小提示。提示的内容就是我们所填写的值
锚点链接
需要现在页面当中设置锚
<a name="自定义锚的名字"></a>
想要跳转至某个锚的时候
<a href="文件地址#要跳转的锚的名称">自定义文字</a>
图片标签
<img src="填写图片地址" alt="对图片的简单介绍">
src：
1.可以填写网络地址
2.可以填写当前服务器上的相对地址
alt：
在图片没有加载时，自动显示alt中的内容，给用户友好体验
搜索引擎在搜索优化时，能够更好更准确的知道当前图片的内容，更加容易让搜索引擎收录
热点地图 非重点
需要在img标签中填写usemap属性 属性值 "#自定义的名称"
<map name="等于usemap中自定义的名称，不带#号" id="与我们的name值相同">
<area shape="热点类型" coords="根据热点的形状，填写不同个数的值" href="跳转地址"/>
</map>
定义id的目的，是为了让更多的浏览器支持热点地图标签
shape：
rect 矩形
circle 圆形
poly 多边形
coords：
矩形，两个点确定一个矩形 x1,y1,x2,y2
圆形，一个点加上一个半径 x,y,r
多边形，根据我们想要画的多边形的顶点来确定具体的点的个数
列表标签
<ul>
<li></li>
<li></li>
<li></li>
</ul>
列表标签是固定搭配结构，在ul和li或li和li直接都不要填写其他内容，容易造成意想不到的后果
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<dl>
<dt></dt>
<dd></dd>
</dl>
表格标签
<table>
<caption></caption>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td rowspan="" colspan=""></td>
<td></td>
</tr>
</table>
table同样是固定搭配格式，中间不要放任何代码
caption 表的标题内容所展示位置
th 表头所存放的位置 字体会加粗，默认会居中对齐
使用合并时，一定注意将多余的代码删除
rowspan 跨行合并
colspan 跨列合并
form表单 重点
所有的表单均需要写在form标签对中
<form>
表单内容
</form>
action：填写提交地址，如果不填写，代表提交至当前页面
method：提交方式，get或post 默认是get
get 通过url把用户所填写的表单内容进行传输，速度快，但是安全性不高并且传输内容较少，最多8万个字符
post 加密方式提交，相对比较安全，但是速率较慢。并且我们在传输过程中查看不到传输的内容
表单中的公共属性
name：所有的表单我们均需要填写name属性(提交功能的表单除外)，若没有name属性，则无法把对应的值提交至服务器。
value：默认值。
maxlength:设置用户填写的最大长度，长度单位为字符个数（中英文通用！），但在实际项目开发中，不推荐大家使用。
readonly:
readonly 属性规定输入字段为只读,但其value值仍会被表单提交
readonly属性只针对text、password和textarea有效
disabled:
disabled属性规定禁用该表单元素，其value值不会被表单提交
disabled属性对所有表单元素均有效，包括包括select, radio, checkbox, button等
使用disabled属性后表单元素背景会变成灰色
单行文本框
<input type="text" name="起一个名字"/>
密码框
<input type="password" name=""/>
多行文本框
与单行文本框相对比，填写的内容让用户查看到的更多。
<textarea name=""></textarea>
单选框
name：同一组单选框要使用相同name名称。
value：单选框提交数据与其他框不同，它是没有值的！所以需要我们手动定义值，这时候就需要用到value。
checked：若想要设置默认选项，就在对应的表单上填写checked属性。
<input type="radio" name="" value="" checked="checked" />
复选框
name：同一组复选框要求名称相同，并且名字后面一定要加上一个英文的 [] , 为了解决重名问题。
value：多选框本身同样是没有值，需要我们提前自定义。
checked：用于选择默认选项的。
<input type="checkbox" name="like[]" value="0" checked="checked"/>
下拉菜单
select：代表下拉菜单框
option：具体的菜单选项
value：填写value后台才能对应接收到数据
<select name="cs" id="" >
<option value="zz">郑州</option>
<option value="sh">上海</option>
<option value="bj">北京</option>
</select>
浏览框
<input type="file" name="" />
隐藏表单
name：自定义的名字
value：是服务器所给我们指定好的值
<input type="hidden" name="" value=""/>
提交按钮
<input type= "submit" name="" value=""/>
<button type=“submit”>提交</button>
重置按钮
<input type= "reset" name="" value=""/>
<button type="reset">重置</button>
普通按钮
<input type= "button" name="" value=""/>
<button type="button">普通按钮</button>
用于与表单标签实现绑定关系
需要在绑定表单当中自定义一个id
for：该 label想要与那个表单进行绑定时，把对应的表单的id填写在for上
<label for=""></label>
