前言
超文本标记语言是一种用于创建网页的标准标记语言。HTML是一种基础技术,常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件,并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现,使之成为一种标记语言而非编程语言。维基百科
语法
.html
.htm
双标签:有开始标签和结束标签
单标签:开始标签和结束标签在一起
代码
1 2 3 4 5 6 7 8 9 10
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>Hello World !</p> </body> </html>
|
属性
属性来修饰元素
每个属性都有值
标准属性
每个标签都有自己的特有属性
大多数标签都支持的属性称为标准属性
id=""
:编号
title=""
:标题
class=""
:类名
style=""
:样式
标签
文档标签
文档声明标签
文档的根标签
头标签
文档标题
1 2 3
| <head> <title></title> </head>
|
元数据标签
- 元数据标签位于
head标签
内部,在head标签
中承载的信息一般用户在浏览器中是访问不到的,但是对于搜索引擎,它们抓取网页的方式一般是集中关注网页head标签
内容
charset="utf-8"
:网页字符集
name="keywords" content=""
:网页关键词
name="description" content=""
:网页描述
name="author" content=""
:网页作者
http-equiv="refresh" content="5; http://localhost/"
:倒计时5秒自动跳转网页
体标签
注释标签
文本标签
标题标签
1 2 3 4 5 6
| <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
|
段落标签
换行标签
水平线标签
字体加粗
1 2
| <b></b> <strong></strong>
|
字体斜体
字体下划线
字体删除线
文字上标
文字下标
插入字
文本高亮
字体标签
文本居中
链接标签
href=""
:链接地址,如果属性值为
href="#"
:返回到本页
href="#id"
:通过id查找的锚点链接
href="#name"
:通过name查找的锚点链接
target=""
:窗口名称
title=""
:链接提示文字
图片标签
支持的格式:JPEG、PNG、GIF
src=""
:路径及名称
alt=""
:无效图片替代文本
width=""
:宽
height=""
:高
border=""
:给图片的外层增加指定宽度的外边框。默认颜色为黑色,默认宽度为2px
title
:当鼠标移到图片上面时显示的提示文字
视频标签
width=""
:宽,默认宽为300px
height=""
:高,默认高为150px
src=""
:视频路径
type="video/mp4"
:类型,只支持mp4、ogg、webW三种格式
controls
:显示控制
poster=""
:设置封面路径
autoplay
:默认自动播放(chrome浏览器需要配合默认静音才会生效)
muted
:默认静音
loop
:自动循环播放
音频标签
src=""
:音频路径
type="audio/mp3"
:类型,只支持mp3、ogg、wav三种格式
controls
:显示控制
autoplay
:默认自动播放(chrome浏览器需要配合默认静音才会生效)
muted
:默认静音
loop
:自动循环播放
列表标签
有序列表
type="a"
:使用小写字母排序
type="A"
:使用大写字母排序
type="1"
:使用数字排序
start="2"
:从2开始排序
无序列表
type="disc"
:实心圆
type="circle"
:空心圆
type="square"
:实心方块
定义列表
- 自定义列表,dl标签定义定义列表,dt标签定义标题,dd标签定义内容
- dt标签下可以描述多个dd标签,dt标签也可以有多个
1 2 3 4
| <dl> <dt></dt> <dd></dd> </dl>
|
表格标签
定义表格
width=""
:表格宽度
height=""
:表格高度
align=""
:表格位置
border=""
:表格边框
cellpadding=""
:单元格内边距
cellspacing=""
:单元格外边距
bgcolor=""
:表格背景颜色
background=""
:表格背景图片
bordercolor=""
:边框颜色
定义行和列
colspan="2"
横向合并单元格(将两列单元格合并为一个)
rowspan="2"
纵向合并单元格(将两行单元格合并为一个)
1 2 3 4 5
| <table> <tr> <td></td> </tr> </table>
|
定义表头
1 2 3
| <table> <th></th> </table>
|
表格标题
表格头标签
表格体标签
表格脚标签
块标签
1 2
| <div></div> <span></span>
|
表单标签
定义表单
method=""
:定义请求的方式
method="GET"
:以GET方式发送请求
method="POST"
:以POST方式发送请求
action=""
:提交表单到后端的路径
表单项标签
type="text"
:文本框
type="password"
:密码框
name=""
:名称
value=""
:默认值(选中后不会消失)
maxlength=""
:限制输入的字符数
readonly="readonly"
:只读模式
placeholder=""
:占位符(选中后自动消失)
disable="disable"
:无法使用(任何表单元素都可以使用)
autofocus="autofocus"
:自动聚焦
type="button"
:普通按钮
type="submin"
:提交按钮
type="reset"
:重置按钮
value=""
:默认显示值
type="radio"
:单选框
type="checkbox"
:复选框
name=""
:设置名称,并用于分组
checked="checked"
:设置默认被选中
type="range"
:范围条
min=""
:范围条最小值
max=""
:范围条最大值
value=""
:默认选中值
type="color"
:颜色选择器
type="date"
:日期选择器(年月日)
type="week"
:日期选择器(一年中第几周)
type="time"
:时间选择器
type="email"
:邮箱输入框(包含邮箱正则表达式的文本框)
type="url"
:网址输入框(包含网址正则表达式的文本框)
type="search"
:搜索框(包含清除叉的文本框)
type="number"
:计数器(包含数字增减的文本框)
step=""
:增量值,默认为1
下拉列表
name=""
:名称
size=""
:默认值1,如果大于1,则为滚动列表
multiple=""
:设置多选
value=""
选项的值
selected
:预选中
1 2 3
| <select> <option></option> </select>
|
文本域
name=""
:名称
cols=""
:指定文本域的列数
rows=""
:指定文本域的行数
readonly=""
:只读模式
placeholder=""
:文本域为空时显示提示信息
lable标签
- 结合表单元素使用,使lable包含的所有元素设置共同的焦点
包含选项的文本框
- 配合文本框使用
- 文本框的list属性值要和datalist标签的id属性值相对应
- 通过option标签添加选项
1 2 3 4 5
| <input type="text" list="id"> <datalist id="id"> <option></option> <option></option> </datalist>
|
语义化标签
布局标签
页眉
页脚
主要内容
导航栏标签
页面侧边栏
文章标签
段落标签
地址标签
bdo标签
dir=""
:设置文本的方向
ltr
:从左到右
rtl
:从右到左
引用标签
细节标签和概括标签
1 2 3 4
| <details> <summary>更多</summary> <p>详细内容<p> </details>
|
预保留格式标签
红宝石标签
rt
:在上方的注释
rp
:隐藏的注释
1 2 3
| <ruby> 张<rt>Zhang</rt><rp>不显示</rp> </ruby>
|
模板标签
- 内部嵌套的子元素都是不可见的
- 会在Vue框架中出现
时间标签
进度条
1
| <progress value="50" max="100"></progress>
|
模糊查询
1 2 3 4 5
| <input type="text" list="test"> <datalist id="test"> <option value="test1"></option> <option value="test2"></option> </datalist>
|
多媒体
画布
浮动框架标签
src=""
:指向的链接
height=""
:高度
width=""
:宽度
frameborder=""
:边框
“计算机输出”标签
定义计算机代码
定义键盘码
定义计算机代码样本
定义变量
定义预格式文本
引文、引用
定义缩写
定义地址
定义文字方向
定义长的引用
1
| <blockquote></blockquote>
|
定义短的引用
定义引用、引证
定义项目
完成
参考文献
哔哩哔哩——张奇MAX
简书——wade3po
简书——hx永恒之恋
菜鸟笔记
CSDN——fengzhongdeyuyi1992
哔哩哔哩——web前端小清风