特点
- 由尖括号包围的关键词，比如 <html>
- 通常是成对出现的，比如 <div> 和 </div>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签；
- 开始和结束标签也被称为开放标签和闭合标签。
- 也有单独呈现的标签，如：<img src="百度百科.jpg" />等。
常用标签
1、 title标签
<title>html</title><!--网页标题-->
<h1>web前端开发</h1>
<h2>web前端开发</h21>
<h3>web前端开发</h3>
<h4>web前端开发</h5>
<h6>web前端开发</h6>
3、 段落标签p
<p>demo</p>
<a href="www.baidu.com">百度</a>
5、内联（行内）span
<span>1</span>
特点：内容多宽多高，标签就有多宽多高
6、块元素div
<div>1</div>
特点：独占一行
7、水平线hr（可以单独出现）
<hr>
<strong>责任</strong>
<em>共赢</em>
9、列表
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息
-
无序列表ul
[1] 没有顺序，每个<li>标签独占一行（块元素）
[2] 默认<li>标签项前面有个实心小圆点
[2] 一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等
<h2>无序列表</h2>
<ul>
<li>001演藏族女孩</li>
<li>撞死两个人后自拍</li>
<li>诗隆甜蜜出游</li>
<li>一线城市楼市退烧</li>
</ul>
-
有序列表 ol
[1] 有顺序，每个<li>标签独占一行（块元素）
[2] 默认<li>标签项前面有顺序标记
[3] 一般用于排序类型的列表，如试卷、问卷选项等
<h2>有序列表</h2>
<ol>
<li>001演藏族女孩</li>
<li>撞死两个人后自拍</li>
<li>诗隆甜蜜出游</li>
<li>一线城市楼市退烧</li>
</ol>
-
定义列表
[1] 没有顺序，每个<dt>标签、<dd>标签独占一行（块元素）
[2] 默认没有标记
[3] 一般用于一个标题下有一个或多个列表项的情况
<h2>定义列表</h2>
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>桃子</dd>
<dd>李子</dd>
</dl>
- 列表样式
list-style-type
list-style-image
list-style-position
list-style
li {
list-style:none;
}
去除列表前面的小黑点
10、表格table
- table：表格标签
- tr：行标签
- th、td：单元格标签
- colspan：跨行数
- rowspan：跨列数
<table>
<tr>
<th colspan="2">学号</th><!--行合并-->
<!--<th>姓名</th>-->
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td rowspan="2">88</td><!--列合并-->
<td>77</td>
<td>66</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<!-- <td>77</td>-->
<td>80</td>
<td>99</td>
</tr>
</table>
- 表格边框
border: 1px solid black;<!--像素1的黑色实线边框-->
<video autoplay controls ><!--controls提供播放、暂停和音量的控件、autoplay自动播放-->
<source src="video/video.webm" type="video/webm"/><!--播放文件类型-->
</video>
- 主流浏览器支持的音频格式
12、内联框架iframe
- 实现页面之间的相互跳转
- 在被打开的框架上加name属性
<iframe name="mainFrame" src="subframe/the_second.html" />
- 在超链接上设置target目标窗口属性为希望显示的框架窗口名
<a href="subframe/the_second.html " target="mainFrame">下边显示第二页</a>
示例
<h2>iframe</h2>
<!-- <img src="b1.jpg" /> _self _blank-->
<div>
<a href="http://www.baidu.com" target="frame_content">百度</a> |
<a href="https://www.jd.com/" target="frame_content">京东</a> |
<a href="列表.html" target="frame_content">列表</a>
</div>
<iframe name="frame_content" src="http://www.baidu.com" width="1500px" height="500px"/>
- html语义化：在使用html编程时，根据内容选择合适的标签（代码语义化），增加可读性与SEO。
- 为什么要语义化(优点)
[1] 为了在没有CSS的情况下也能呈现出很好地内容结构、代码结构；
[2] 提高用户体验；
[3] 有利于SEO；
[4] 方便其他设备渲染网页；
[5] 便于团队开发和维护。
HTML语义化注意事项
- 需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式），strong默认样式是加粗（不要用b），em是斜体（不用i）；
- 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
- 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
网友评论