HTML原理与理解

最新推荐文章于 2025-05-24 10:14:06 发布

StarXDer!!!

最新推荐文章于 2025-05-24 10:14:06 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.youkuaiyun.com/weixin_43590947/article/details/83964328

HTML 专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨HTML5的语义化标签及其应用，包括section、article、nav等新元素，阐述了HTML版本发展、元素分类及默认样式，同时提供了丰富的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML常见元素和理解
HTML版本
HTML元素分类
HTML元素嵌套关系
HTML元素默认样式和定制化

HTML常见元素

在这里插入图片描述

<meta charset='utf-8'>//设定编码
<meta name="viewport" content="width=device-width, initial-scale=1.0，maximum-scale=1.0，user-scalable=no">//视图设置相关
<base href='/'>//为页面上的所有链接规定默认地址或默认目标

案例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo</title>
</head>
<body>
    <section>
        <h1>链接</h1>
        <a href="http://www.qq.com">腾讯网</a>
        <a href="http://www.taobao.com" target="_blank">淘宝网</a>
    </section>
    <section>
        <h1>表格</h1>
        <table border="1">
            <thead>
                <tr>
                    <th>表头1</th>
                    <th>表头2</th>
                    <th>表头3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>数据1</td>
                    <td>数据2</td>
                    <td>数据3</td>
                </tr>
                <tr>
                    <td colspan="2">数据1</td>//跨列
                    <td>数据3</td>
                </tr>
                <tr>
                    <td rowspan="2">数据1</td>//跨行
                    <td>数据2</td>
                    <td>数据3</td>
                </tr>
                <tr>
                    <td>数据2</td>
                    <td>数据3</td>
                </tr>
            </tbody>
        </table>
    </section>
    <section>
        <h1>表单</h1>
        <form method="GET" action="http://www.qq.com">
            <p>
                <select name="select1">
                    <option value="1">一</option>
                    <option value="2" selected>二</option>
                </select>
            </p>
            <p>
                <input type="text" name="text1" />
            </p>
            <p>
                <input type="password" name="password" />
            </p>
            <p>
                <input type="radio" name="radio1" id="radio1-1" />//name相同时只能选择一个
                <label >选项一</label>
                <input type="radio" name="radio1" id="radio1-2" />
                <label for="radio1-2">选项二</label>//label进行选择框关联
            </p>
            <p>
                <button type="button">普通按钮</button>
                <button type="submit">提交按钮一</button>//出现在form中，表单提交至action指定的地址
                <input type="submit" value="提交按钮二"/>//应用同上
                <button type="reset">重置按钮</button>//初始化表单
            </p>
        </form>
    </section>
</body>
</html>

演示地址
tips：虽然用AJAX技术可以不通过submit来提交表单信息，但是仍建议使用form格式，html标签的语义化精确便于结合某些框架的使用。同时某些浏览器插件的自动保存用户名密码等功能也有可能受此影响。

## Html的理解

HTML“文档”
描述文档的“结构”
有区块和大纲

在这里插入图片描述
文档有大纲结构清晰语义明显

如何进行HTML语义化？

尽可能少的使用无语义的标签div和span；在语义不明显时，既可以使用div或者p时，尽量用p,
因为p在默认情况下有上下间距，对兼容特殊终端有利；不要使用纯样式标签，如：b、font、u等，改用css设置。
需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

HTML版本

html版本更新的时候一直在考虑加强语义化。

HTML 4 //结构规范化弱，属于SGML，所以出现了XHTML
XHTML //结构非常严格标签属性小写而且属性必须有对应值，本质上是XML，如果需要使用符合 XML 规范的 XHTML 文档，则应该在文档中的标签中至少使用一个 xmlns 属性，以指定整个文档所使用的主要命名空间
XHTML 2.0 //结构更加严格并不向前兼容
HTML5 //发现结构严格并不适合发展方向，加强了语义化，增加了语义标签，删掉了无用标签。

在这里插入图片描述

H5新增语块标签

section
article
nav
aside
header
footer

语义化

<em>强调文本</em><br>
<strong>加粗文本</strong><br>
<dfn>定义项目</dfn><br>
<code>一段电脑代码</code><br>
<samp>计算机样本</samp><br>
<kbd>键盘输入</kbd><br>
<var>变量</var>

强调文本
加粗文本
定义项目
一段代码
计算机样本
键盘输入
变量

表单增强

日期、时间、搜索
表单验证增强
Placeholder自动聚焦

新的API
离线、音视频、图形、实时通信、本地存储、设备能力

分类和嵌套变更

HTML元素分类

按照样式分类//H4

块级 block 默认独占一行
行内 inline/内联元素无法设置宽度和高度（img除外）
inline-block 比如select

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>default style</title>
</head>
<body style="width:200px">
    <div>DIV元素</div>
    <p><span style="width:1000px">内联元素</span><em>内联元素</em><strong>好巧，我也是内联元素</strong></p>
    <p><select><option>下拉框</option></select><span>你猜左边是什么元素</span></p>
</body>
</html>

效果演示

按照内容分类//H5
在这里插入图片描述
点击查看 W3C 官方介绍

HTML嵌套关系

块级元素可以包含行内元素
块级元素不一定能包含块级元素比如<p><div></div></p>
行内元素一般不能包含块级元素，也有一些可以，比如H5中的 <a><div></div></a>（H4不合法但是可以用，因为浏览器自动转换）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>default style</title>
</head>
<body>
    <div><a href="#">DIV &gt; A</a></div>
    <a href="#"><div>A &gt; DIV</div></a>
    <p><a href="#"><div>P &gt; A &gt; DIV</div></a></p>
</body>
</html>