收藏
天蓬老师批改状态：合格
老师批语：代码应该放在代码块中
HTML文档结构:
代码如下：
<!-- 告诉浏览器html的版本进行编写的指令 -->
<!DOCTYPE html>
<!-- 告诉浏览器其自身是一个HTML文档，标签限定了文档的开始点和结束点 --><!-- lang="语言"，表示当前页面的主要语言体 -->
<html lang="en"><!-- head：文件的头部标签 -->
<head>
<!-- 规定HTML文档的字符编码 -->
<meta charset="UTF-8">
<!-- viewport：文档视口 | width="device-width"表示宽度是设备屏幕的宽度| initial-scale：表示页面初始的缩放比例 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- title文档的标题 -->
<title>HTML文档结构</title>
</head>
<!-- body 文档的主体部分，用户感兴趣的部分 -->
<body>
<h1>你好，这个是我的文档！</h1>
</body>
</html>
运行图如下:
元素和属性详解：
HTML的元素也是我们常说的标签，不区分大小写！
元素分为块元素和行内元素，他们的区分如下：
块元素：
1、总是从新的一行开始。
2、块元素的高度是宽度是可定义的。
3、块元素的是可以包裹行内元素。
行内元素：
1、可与多个元素在同一行。
2、宽度和高度根据内容的自适应，不可定义！
3、行内元素只能行内元素，不可以包裹块元素
HTML标签（元素）可以拥有属性。属性提供了有关HTML元素的更多信息。属性总是以名称/值对的形式出现。如name="name"，style="color:red"。属性总是在元素的开始标签中定义。
代码如下：
<!-- 块元素： -->
<div class="class ietm" width="400px" height="400px">
<h1>我是一个块元素</h1>
<p id="id" name="name" style="color: chocolate;">我是属性的表达</p>
</div>
<!-- 行内元素 -->
<span>我是行内元素</span>
<a href="http://www.php.cn">点我可以飞起来我！</a>
<div>
<img src="img.jpg" alt="我是一张图片">
</div>
运行图如下:
语义化的结构元素：
结构元素可以分为两种，一种是传统元素的结构，一种是语义化的结构元素，传统元素的结构很简单，就是我们使用<div>标签 给每个div标签独特的ID或class属性划分定义出不同的区块结构。
传统元素结构代码展示：
<div id="header">
<ul>
<li>表的头部</li>
<li>表的头部</li>
</ul>
</div>
<div id="main">
<ul>
<li>表的主体</li>
<li>表的主体</li>
</ul>
</div>
<div id="footer">
<ul->
<li>表的脚部</li>
<li>表的脚部</li>
</ul->
</div>
下面展示HTML5语义化结构元素代码:
<header>
<nav>头部</nav>
</header>
<main>
<aside>侧边栏</aside>
<section>内容区</section>
<article>内容区</article>
</main>
<footer>
<p>页脚</p>
</footer>
语义化的结构元素：
代码如下:
<!-- time 时间标签 -->
<time>2020-07-31</time></br>
<!-- progress：进度条 -->
<progress value="50" max="100"></progress></br>
<!-- 强调，加粗 -->
<strong>88888</strong></br>
<mark>自动将文本设置为黄底黑字</mark></br>
<label>原价：</label><del>188</del>
<label>现价</label><del>0.18</del>
<!-- code：表示计算代码 -->
<code>name="name"></code></br>
<!-- 标签定义文档或文章的作者/拥有者的联系信息 -->
<address>作者地址/电话：北京区/181****7805</address>
1<sup>2</sup><span>=1</span>
运行图如下:
链接元素：
<!-- 新的窗口打开 -->
<a href="" target="_blank"></a>
<!-- 下载文件 -->
<a href="" download="1.html"></a>
<!-- 打电话链接 -->
<a href="tel:1817808****"></a>
<!-- 发送邮箱 -->
<a href="mailto:1192063282@qq.com"></a>
<!-- 描点链接，定位到指定的位置 -->
<a href="#id"></a>
<!-- 返回页面的顶部 -->
<a href="#">点击</a>
列表元素：
代码如下:
<!-- 无序列表 -->
<ul>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<!-- 自定义列表 -->
<dl>
<dt>第一</dt>
<dd>是我</dd>
<dd>是我</dd>
<dt>第二</dt>
<dd>是他</dd>
<dd>是他</dd>
</dl>
效果图如下:
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
