HTML
简介
什么是HTML
- Hyper Text Markup Language 超文本标记语言
- 由各种标签组成，告诉浏览器如何显示页面
- 简单、跨平台
- w3c(World Wide Web Consortium 万维网联盟)指定的标准
基本结构介绍
- 标签名不区分大小写，但是习惯上小写
<!DOCTYPE html>
<!-- <!DOCTYPE> 声明文档的类型，位于HTML文档的第一行。这里声明的是HTML5类型 -->
<html>
<head>
<!-- 头部提供关于网页的相关信息，如文档类型、字符编码、关键字等摘要信息 -->
</head>
<body>
<!-- 主体部分提供了网页的具体内容，真正显示在页面中 -->
</body>
</html>
HTML标签的基本组成
<标签名 属性名="属性值">内容</标签名>
-
根据标签是否可以关闭，可以分为：关闭型(双标签)和非关闭型(单标签)
- 常见的关闭型
<html></html> <body></body> <div></div> <!-- ... -->- 常见的非关闭型
<meta> <br> <hr> <input> <img> <!-- ... --> -
根据标签是否独占一行，可以分为：块级标签和行级标签
- 常见的块级标签
<h1></h1> <p></p> <div></div> <!-- ... -->- 常见的行级标签(内联元素)
<span></span> <input> <img> <!-- ... --> -
注释
- 注释在浏览器中不会显示，但通过查看源代码可以看到
<!-- 注释内容 --> -
实体字符
- 用于显示一些特殊字符，如：< > & 空格
- 写法："&实体字符名称;" 或 "&实体字符编码;"。
- 常用的字符
实体名称 显示结果 空格 < < > > & & " " © © ® ®
HTML标签常用的全局属性
class
- 规定元素的一个或多个类名（引用样式表中的类）
id
- 规定元素的唯一id
style
- 规定元素的行内CSS样式
lang
- 规定元素内容的语言，常用在html标签
- 常见的语言代码：
- zh 中文
- en 英语
dir
- 规定元素中内容的文本方向
- 取值：
- ltr 从左向右。默认
- rtl 从右向左
title
- 规定有关元素的额外信息，鼠标停留在图片上时显示的信息
HTML简单标签
h1~h6
- 双标签，块级标签
- 标题标签，按照h1到h6逐渐变小，独占一行，加粗显示
p
- 双标签，块级标签
- 段落标签，前后有明显的间距
br
- 单标签，行内标签
- 换行标签
div
- 双标签，块级标签
- 区域标签，常作为容器来使用，一般在页面布局中使用
span
- 双标签，行内标签
- 文字标签，一般用来设置行内独特的样式
pre
- 双标签，块级标签
- 预格式化文本标签，保留编码的格式
hr
- 单标签，块级标签
- 水平线标签
img
- 单标签，行内标签
- 图像标签
- 常见图片格式：jpg,png,gif,bmp,jpeg
- 常用属性：
- src: 指定图片的路径
- alt: 当图片无法正常显示的时候的提示信息
- title: 当鼠标停留在图片上时显示的信息
ol,li
<ol>
<li></li>
</ol>
- 双标签，块级标签
- 有序列表
- ol 标签属性：
- type: 设置列表前的标记符号，取值 1,a,A,i,I 等，默认为1
- start: 设置起始值，值必须是数字
ul,li
<ul>
<li></li>
</ul>
- 双标签，块级标签
- 无序列表
- ul 标签属性：
- type: 设置列表前的标记符号，取值:
- disc(实心圆,默认)
- circle(空心圆)
- square(正方形)
- none(设置为无)
- type: 设置列表前的标记符号，取值:
dl,dt,dd
(不常用)
<dl>
<dt>苹果</dt>
<dd>一种水果</dd>
<dt>猫</dt>
<dd>一种动物</dd>
</dl>
- 对图片，术语等进行描述定义的列表
a
<a href="链接地址">链接内容</a>
- 双标签，行内标签
- 常用属性：
- href: 跳转的地址(相对路径、绝对路径、网络路径、锚点)
- target: 链接打开的位置，取值：
- _self 当前，默认值
- _blank 新的页面
- _parent 父层框架
- _top 顶层框架
- 锚链接：
- 定义锚点
<a name="锚点名称">锚点名称</a>- 链接锚点
<a href="#锚点名称">链接内容</a> - 功能性链接：
<a href="javascript:void(0);">没反应</a> <!-- 失去作用 -->
<a href="javascript:alert('点我干嘛');">点我试试</a> <!-- 弹框 -->
<a href="mailto:123@qq.com">联系我们</a> <!-- 发邮件 -->
其他文字标签
| 标签 | 含义 |
|---|---|
| i,em | 斜体 |
| b,strong | 加粗 |
| address | 地址，块级标签 |
| del | 删除线 |
| ins | 下划线 |
| small | 相对于当前字体小一号 |
| big | 相对于当前字体大一号 |
| sub | 下标 |
| sup | 上标 |
| abbr | 设置文本的缩写 |
其他结构相关标签
(HTML5新增)(不常用)
- 结构性标签只是表明各部分的角色，并无实际的外观样式，与普通的div一样
| 标签 | 含义 |
|---|---|
| article | 用于表示一篇独立、完整的文章 |
| section | 文章的段落 |
| header | 文章的标题部分 |
| footer | 文章的脚注 |
| aside | 用于定义附属信息，一般作为侧边栏（通过CSS控制） |
| figure | 图片区域 |
| figcaption | 定义figure元素的标题 |
| nav | 用于定义导航链接部分 |
其他语义相关标签
(HTML5新增)(不常用)
- mark
- 标注，用来突出显示文本，默认为黄色背景
- time
- 定义日期时间，便于搜索引擎智能查找
- 常用属性：
- datetime: 提供日期格式
- details,summary
- 默认显示summary中的内容，点击后显示details中的内容
- meter
- 计数仪，表示度量
- 常用属性：
- max 定义最大值，默认为1
- min 定义最小值，默认为0
- value 定义当前值
- high 定义限定为高的值
- low 定义限定为低的值
- optimum 定义最佳值
- 规则：
- 如果optimum大于high，则表示值越大越好
- 当value大于high时为绿色
- 当value在low和high之间为黄色
- 当value小于low时为红色
- 如果optimum小于low，则表示值越小越好
- 当value小于low时为绿色
- 当value在low和high之间为黄色
- 当value大于high时为红色
- 如果optimum在low和high之间，则表示值在low和high之间最好
- 当value在how和high之间为绿色，其他的都为黄色
- 如果optimum大于high，则表示值越大越好
- progress
- 进度条，表示运行中的进度
- 常用属性：
- max: 定义完成的值
- value: 定义当前值
头部标签
meta
- 定义网页的摘要信息，如：字符编码、关键字、描述等
- 常用属性：
- content: 定义与 http-equiv 或 name 属性相关的属性信息
- charset: (HTML5新增) 定义文档的字符编码，一般为"utf-8"
<meta charset="UTF-8">- name: 为文档定义一些名称，取值：
- keywords: 关键字，方便搜索引擎检索
<meta name="keywords" content="前端,HTML,CSS">- description: 简介，告诉搜索引擎你的网站主要内容
<meta name="description" content="一个网站">- author: 作者，标注网页的作者
<meta name="author" content="xiaolou">- copyright: 版权，标注版权
<meta name="copyright" content="本网站版权归**所有">- generator: 说明网站采用什么编辑器制作
<meta name="generator" content="vscode"> - http-equiv: 类似于HTTP的头部协议，给浏览器一些信息，帮助正确和精确地显示网页，取值：
- expires: 期限，指定网页在缓存中的过期时间，一旦网页过期，必须到服务器上重新加载
<meta http-equiv="expires" content="Sunday 26 October 2020 03:00 GMT"> <!-- 时间必须使用GMT格式，设置0为不缓存 -->- cache-control: 控制缓存模式，取值：
- public: 响应可被任何缓存区缓存
- private: 对于单个用户的整个或部分响应缓存，不能被共享缓存
- no-cache: 响应不会被缓存，而是实时向服务器端请求资源
- no-store: 在任何条件下，响应都不会被缓存，并且不会被写入到客户端
- must-revalidate: 允许缓存，但必须到服务端验证缓存是否过期
- max-age: 设置缓存最大的有效时间，从当前事件算。如："max-age=60"，表示时间为60秒
<meta http-equiv="cache-control" content="no-cache"> <!-- 不缓存 -->- refresh: 自动刷新并指向新页面
<meta http-equiv="refresh" content="5;url=http://www.baidu.com/"> <!-- 表示5秒后自动刷新并跳转URL到新页面，url如果不设置表示只刷新页面 -->- window-target: 显示窗口的设定，取值：
- _top: 表示页面以当前整个窗口的方式显示，不能被其他网页嵌套
- _blank: 表示页面以新打开的窗口显示
- _parent: 表示页面以父容器或窗口显示
- _self: 表示页面以当前容器或窗口显示
<meta http-equiv="window-target" content="_top"> - viewport: (HTML5新增)页面窗口显示，主要用于移动端，取值
- width: viewport的宽度(取值 device-width,pixel_value)
- height: viewport的高度(范围从 223 到 10,000 )
- user-scalable: 是否允许缩放(取值 yes,no)
- initial-scale: 初始化比例(范围 0~10 )
- minimum-scale: 允许缩放的最小比例
- maximum-scale: 允许缩放的最大比例
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <!-- 移动端适配 -->
title
- 定义网页的标题（浏览器标签页上显示的内容）
<title>百度一下</title>
style
- 定义内部css样式
<style>
.app{
color:#f00;
}
</style>
link
- 引用外部css样式
<link rel="stylesheet" href="./index.css">
- 设置网站图标
<link rel="icon" href="./favicon.ico" />
script
- 定义或者引用脚本
- type可以不写，默认javascript
<!-- 引入脚本： -->
<script type="text/javascript" src="./index.js"></script>
<!-- 定义脚本： -->
<script>
console.log("hello world")
</script>
base
- 定义当前页面的基础路径
表格
<!-- 一个完整的表格结构 -->
<table>
<caption></caption> <!-- 可以不写 -->
<thead> <!-- 可以不写 -->
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot> <!-- 可以不写 -->
<tr>
<td></td>
</tr>
</tfoot>
</table>
table
- 用来定义表格
- 常用属性：
- border: 边框，默认是0
- cellspacing: 单元格与单元格之间的间距
- cellpadding: 单元格内容与边界之间的间距
tr
- 用来定义行
td
- 用来定义单元格
- 注意：表格必须由行组成，行由单元格组成，数据必须放在td中
- 跨行和跨列
- 两个属性：
- rowspan: 设置单元格所跨行数，如:rowspan="2"，表示跨越2行
- colspan: 设置单元格所跨列数，如:colspan="3"，表示跨越3列
- 将被跨越的单元格要删除，行和列的位置逻辑要正确，否则会出现错乱
- 两个属性：
caption
- 表格标题
thead
- 表格的头部
tbody
- 表格的主体
tfoot
- 表格的脚注
th
- 一般用在 thead 中，设置头部的标题，代替td标签，具有加粗和居中对齐效果
表单
<!-- form标签不是必须写，页面中可以直接写表单元素 -->
<form action="表单提交的地址" method="提交方式">
<input type="text">
<select>
<option value="1">选项1</option>
</select>
<!-- ...表单元素 -->
</form>
- 表单是一个包含若干个表单元素的区域，用于获取不同类型的信息
- 表单元素是允许用户在表单输入信息的元素，如：文本框、密码框、复选框、下拉列表等
form
- 常用属性：
- action: 提交的数据的目标页面，默认为当前页面
- method: 提交的方式，取值：
- get: 默认，以查询字符串的形式提交，地址栏能够看到，长度有限，不安全
- post: 以表单数据组形式提交，地址栏看不到，长度无限制，安全，实际开发中一般使用
- enctype: 提交的数据编码
- 默认为"application/x-www-form-urlencoded"
- 上传文件时应改为"multipart/form-data"
- autocomplete (HTML5新增) 是否启用表单元素的自动完成功能
- 取值：on(默认),off
- novalidate (HTML5新增)(不常用) 提交表单时不进行验证，默认会进行表单验证
- (JS) form DOM对象
- 常用属性：
- action 设置或返回表单的 action 属性
- enctype 设置或返回表单用来编码内容的 MIME 类型
- length 返回表单中的元素数目
- method 设置或返回将数据发送到服务器的 HTTP 方法
- target 设置或返回表单提交结果的 Frame 或 Window 名
- 方法：
- reset() 把表单的所有输入元素重置为它们的默认值
- submit() 提交表单
- 事件：
- onreset 在重置表单元素之前调用
- onsubmit 在提交表单之前调用
- 常用属性：
input标签
<input type="表单元素的类型">
- 大多数的表单元素都是使用input标签，由属性type设置表单元素的类型
- (JS) input DOM对象
- 常用属性：
- disabled 设置或返回 input 是否应被禁用
- name 设置或返回 input 的名称
- type 返回 input 的表单元素类型
- value 设置或返回 input 的 value 属性的值
- 方法：
- blur() 把焦点从 input 上移开
- focus() 为 input 赋予焦点
- 事件：
- onblur 元素失去焦点时运行的方法
- onfocus 当元素获得焦点时运行的方法
- onchange 在元素值被改变时运行的方法
- oninput 当元素获得用户输入时运行的方法
- onselect 在元素中文本被选中后触发
- 常用属性：
text
- 单行文本框，type省略不写时默认是text
- 常用属性：
- name 名称
- 使用表单提交时，没有该属性，数据不会提交。
- 不用表单方式提交（如ajax则不是必须要）
- value 初始值
- maxlength 最大字符数，默认是没有限制
- readonly 只读，readonly="readonly"，可以简写readonly，即只写属性名
- disabled 禁用，disabled="disabeld",可以简写为disabled
- 注意：readonly和disabeld的区别：
- readonly的数据可以提交，disabled的数据不可以提交
- disabled的颜色变灰色
- placeholder (HTML5新增) 提示文字
- autocomplete (HTML5新增) 是否启用表单元素的自动完成功能
- 取值：on(默认),off
- 其他HTML5新增不常用属性
- required 是否必填
- autofocus 用于获取焦点
- pattern 使用正则表达式
- list 使文本具有下拉功能，需要配合datalist和option标签一起使用
- form 表单元素写在form标签外面，通过该属性关联到指定的表单
- form重写属性 如formaction、formmethod可以重写form的属性
- (JS) input text DOM对象
- 方法：
- select() 选取文本域中的内容
- 方法：
- name 名称
password
- 密码框，输入的值不可见
- 属性同text
radio
- 单选按钮，只能选中其中一个
- 常用属性：
- name 名称，多个radio的name属性必须相同才能实现互斥（单选）
- value 值
- checked 是否选中，两种状态：选中，未选中，checked="checked"，可以简写为checked
- (JS) input radio DOM属性
- 属性：
- checked 设置或返回单选按钮的状态
- true 选中
- false 不选中
- checked 设置或返回单选按钮的状态
- 属性：
checkbox
- 复选框，可以同时选择多个
- 属性同radio
file
- 文件选择器，选择要上传的文件
- 常用属性：
- name 名称
- 设置可选的文件类型，使用MIME格式字符串来对资源进行限制，常用的MIME类型：
- 纯文本：text/html、text/xml、text/plain
- 格式文本：application/rtf、application/pdf、application/msword
- 图像：image/png、image/jpeg、image/gif
- 音频：audio/mpeg、audio/ogg、audio/x-wav
- 视频：video/mp4、video/x-msvideo、video/mp4、video/quicktime
- multiple 使其可以选择多个文件提交，multiple="multiple"，可以简写为multiple
- (JS) input radio DOM属性
- 属性：
- value 选取文件后，返回 FileUpload 对象的文件名
- files 存储着选取的文件
- 由选取的文件(File类型)组成的FileList对象(类似数组)
- 事件：
- onchange 当选取的文件改变时运行的方法
- 属性：
submit
- 提交按钮，提交表单数据
- 常用属性：
- value 按钮名字
reset
- 重置按钮，重置表单元素到初始值
- 属性同submit
image
- 图像按钮，可以使用图片作为按钮，也具有提交的功能
- 属性同submit
button
- 普通按钮，默认无功能
- 属性同submit
hidden
- 隐藏域，在页面上不显示，但会提交，可以用来存储数据
- 常用属性：
- name 名称
- value 值
HTML5新增type
(不常用)
- email：用于接收email
- url：用于接收URL
- tel：接收电话号码，目前仅在移动设备上有效
- search：搜索文本框
- number/range：仅接收数字输入/数字滑块，均包含min、max、step属性
- 具有格式校验的功能
- 可以和移动设备的虚拟键盘类型相关联
- date/month/week/time/datetime/datetime-local：日期时间选择器（兼容 性不好）
- color：颜色拾取
其他表单元素标签：
label
<label for="name">请输入姓名:</label>
<input id="name" type="text">
- 为表单元素提供的标签
- 当点击当前label标签中的文本内容时焦点自动切换到与之关联的表单元素
- 常用属性：
- for 必须将该属性设置与表单元素的id属性相同才可以生效
button
<button type="按钮类型">按钮名称</button>
- 属性type，可以不写，取值：submit(默认),button,reset
select
<select>
<option value="1">选项1</option>
</select>
- 下拉列表
- 常用属性：
- name 名称
- size 行数，下拉框同时显示几个选项
- multiple 允许同时选中多个选项，multiple="multiple"，可以简写multiple
- option标签
- value 选项值，如果value省略，则默认使用option的文本内容作为value值
- selected 设置默认选项，selected="selected"，可以简写selected
- optgroup标签，对option进行分组
- label 分组的标题
- (JS) select DOM对象
- 属性：
- value 选中的 option 的value值
- selectedIndex 设置或返回下拉列表中被选 option 的索引号
- length 返回下拉列表中的选项数目
- 方法：
- add(option,before) 向下拉列表添加一个选项(不常用，一般直接操作DOM)
- option 要添加的 option DOM元素
- before 在该 DOM元素 前添加，如果是 null，则添加到选项组的末尾
- remove(index) 从下拉列表删除选项
- index 规定要删除的选项的索引号
- add(option,before) 向下拉列表添加一个选项(不常用，一般直接操作DOM)
- 属性：
textarea
<textarea>文本内容</textarea>
- 文本域，多行文本框
- 会保留编码格式
- 常用属性：
- name 名称
- rows 行数
- cols 宽度
- maxlength (HTML5新增)规定文本区域的最大字符数
- placeholder (HTML5新增)规定描述文本区域预期值的简短提示
其它不常用标签
- fieldset标签，对表单元素进行分组
- legend标签，为分组添加标题
JS模拟表单提交
- 一般用于 post 类型下载文件
function formSubmit(obj){ // 模拟form表单提交
var form=document.createElement("form"),
data=obj.data
Reflect.deleteProperty(obj,"data")
for(let i in obj){
obj[i]&&(form[i]=obj[i])
}
form.style.display="none"
for(let i in data){
let input=document.createElement("input")
input.setAttribute("type","hidden")
input.setAttribute("name",i)
input.value=data[i]
form.appendChild(input)
}
doc.body.appendChild(form)
form.submit()
}
多媒体相关标签
(HTML5新增)
audio
<audio src="flower.mp3">
您的浏览器不支持 audio 标签。
</audio>
- 在页面中插入音频
- 常用属性：
- src: 音频文件来源路径
- autoplay: 是否自动播放
- controls: 是否显示控制界面
- loop: 是否循环播放
- muted: 是否静音
- preload: 是否预加载
- 值none表示不预加载，auto表示预加载，metadata只预加载元数据
- 如果已经设置autoplay属性则该属性无意义
- source标签
<audio> <source src="flower.mp3" type="audio/mpeg"> </audio>- 可以用于指定多个音频文件，浏览器会检测并使用第一个可以使用的音频文件
- 常用属性：
- src: 音频文件来源路径
- type: 音频的类型，如：audio/ogg,可以省略
- (JS) audio DOM对象
- 常用属性(HTML上的属性一般都包含)：
- duration: 返回音频的长度（以秒计）
- currentTime: 设置或返回音频中的当前播放位置（以秒计）
- defaultPlaybackRate: 设置或返回音频的默认播放速度
- playbackRate: 设置或返回音频播放的速度(倍)，最大为16
- src: 设置或返回音频的 src 属性的值
- currentSrc: 返回当前音频的 URL
- volume: 设置或返回音频的音量
- defaultMuted: 设置或返回音频默认是否静音
- muted: 设置或返回是否关闭声音
- paused: 设置或返回音频是否暂停
- ended: 返回音频的播放是否已结束
- error: 返回表示音频错误状态的 MediaError 对象
- 常用方法：
- play(): 开始播放音频
- pause(): 暂停当前播放的音频
- load(): 重新加载音频元素
- 常用属性(HTML上的属性一般都包含)：
video
<video src="movie.mp4">
您的浏览器不支持 video 标签。
</video>
- 在页面插入视频
- 常用属性：
- src: 音频文件来源路径
- autoplay: 是否自动播放
- controls: 是否显示控制界面
- loop: 是否循环播放
- muted: 是否静音
- preload: 是否预加载
- 值none表示不预加载，auto表示预加载，metadata只预加载元数据
- 如果已经设置autoplay属性则该属性无意义
- poster: 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像
- 设置CSS样式 object-fit: fill; 视频就可以被自由拉伸（自由设置宽高）
- (JS) video DOM对象
- 常用属性和方法同 audio 标签
iframe
<iframe src="a.html"></iframe>
- 内嵌框架
- 使用iframe可以在一个页面引用另一个页面
- 常用属性：
- src 引用的页面的路径
- frameborder 是否显示边框，取值：
- 1 显示
- 0 不显示
- scrolling 是否显示滚动，取值：
- yes 显示
- no 不显示
- auto 超出显示
- name 为框架定义名称
- (JS) iframe DOM对象
- 常用属性
- src 设置或返回加载到框架中的文档的URL
- contentWindow 返回该iframe框架的window对象
- contentDocument 返回该iframe框架的文档，即document对象
- 常用属性
- 在iframe框架内的页面可通过window下的parent对象访问父级页面的window对象
svg
(HTML5新增)
详见svg.md
canvas
(HTML5新增)
详见canvas.md
- 喜欢的话就点赞关注吧
