HTML
HyperText Markup Language超文本标记语言, 是一种用于创建网页的标准标记语言。
任何标签都可以在首标签结尾加上一个/表示标签已闭合,单标签就是这样实现的 <a/>和<a></a>相同
特殊标签
文档类型声明标签
声明该文档使用哪种版本的html显示网页
<!DOCTYPE html>注释标签
ctrl+/
<!--注释语句-->单标签
| 标签 | 写法 | 介绍 | 属性 |
|---|---|---|---|
<meta> | 写在头标签中包含文档的所有内容 | charset: 字符集，规定HTML文档应使用哪种编码方式 | |
| 换行标签 | <br /> | break打断，换行。从标签处开始强制换行，跟段落不一样不会有间距 | |
| 图像标签和路径 | <img/> | image图像. 图像标签必须拥有src属性 | src: 图片路径或网址 alt: 替换文本,图像不能显示时显示的文字 title: 提示文本，光标放到图像上时显示的文字 width: 设置图像的宽度,同时高度也等比例缩放 height: 设置图像的高度,同时宽度也等比例缩放 border: 设置图像的边框粗细 |
| 表单控件 | <input /> | 输入，包含type属性，根据不同type属性值，有多种输入形式 | type: radio: 单选按钮同样可以选择多个，若想实现单选同属的多个radio输入须有相同的name属性 name: 定义input元素的名称,要求单选按钮和复选框要有相同的name值 value: 规定input元素的值 checked: 规定此input元素默认选中的项 maxlength: 规定输入字段中字符的最大长度 |
<hr> | 水平线标签 |
双标签
- 关系:
- 包含关系
- 并列关系
- 属性 一个标签可以有多个属性，必须写在头标签里面 属性之间不分先后顺序，标签名和属性，属性和属性之间用空格间隔 属性采用键值对的格式key=“value”
| 标签 | 写法 | 介绍 | 属性 |
|---|---|---|---|
| 根标签 | <html></html> | 除了文档声明标签其他所有标签都要写在根标签中 | lang: languages缩写，定义当前文档显示的语言，en为英语，zh-CN为中文，即使定义了语言文档依然可以显示其他语言(对浏览器和搜索引擎有用) |
| 头标签 | 文档的头部head标签中必须设置的标签，显示在网页的工作栏 | ||
| 主体标签 | <body></body> | 包含文档的所有内容 | |
| 标题标签 | <title></title> | 写在头标签中,其中的内容显示在浏览器的工作栏中 | |
| 段落标签 | <p></p> | paragraph段落，将文档中的文字分为若干段落，每个<p>标签中包含的文字为一段每个段落之间有空隙 | |
| 加粗 | <strong></strong>或<b></b> | 文本格式化标签 | |
| 倾斜 | <em></em>或<i></i> | 文本格式化标签 | |
| 删除线 | <del></del>或<s></s> | 文本格式化标签 | |
| 下划线 | <ins></ins>或<u></u> | 文本格式化标签 | |
| 盒子 | <div></div> | 包装布局标签division分割，分区 ( 独占一行 ) | |
| 盒子 | <span></span> | 包装布局标签span跨度，跨距 ( 一行中可以有多个 ) | |
| 超链接标签 | <a></a> | 超链接 | href: 可以是网页元素链接,外部链接,内部链接,下载链接,锚点链接,目标位置,空链接等 target: 决定超链接的网站是在原页面打开还是新页面打开，默认在原页面打开_self原页面打开_blank新页面打开 |
| 表格标签 | <table></table> | 定义表格 | |
| 表格头标签 | <thead></thead> | 定义表格的头部，必须拥有<tr>标签，一般位于第一行 | |
| 表格主题标签 | <tbody></tbody> | 定义表格的主体，主要用于存放数据本体 | |
<th></th> | 定义表头 | ||
<tr></tr> | 定义表格中的行 | rowspan: 跨行合并（纵向）最上侧单元格为目标单元格，填入数字表示合并数量 colspan:跨列合并（横向）最左侧单元格为目标单元格，填入数字表示合并数量 | |
<td></td> | table data定义表格中的单元格 | align:规定表格相对周围元素的对齐方式left,center,right border: 规定表格单元是否有边框，默认为空，表示没边框，1表示有边框 cellpadding: 规定单元边沿与其内容之间的空白，默认1像素 cellspacing: 规定单元格之间的空白，默认2像素 width: 规定表格的宽度 height: 规定表格的高度 | |
| 列表标签 | <ul></ul> | 无序列表各个列表项之间没有顺序级别之分，是并列的,会带有自己的样式属性（列表项前有圆点）可通过css更改 | |
| 有序列表 | <ol></ol> | 有自己的样式属性（列表项前有序号） | |
| 列表项 | <li></li> | 对于有序列表和无序列表适用 | |
| 自定义列表 | <dl></dl> | 只能包含<dt><dd>一个<dt>可对应多个<dd> | |
<dt></dt> | 定义自定义列表的项目，名字 | ||
<dd></dd> | 描述每一个项目，名字 | ||
| 表单标签 | <form></form> | 表单域 | action:填入url地址，用于指定接收并处理表单数据的服务器程序的url地址 method:用于设置表单数据的提交方式，取值为get或post name: 名称,用于指定表单的名称，以区分同一页面中的多个表单域 |
| 列表标签 | <ul></ul> | 无序列表各个列表项之间没有顺序级别之分，是并列的,会带有自己的样式属性（列表项前有圆点）可通过css更改 | |
| 有序列表 | <ol></ol> | 有自己的样式属性（列表项前有序号） | |
| 列表项 | <li></li> | 对于有序列表和无序列表适用 | |
| 自定义列表 | <dl></dl> | 只能包含<dt><dd>一个<dt>可对应多个<dd> | |
<dt></dt> | 定义自定义列表的项目，名字 | ||
<dd></dd> | 描述每一个项目，名字 | ||
| 表单标签 | <form></form> | 表单域 | action:填入url地址，用于指定接收并处理表单数据的服务器程序的url地址 method:用于设置表单数据的提交方式，取值为get或post name: 名称,用于指定表单的名称，以区分同一页面中的多个表单域 |
| 下拉列表标签 | <select></select> | 定义下拉列表至少要包含一个<option标签> | |
<option></option> | selected: 定义默认选中项 | ||
| 文本 框标签 | <textarea></textarea> | 定义文本框 | rows: 显示的行数 cols: 每行中的字符数 |
<label></label> | 为input元素定义标注,用于绑定一个表单元素,当点击<label>标签内的文本时，浏览器就会自动将焦点（光标转到或者选择对应的表单元素上,用来增加用户体验 | for: 该属性需要绑定到一个表单标签的label属性,从而实现二者同步 |
空链接#
锚点链接链接的是本网页相关herf属性的位置 链接文本:
<a href="#名字">文字</a>目标位置
<标签 id="#名字">文字</标签>表单控件的属性
| 属性值 | 描述 |
|---|---|
| button | 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本） |
| checkbox | 定义复选框。 |
| file | 定义输入字段和“浏览“按钮，供文件上传。 |
| hidden | 定义隐藏的输入字段。 |
| image | 定义图像形式的提交按钮。 |
| password | 定义密码字段。该字段中的字符被掩码。 |
| radio | 定义单选按钮。 |
| reset | 定义单选按钮定义重置按钮。重置按钮会清除表单中的所有数据。 |
| submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。 |
| text | 定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符。 |
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格符 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | and号 | & |
| ¥ | 人民币符 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方（上标2） | ² |
| ³ | 立方（上标3） | ³ |
html5
这些新特性都有兼容性问题，基本是E9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。
标签
语义化标签
<header>：头部标签<nav>：导航标签<article>：内容标签<section>：定义文档某个区域<aside>：侧边栏标签<footer>：尾部标签
这种语义化标准主要是针对搜索引擎的 这些新标签页面中可以使用多次 在IE9中，需要把这些元素转换为块级元素 移动端更喜欢使用这些标签
多媒体标签
- 音频：
<audio> - 视频：
<video>使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用flash和其他浏览器插件。
video
当前\<video>元素支持三种视频格式：尽量使用mp4格式
| 浏览器 | MP4 | Ogg | WebM |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES 从Firefox21版本开始Linux系统从Firefox30开始 | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES从Opera25版本开始 | YES | YES |
使用
<video src="视频文件路径"></video>先查看是否支持mp4格式若支持只显示video.mp4若不支持再查看是否支持ogg,若都不支持显示"您的浏览器不支持video标签。"
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持video标签。
</video>| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题） |
| controls | controls | 向用户显示播放控件 |
| width | pixels(像素) | 设置播放器宽度 |
| height | pixels(像素) | 设置播放器高度 |
| loop | loop | 播放完是否继续播放该视频，循环播放 |
| preload | auto（预先加载视频） none (不应加载视频) | 规定是否预加载视频（如果有了autoplay就忽略该属性) |
| src | url | 视频url地址 |
| poster | Imgurl | 加载等待的画面图片 |
| muted | muted | 静音播放 |
audio
| 浏览器 | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
语法:
<audio src="文件地址" controls="controls"></audio> <audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持audiq元素。
</audio>| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放。chrome浏览器禁用了,没有解决方案,只能通过js控制 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放。 |
| src | url | 要播放的音频的URL。 |
input类型
| 属性值 | 说明 |
|---|---|
| type="email" | 限制用户输入必须为Email类型 |
| type="url" | 限制用户输入必须为URL类型 |
| type="date" | 限制用户输入必须为日期类型 |
| type="time" | 限制用户输入必须为时间类型 |
| type="month" | 限制用户输入必须为月类型 |
| type="week" | 限制用户输入必须为周类型 |
| type="number" | 限制用户输入必须为数字类型 |
| type="tel" | 手机号码 |
| type="search" | 搜索框 |
| type="color" | 生成一个颜色选择表单 |
表单属性
| 属性 | 值 | 说明 |
|---|---|---|
| required | required | 表单拥有该属性表示其内容不能为空，必填可以使用选择器单独控制内容的属性 |
| placeholder | 提示文本 | 表单的提示信息，存在默认值将不显示可以使用选择器单独控制其内容的属性 |
| autofocus | autofocus | 自动聚焦属性，页面加载完成自动聚焦到指定表单 |
| autocomplete | off /on | 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如autocomplete="on"，关闭autocomplete="off"需要放在表单内，同时加上name属性，同时成功提交 |
| multiple | multiple | 可以多选文件提交 |
SVG
SVG标签是SVG图形的一个容器,它与普通的图像不同,普通的图像是描述像素的,svg是使用类似xml语言的格式描述图形的
svg标签内包含了很多子标签用于绘制各种图形 svg类似于一个画布 width属性定义svg的宽度,height定义svg的高度
内置图形
<rect/>标签用于定义矩形 圆形circle 椭圆ellipse
| 属性 | 说明 |
|---|---|
| width | 定义矩形的宽度。 |
| height | 定义矩形的高度。 |
| fill | 定义矩形的填充颜色。 |
| stroke-width | 定义了矩形的边框宽度。 |
| stroke | 定义矩形边框的颜色。 |
线条
线条line
x1,y1属性表示起始点的坐标,x2,y2表示终止点的坐标
多线条
多线条通过points属性绘制给出折点的坐标
多边形polygon
多边形需要使用points属性描述图形的顶点,有几个角就给出几个坐标
文本text
在svg中也可以使用text标签绘制文本,这样就可以使用svg的方法控制文本了
在svg中的文本上也可以使用a标签包裹添加链接,推荐使用target属性添加链接 如果使用href属性添加链接需要引入,这是因为svg是使用xml语言实现的
<svg xmlns:xlink="http://www.w3.0rg/1999/xlink">
<a xlink:href="" target="">
<text> </text>
</a>
</svg>xlink是w3c的网址,只是固定写法无需深究
路径path
使用<path/>标签定义 在d属性中指明命令,d是draw的缩写
d属性有多个命令:
- M命令 : moveto的缩写,定义绘制图形的起点坐标
<path d="M150 0/> - L命令 : lineto的缩写,定义线条的绘制即终点坐标
l75 200 - q命令 : 用于绘制贝塞尔曲线 命令中点的坐标不需要使用逗号分隔是使用空格分隔 两个命令的坐标定位是不同的,m是绝对定位,是相对于屏幕坐标的定位,l是相对定位,是相对于m的定位
<path d="M 100 350 q 150 -300 300 0" />描边属性
svg提供了许多描边属性 stroke笔画属性 stroke-width笔画宽度属性 stroke-linecapL笔画笔帽属性 stroke-dasharray虚线笔画属性
svg和canvas的区别
canvas 位图
- 优点：性能更强（webgl）-skia
- 缺点：事件交互需要自己实现（点阵计算）
svg 矢量图
- 优点：任意缩放、真实dom事件交互简便
- 缺点：性能较弱，无法渲染大数据量
贡献者
PinkDopeyBug版权所有
版权归属：
