1.字符集
<meta charset="UTF-8">
<meta charset="gb2312">
指定字符集要和文件保存字符集一致
utf-8 :体积大，包含所有字符
gbk :体积小，只包含中文和常用外文
2.dtd文档说明
<!DOCTYPE html> html5版本说明,只能写在第一行
3.注释
<!--
注释内容
-->
4.img
<img src="img1/3.jpg" width="100px" height="100px" alt="图片不见了" title="海贼王"/>
<!--
src:图片地址
width:宽度
height:高度
alt:当图片加载不出来时显示的文字
title：鼠标悬停至图片上方显示的文字
width,height同时指定时易发生变形，一般只指定其一即可
相对路径:
../a.jpg 从上一层目录查找图片
../../a.jpg 从上一层的上一层目录查找图片
-->
5.a标签
<html>
<head>
<meta charset="utf-8" />
<title>a标签</title>
<base target="_blank" /> <!--设置全局a标签页面打开方式，可被覆盖-->
</head>
<body>
<a href="https://www.baidu.com/" title="百度网" target="_self">百度一下，你就知道了</a>
<a href="#">假标签1</a> <!--点击返回页面顶部-->
<a href="javascript:">假标签1</a> <!--点击不会返回页面顶部-->
<a href="#id1">跳转到底部</a>
<a href="url#id">跳转到url页面的id位置</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h1 id="id1">底部</h1>
<!--
title:鼠标悬停时显示的文字
target:页面打开方式，_blank 新建窗口打开页面，_self 在当前窗口打开页面
可通过base设置全局target
-->
</body>
</html>
6.列表
<html>
<head>
<meta charset="utf-8" />
<title>列表</title>
</head>
<body>
<!--无序列表-->
<ul type="square"><!--circle：空心圆，disc：实心圆，square：实心方块，建议使用CSS替代-->
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ul>
<br/>
<!--有序列表-->
<ol>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ol>
<!--定义列表-->
<dl>
<dt>北京</dt><!--定义-->
<dd>中国首都</dd><!--释义-->
<dt>上海</dt>
<dd>中国经济中心</dd>
</dl>
</body>
</html>
7.表格
<html>
<head>
<meta charset="utf-8" />
<title>表格</title>
</head>
<body>
<!--无序列表-->
<table border="1" align="center" cellspacing="1px" cellpadding="1px" width="500px" height="100px">
<caption>表格1</caption>
<tr>
<th>姓名</th><!--th定义表头，字体自动加粗，居中对齐-->
<th>性别</th>
<th>城市</th>
</tr>
<tr align="center" valign="center">
<td>小明</td>
<td>男</td>
<td>北京</td>
</tr>
</table>
<!--
table:
border:设置边框宽度，默认为0,颜色
align:表格在外部对齐方式,left,center,right
cellspacing:单元间距，默认为2px
cellpadding:单元和其内容间距
width:
height
tr:
align:单元内容水平对齐方式
valign:单元内容垂直对齐方式
td:
align:单元内容水平对齐方式
valign:单元内容垂直对齐方式
rowspan:规定单元格可竖跨的行数，垂直合并
colspan:规定单元格可横跨的行数，水平合并
caption:
表格名称
-->
</body>
</html>
8.表单
<html>
<head>
<meta charset="utf-8" />
<title>表单</title>
</head>
<body>
<form action="https://www.baidu.com/">
<p>
<label for="user">用户：</label><!--label使用方式一-->
<input type="text" id="user" />
</p>
<p>
<label><!--label使用方式二-->
密码：<input type="password" />
</label>
</p>
<p>
生日：<input type="date" />
</p>
<p>
邮箱：<input type="email" />
</p>
<p>
电话：<input type="number" />
</p>
<!--
input type类型:
text:普通文本
password:以点显示
email:自动检查是否符合邮箱格式
number:只能输入数字
date:可以通过日历选择时间
-->
<p><!--单选框，注意name要相同-->
性别：
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
<input type="radio" name="sex" value="保密" checked="checked"/>保密
</p>
<p><!--多选框，注意name要相同-->
性别：
<input type="checkbox" name="ball" value="篮球"/>篮球
<input type="checkbox" name="ball" value="足球"/>足球
<input type="checkbox" name="ball" value="排球" checked="checked"/>排球
</p>
<!--对于选框，传值为value-->
<p>
说点什么：<textarea cols="5" rows="3"></textarea>
<!--
cols:宽
rows:高
即使设定了宽高，任然不限制输入行数，可用鼠标将其拉大
-->
</p>
<p>
<select name="select">
<optgroup label="中文">
<option>一</option>
<option>二</option>
<option>三</option>
</optgroup>
<optgroup label="英文">
<option selected="selected">one</option>
<option>two</option>
<option>three</option>
</optgroup>
</select>
<!--
提交时，传值select=one
即：name属性值=option标签内的值
-->
</p>
<p>
<input name="mycar" list="data" /><!--对应datalist的id-->
<datalist id="data">
<option>宝马</option>
<option>奥迪</option>
<option>玛莎拉蒂</option>
<option>劳斯莱斯</option>
</datalist>
</p>
<input type="submit" value="提交按钮" /><br/>
<input type="reset" value="重置按钮" /><br/>
<input type="button" value="普通按钮" />
<input type="hidden" name="hidden" value="不显示，提交时直接传值" />
</form>
</body>
</html>
9.HTML5新增
9.1details节省空间
<html>
<head>
<meta charset="utf-8" />
<title>表单</title>
</head>
<body>
<details>
<summary>崔雪莉</summary><!--本身可见，点击内容可见-->
职业：歌手、演员、MC
</details>
</body>
</html>
9.2 video两种格式, audio基本同video
source:解决浏览器适配问题
<html>
<head>
<meta charset="utf-8" />
<title>跑马灯</title>
</head>
<body>
<video src="videourl" autoplay="autoplay" controls="controls" poster="imgeurl"></video>
<!--
poster:未播放是显示的图片
-->
<video>
<source src="url" type="video/mp4"></source>
<source src="url" type="video/mpeg"></source>
<source src="url" type="video/ogg"></source>
</video>
<!--
浏览器会从中找出符合格式的播放
-->
</body>
</html>
9.3 marquee:跑马灯
<html>
<head>
<meta charset="utf-8" />
<title>跑马灯</title>
</head>
<body>
<marquee bgcolor="red" behavior="scroll" direction="up">一二三四五</marquee>
<!--
bgcolor:背景颜色
behavior:
scroll: 表示由一端滚动到另一端，会重复。
slide： 表示由一端滚动到另一端，不会重复。
alternate：表示在两端之间来回滚动。
direction:方向，uo,down,left,right
scrollamount:设定活动字幕的滚动速度
loop:循环次数，-1 一直滚动，默认-1
-->
</body>
</html>
10.字符实体
< <
> >
© 版权符号
来源：CSDN
作者：中国第1300000000
链接：https://blog.csdn.net/ljq1998/article/details/103471921