-
标签介绍
列表标签
<!--无序列表--> //效果展示
<ul>
<li>无序列表</li> //·无序列表
<li>无序列表</li> //·无序列表
<li>无序列表</li> //·无序列表
</ul>
<!--有序列表--> //效果展示
<ol>
<li>有序列表</li> //1.有序列表
<li>有序列表</li> //2.有序列表
<li>有序列表</li> //3.有序列表
</ol>
图片标签
<img
width="100"
height="100"
src="https://xxx" //图片来源
alt="当图片链接失效时展示的图片文字说明"
/>
文本标签
<!--p标签及其强调内容显示-->
<p>普通文本<em>强调的内容,用斜体显示</em>。</p>
<p>普通文本<strong>强调的内容,用加粗显示</strong>。</p>
输入标签
<!--单行文本框,输入中的换行会被自动去除-->
<input type="text" placeholder="请填写文本信息" />
<!--复选框,只能点击选择框选中-->
<input type="checkbox">first checkbox
<input type="checkbox">second checkbox
<!--复选框优化,点击选项文字也可选中,交互体验好-->
<label>
<input
type="checkbox"
id="cbox1-pro"
value="first_checkbox"
/>first checkbox
</label>
<!--选择文件-->
<input type="file" />
<!--单选框-->
<input type="radio" id="radio" />
<!--可拖动的控件-->
<input type="range" />
<!--提交按钮-->
<input type="submit" />
文本域标签(多行文本)
/**
*多行纯文本编辑控件
*cols表示文本域的可视宽度,rows表示文本域显示的行数
**/
<textarea name="story" rows="5" cols="20">
this is a textarea
</textarea>
<kbd>:标签表示键盘元素
<pre>+<code>:标签表示代码段
-
语义化标签 (页面结构)
<nav>:导航栏标签
<article>:文章标签,包括header、section等部分
<section>:段落/大纲
<aside>:侧边栏
<footer>:作者、文章信息等
语义化的优点:
- 代码可读性好
- 有利于搜索引擎识别标签,确定权重,爬取语义化标签
- 提高页面的可访问性,残障人士的设备(屏幕阅读器等)可以根据不同的语义化标签发出不同声音,给残障人士传达不同信息,方便浏览