首页 > 博客列表 > 文档结构与常用HTML标签

博主信息

博文 5

粉丝 0

访问量 4505

专题推荐

更多>

1.文档结构

一个html文件分为两个部分，第一个部分就是<!DOCTYPE html>，第二个部分就是<html>...</html>

1.1 文档类型

<!DOCTYPE html> 表示文档的类型为html

顾名思义，doc是文档，type是类型，合起来就是表示文档类型

1.2 html标签

<html>标签代表着根元素，整个网页的内容都是包含在它里面

1.3头部结构 `<head>`

<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>常用的HTML标签</title>
<!-- 还包括引入css样式文件、js文件等内容-->

头部结构主要用于描述网站的基本特征，包括网页标题、字符编码、视口设置等内容，以及需要引入的css样式文件、js文件等声明。这些内容主要是用于浏览器和搜索引擎加载网页时进行解析，用户并不关注这些内容。

<meta>标签可以理解为元数据标签，即说明数据的数据。把网页的内容理解为数据，那么说明这些数据所具备的基本特征也是通过数据来表示的。这与近期十分火热的“元宇宙”概念颇为相似。

1.4主体结构 `<body>`

这就是对应了网页所呈现的具体内容了，是通过浏览器渲染之后展现给用户看到的内容。

2.常用的HTML标签

2.1 布局标签

（1）div+class模式

<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>

（2）语义化标签

<header>header</header>
<main>main</main>
<footer>footer</footer>

绝大多数程序员还是喜欢 div + class 模式
1.语义化标签主要用于SEO优化，目前至少90%以上的项目是基于移动端,不依赖或不在乎搜索引擎；
2.语义化标签太少了,不如语义更明确的class，让人阅读代码时更容易理解。

2.2 链接标签 `<a>`

(1)跳转至站外

<a href=https://www.php.cn/html/html-links.html">HTML链接的详细说明</a>

(2)在指定的窗口打开

<a href="https://www.xuexi.cn" target="study">学习强国</a>
<iframe frameborder="1" name="study" width="500" height="500"></iframe>

<a>标签的target属性大有用处，既可以指定跳转方式为”_blank”，“_self”等，也可以跳转到某一个指定name属性的iframe。

（3）站内跳转

<a href="#top"></a>
<div id="top">回到顶部</div>
<!--可以通过设置CSS样式让div保持在页面顶部-->

（4）图像标签

 <a href=""><img src="dog.jpg" alt="dog" /></a>

2.3 列表标签

(1)有序列表

<ol>
    <li><a href="">有序列表1</a></li>
    <li><a href="">有序列表2</a></li>
    <li><a href="">有序列表3</a></li>
</ol>

有序列表较为少用，一般通过无序列表Ul结合css进行替代。

（2）无序列表

<ul>
    <li><a href="">无序列表1</a></li>
    <li><a href="">无序列表2</a></li>
    <li><a href="">无序列表3</a></li>
</ul>

（3）自定义列表

<dl>
    <dt>国籍</dt>
    <dd>中国</dd>
    <dt>性别</dt>
    <dd>男</dd>
</dl>

2.4 表格标签

表示表格结构的标签：<table>,<caption>,<thead>,<tbody>,<tfoot>

展示表格数据的标签：<tr>,<td>

colspan、rowspan用于设置单元格合并

<table border="1" cellspacing="0" cellpadding="5">
    <caption>
    PHP中文网第17期课程安排
    </caption>
    <thead>
    <tr align="center">
        <td>阶段序号</td>
        <td width="150">阶段信息</td>
        <td width="150">教学内容</td>
        <td width="150">直播地址</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>第一阶段</td>
        <td>前端开发基础与案例教学</td>
        <td>HTML5/CSS3/ES6/实战…</td>
        <td>https://www.php.cn/course/1259.html</td>
    </tr>
    <tr>
        <td>第二阶段</td>
        <td>PHP编程与实例教学</td>
        <td>PHP/MySQL/MVC/Composer/…</td>
        <td>https://www.php.cn/course/1260.html</td>
    </tr>
    <tr>
        <td>第三阶段</td>
        <td>Vue3/Laravel/API商城/Uniapp/高并发项目优化</td>
        <td>Vue3/Laravel/API商城/Uniapp/高并发项目优化</td>
        <td>https://www.php.cn/course/1261.html</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td>上课时间</td>
        <td colspan="3">晚20:00 - 22:00 (双休日/法定节假日除外)</td>
    </tr>
    </tfoot>
</table>

2.5 内联框架标签 `iframe`

iframe常用于管理后台

<h2><a href="https://taobao.com" target="taobao">淘宝</a></h2>
<iframe srcdoc="<em>点击上面的链接打开</em>" frameborder="1" width="400" height="400" name="taobao"></iframe>

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

VSCode安装及常用emmet语法

2021-09-19 17:45:43