test
目录(html标签)
兼容性太差的标签和w3c不推荐使用的标签
以及部分无实际意义的属性本文未罗列
文章列表
nothing
a标签
1. 下载图片功能
添加download属性可以指定下载的文件名，以及告知浏览器下载此文件<a href="./timg.jpeg" download="图片名.jpeg">下载图片</a>
2. href跳转
将href属性设置成“#top”或者“#”可以跳转到页面顶部
<a href="#top">回到顶部</a>
<a href="#">回到顶部</a>
href属性除了可以设置成http协议，同样也可以设置成其他协议
<a href="mailto:264019**37@qq.com">给我发邮件</a>
<a href="tel:1752169****">给我打电话</a>
3. ping追踪
a标签如果已经设置href属性，此时再设置ping属性，当点击事件触发会自动在后台发送post请求<a href="" ping="http://localhost:8000/test1 http://localhost:8000/test2">测试</a> 此功能主要用于追踪当然如果你想利用此特性发送DOS攻击也是可以的
直接运行下面代码，可以无限发送post请求
const a = document.createElement('a');
a.href="";
a.ping = 'http://localhost:8000/test1';
document.body.appendChild(a);
a.click();
4. target指定跳转方式
target常用的属性_self、_blank，使用细节点如下
_self表示跳转至当前页，默认行为。
_blank表示跳转至新标签页，此时新的标签页和当前标签页公用一个浏览器进程，为了性能最好如下使用
<a href="https://www.baidu.com" target="_blank" rel="noopener">跳转</a>
abbr标签
1. 提供缩略功能
abbr标签对于文本有帮助<abbr title="长文本的显示">文本</abbr>
2. 配合dfn标签提供语义化
术语
<dfn id="text"><abbr title="强调这是专业术语">术语</abbr></dfn>
dfn标签中id的作用主要是实现a标签的锚点
address标签
1. 语义化标签，展示联系人的联系信息
示例：2640199637@qq.com
<address>
<a href="mailto:2640199637@qq.com">2640199637@qq.com</a>
</address>
area标签
1. 创建热点图像
area标签只能在map标签中使用，可以将一个图片的不同部分关联不同的超链接，示例：
<map name="front">
<area
shape="poly"
coords="10,29,66,30,60,78,38,83,14,77"
href="https://baike.baidu.com/item/HTML/97049?fr=aladdin"
target="_blank"
alt="html"
/>
<area
shape="poly"
coords="70,29,128,30,122,78,100,83,75,77"
href="https://baike.baidu.com/item/CSS/5457?fr=aladdin"
target="_blank" alt="css"
/>
<area
shape="poly"
coords="132,29,190,30,184,77,161,83,137,77"
href="https://baike.baidu.com/item/javascript/321142?fr=aladdin"
target="_blank"
alt="js"
/>
</map>
<img usemap="#front" style="width: 200px;height: 100px;" src="./1.png" alt="front-end" />
2. coords属性说明
- rect、rectangle：值是两个x，y对：left，top，right，bottom
- circ、circle：值是指定圆的中心的对x,y,r，其中x,y是r半径的值
- poly、polygon：该值是多边形中每个点的一组x，y对：x1,y1,x2,y2,x3,y3,依此类推
3. 其他属性说明
- alt：图像不显示时展示的文本
- download：和a标签的属性作用一样
- ping：和a标签的属性作用一样
- target：和a标签的属性作用一样
- shape：对应coords的可用值
article标签
1. 语义化标签，用来表示文章或者文章列表，例如：
博客列表
博客一
摘要。。。
博客二
摘要。。。
<article>
<h4>博客列表</h4>
<article>
<h5>博客一</h5>
<p>摘要。。。</p>
</article>
<article>
<h5>博客二</h5>
<p>摘要。。。</p>
</article>
</article>
aside标签
1. 语义化标签，用来表示文章的旁白，例如：
这篇博客讲解html标签
作者：叶家伟
<article>
<p>这篇博客讲解html标签</p>
<aside><p>作者：叶家伟</p></aside>
</article>
audio标签
待完成，内容较多，将单独开一篇博客
b标签
1. 语义化标签，表示需要引起读者注意的关键字，例如
这个关键字很特殊
<p>这个<b>关键字</b>很特殊</p>
base标签
1. 给具有url属性的标签提供一个基url
base标签只能包含一个，写在head标签中
<head>
<base href="https://baike.baidu.com" target="_blank">
</head>
<body>
<a href="item/javascript">js是什么？</a>
</body>
2. 可以通过document.baseURI直接获取到baseurl
bdo标签
1. 控制文本渲染方向
bdo标签只用dir一个属性，效果：test<bdo dir="rtl">test</bdo>
blockquote标签
1. 语义化标签，表示一段引文，在样式上会有缩进
cite属性起到语义化的作用，表示引文的地址，无实际作用。例如：JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。
<blockquote cite="https://baike.baidu.com/item/javascript">
<p>JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。</p>
</blockquote>
body标签
1. 承载html文档内容的根标签，只能包含一个
body元素自身包含一些独有的事件，如下：- onafterprint：用户打印文档后调用的函数
- onbeforeprint：当用户请求打印文档时调用的函数
- onbeforeunload：文档即将卸载时调用的函数
- onunload：文档消失时调用的函数
- onload：文档加载完成后调用的函数
- onblur：文档失去焦点时调用的函数
- onerror：文档无法正确加载时调用的函数
- onfocus：文档获得焦点时调用的函数
- onhashchange：当'#'文档当前地址的片段标识符部分发生更改时调用的函数
- onmessage：文档收到消息时调用的函数（webworker中的知识点，参见后续博客）
- onoffline：网络通信失败时调用的功能
- ononline：恢复网络通信时调用的功能
- onpopstate：用户导航会话历史记录时调用的函数
- onresize：调整文档大小时调用的函数
- onstorage：存储区域更改时调用的函数
function fn(e) {
console.log("浏览器内存改变了");
}
<body onstorage='fn()'>...</body>
br标签
1. 控制文本换行，w3c建议不要用这个属性作为间距
button标签
1. html5赋予了button很多新的特性，下面看看这些新特性
- autofocus：布尔属性，设置true表示聚焦
- disabled：布尔属性，设置true表示禁用
- form：当button在form表单中使用时，将form属性值设置成form表单的id值，可以将button放在任何地方
- formaction：button提交form表单时的url地址，会覆盖form表单的action属性
- formenctype：提交表单值的type类型
- application/x-www-form-urlencoded：默认的类型
- multipart/form-data：如果表单是file类型
- text/plain：只能用在get请求
- formmethod：提交表单的请求类型
- post
- get
- formnovalidate：布尔属性，设置为true表示提交表单不做验证
- formtarget：form表单的提交默认会跳转到提交地址的页面，这个属性设置跳转方式
- _self
- _blank
- name：语义化属性，设置了之后提交表单此属性会一并提交，属性值对应value
- value：name属性对应的属性值
- type：按钮的类型
- submit：提交表单
- reset：重置表单
- button：一般的按钮
<form id="form">
<div class="form-example">
<label for="name">用户名: </label>
<input type="text" name="name" id="name" required>
</div>
<div class="form-example">
<label for="email">密码: </label>
<input type="email" name="email" id="email" required>
</div>
</form>
<button
formtarget="_blank"
formenctype="application/x-www-form-urlencoded"
value="1"
name="btn"
formnovalidate
type="submit"
form="form"
formaction="http://localhost:8080/submit"
formmethod="post">
提交
</button>
canvas标签
待完成，内容较多，将单独开一篇博客
caption标签
1. caption是表格的标题
可以通过css属性：caption-side和text-align控制caption的位置，例如：| 名字 | 性别 |
|---|---|
| 小明 | 男 |
| 小莹 | 女 |
<table border="1">
<caption style="caption-side: bottom;text-align: left;">性别信息</caption>
<tr><th>名字</th> <th>性别</th></tr>
<tr><td>小明</td><td>男</td></tr>
<tr><td>小莹</td><td>女</td></tr>
</table>
col标签
1. col标签，指定table列的跨度用来控制列的样式
col标签一般放置于colgroup标签中，span属性表示列跨度，不写默认是1列。例子：| 名称 | 性别 | 年龄 | 分数 | |
|---|---|---|---|---|
| 1 | 小李 | 男 | 10 | 30 |
| 2 | 小张 | 女 | 9 | 60 |
table {
border-collapse: collapse;
border: 2px solid rgb(100, 100, 100);
letter-spacing: 1px;
font-family: sans-serif;
font-size: .7rem;
}
td,
th {
border: 1px solid rgb(100, 100, 100);
padding: 10px 10px;
}
td {
text-align: center;
}
<table>
<colgroup>
<col> <!-- 不写span属性默认就是1 -->
<col span="1" style="background-color: #afe6b1;">
<col span="2" style="background-color: #d8de9f;">
<col span="1" style="background-color: #95d9e2;">
</colgroup>
<tr>
<td> </td>
<th>名称</th>
<th>性别</th>
<th>年龄</th>
<th>分数</th>
</tr>
<tr>
<th>1</th>
<td>小李</td>
<td>男</td>
<td>10</td>
<td>30</td>
</tr>
<tr>
<th>2</th>
<td>小张</td>
<td>女</td>
<td>9</td>
<td>60</td>
</tr>
</table>
cite标签
1. cite的作用是表示引用别人的作品，例如：
本文参考了w3c规范
<blockquote>本文参考了<cite><a href="https://www.w3.org/">w3c规范</a></cite></blockquote>
code标签
1. code的作用是使用等宽字体展示代码，例如：new Date()
<code>new Date()</code>
datalist标签
1. datalist给其他控制标签提供可选提示项
此标签对safari兼容性差，需要引入polyfill <input list="email-lists" type="email"/>
<datalist id="email-lists">
<option value="info@davidhasselhoffonline.com">
<option value="john@doe">
<option value="kenny@southpark.cc.com" disabled>
<option value="moss.m@reynholm.co.uk">
<option value="star-lord@galaxy.gov">
</datalist>
dl标签
1. dl制作键值对列表
dl包含dt(键)和dd(值)配套的标签，例子：- html
- 超文本标记语言，标准通用标记语言下的一个应用
- HTML 不是一种编程语言，而是一种标记语言，是网页制作所必备的
<dl>
<dt>html</dt>
<dd>
超文本标记语言，标准通用标记语言下的一个应用
</dd>
<dd>
HTML 不是一种编程语言，而是一种标记语言，是网页制作所必备的
</dd>
</dl>
del,ins标签
1. del语义化标签，表示已删除文本
拥有语义化属性- cite：表示删除文本说明的链接
- datetime：表示删除的时间，需要遵循固定格式
<del cite="" datetime="2017-06-01T08:30">nothing</del>
2. ins语义化标签，表示已添加文本，其余用法和del一样
details标签
1. details标签，可以将详细信息折叠
details标签内部可以使用summary标签，summary标签内容将作为label展示。例如： <details id="details">
<summary style="display: list-item">html是什么？</summary>
超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。
HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的
</details>
details标签可以设置open属性，此属性是布尔属性，设置为true，details标签展开
2. details标签，可以使用自身独有的toggle事件，侦听展开关闭状态
const details = document.getElementById("details");
details.addEventListener("toggle", event => {
if (details.open) {
console.log("展开了");
} else {
console.log("关闭了");
}
})
em标签
1. em标签语义化标签，强调短语
语气强调
<p>语气<em>强调</em></p>
fieldset标签
1. fieldset标签用于form表单中对部分控件分组
包含一个配套的legend标签，作为分组的标题。fieldset标签自身的属性如下：- disabled：布尔属性值，设置为true表示禁用当前组，包含的表单无法交互不能提交
- form：值设置成form标签的id属性值，表示此分组包含在指定的form表单中
- name：给分组取名，无实际功能性意义
<form>
<fieldset disabled>
<legend style="color: orange">登录</legend>
<div>
<label for="name">用户名</label>
<input name="name" type="text" id="name">
</div>
<div>
<label for="password">密码</label>
<input name="password" type="password" id="password">
</div>
</fieldset>
</form>
figure标签
1. figure标签用于带有标题的自包含内容
包含一个配套的figcaption标签，表示内容标题，例子： <figure>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3160587534,1976573966&fm=26&gp=0.jpg" alt="tree">
<figcaption style="position: relative;bottom: 35px;left: 5px;color: #fff;font: italic smaller sans-serif;">美丽的树</figcaption>
</figure>
footer标签
1. 语义化标签，footer表示作者，友情链接，copyright等信息，例如：
© 2019 叶家伟
<footer>
<p>© 2019 叶家伟</p>
</footer>
form标签
1. form表单，常用属性如下
- accept-charset：空格分隔的字符集，默认是"UNKNOWN"表示使用页面默认的编码
- action：提交表单的地址
- enctype：提交表单值的type类型
- application/x-www-form-urlencoded：默认的类型
- multipart/form-data：如果表单是file类型
- text/plain：只能用在get请求
- method：提交的方式
- post
- get
- name：form的名称必须独一无二
- novalidate：布尔属性值，设置为true表示不验证表单
- target：提交表单的跳转行为
- _self：当前页
- _blank：新的标签页
<form>
<div>
<label for="name">用户名</label>
<input name="name" type="text" id="name" required>
</div>
<div>
<label for="password">密码</label>
<input name="password" type="password" id="password" required>
</div>
<div>
<input type="submit">
</div>
</form>
2. 设置form表单验证的样式
可以给form标签设置伪类样式- :valid设置验证合法的样式
- :invalid设置非法的样式
header标签
1. 语义化标签，表示介绍性内容
<article>
<header>
<h2>html标签全解</h2>
<p>作者：叶家伟</p>
</header>
<p>...</p>
</article>
hr标签
1. 表示分割线
i标签
1. 语义化标签，此标签内的文本具有自己不一样的语义
iframe标签
1. iframe标签用来嵌套其他页面
常用属性如下- allow
- fullscreen：布尔属性，设置为true表示允许调用requestFullscreen()全屏方法
- height：设置高度
- width：设置宽度
- name：iframe名称，可以当做其他标签target属性的属性值
- src：嵌入页面的地址
<a href="https://www.baidu.com/s?wd=html" target="test" rel="noopener">跳转</a>
<iframe name="test" width="300" height="200" src=""></iframe>
img标签
1. img标签常用的属性
- alt：w3c建议img标签alt需要包含非空值，图片未加载成功显示的文本
- decoding：图片解码方式
- sync：同步方式
- async：异步方式
- auto：默认，自动识别
- height：设置图片高度
- width：设置图片宽度
- src：图片的默认地址
2. 监听img加载错误
<img src="" alt="没有图片" onerror="fn()">
function fn() {
console.log('图片加载失败');
}
3. 点击图片获取坐标
用a链接包裹img图片，此时img设置ismap属性当点击a链接会获取图片的坐标 <a href="http://www.baidu.com">
<img
ismap
src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3160587534,1976573966&fm=26&gp=0.jpg"
alt="树"
/>
</a>
随意点击图片任意位置 https://www.baidu.com/?196,132
4. 响应式图片
sizes属性和srcset属性配合可以制作响应式图片- sizes：通过媒体查询找出当前屏幕图片的宽度，多个属性用逗号分隔，最后一个属性不要写媒体查询信息表示默认图片的size
- srcset：根据sizes查询出来的宽度，找到对应包含w的属性值的图片地址
<img
src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3160587534,1976573966&fm=26&gp=0.jpg"
alt="tree"
srcset="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3160587534,1976573966&fm=26&gp=0.jpg 200w,
https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1354171251,3891527867&fm=26&gp=0.jpg 400w"
sizes="(max-width: 600px) 200px,
(max-width: 1200px) 400px,
50vw">
kbd标签
1. 语义化标签表示从设备上输入的文本
Ctrl+N <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd>
main标签
1. 语义化标签，表示文档的主体
只能有一个main标签mark标签
1. 语义化标签，表示突出显示重要的文本，例如：
重要的文本<mark>重要的文本</mark>
meter标签
1. 类似进度条的功能
常用属性如下- value：当前值
- min：最小值
- max：最大值
- low：最差值，低于此值显示红色
- high：最高值，高于此值显示绿色，介于low和high之间显示青色
- optimum：最优值
<meter
min="0"
max="100"
low="33"
high="66"
optimum="80"
value="81">
</meter>
浙公网安备 33010602011771号