常用HTML标签

2019-11-09 本文已影响0人 1CC4

特点

由尖括号包围的关键词，比如 <html>
通常是成对出现的，比如 <div> 和 </div>
标签对中的第一个标签是开始标签，第二个标签是结束标签；
开始和结束标签也被称为开放标签和闭合标签。
也有单独呈现的标签，如：<img src="百度百科.jpg" />等。

常用标签

1、 title标签

<title>html</title><!--网页标题-->

2、标题h1-h6

<h1>web前端开发</h1>
<h2>web前端开发</h21>
 <h3>web前端开发</h3>
 <h4>web前端开发</h5>
 <h6>web前端开发</h6>

3、段落标签p

<p>demo</p>

4、超链接a

   <a href="www.baidu.com">百度</a>

5、内联（行内）span

<span>1</span>

特点：内容多宽多高，标签就有多宽多高
6、块元素div

<div>1</div>

特点：独占一行

7、水平线hr（可以单独出现）

 <hr>

8、加粗、倾斜

<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的黑色实线边框-->

11、音频、视频

<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关联起来。

常用HTML标签

特点

常用标签

示例

HTML语义化注意事项

猜你喜欢

热点阅读