HTML页面编写规范(一)

自求多芙

已于 2024-06-23 00:04:11 修改

阅读量951

点赞数 27

文章标签： html 前端 css

于 2024-06-22 23:29:57 首次发布

本文链接：https://blog.csdn.net/m0_61619549/article/details/139887688

版权

前言

前端开发是一门相对简单易上手的编程语言开发，无论是HTML的结构嵌套，还是CSS的书写顺序，甚至是Javascript的编写规范性都有着较高的自由度。

我们在编写前端页面的时候或许不需要严格按照W3C给出的规定来执行，也能达到我们的需求，甚至可能会有着不错的结果。

但良好的代码书写习惯，不仅可以提高”HTML“的美观，可读性，可维护性，浏览器的运行效率，还能进一步提高代码的编写效率

HTML

（一）html语义化

1.语义化含义

HTML语义化是Web开发中的一个重要概念，它强调使用HTML标签来准确地描述内容的含义，而不仅仅是展示效果。以便更好地向开发者和浏览器描述其意义。

比如：div，span无法提供关于其内容信息。而 <form>、<table> 以及 <img>清晰地定义其内容

又列如：<header>、<main> 以及 <nav> 只是换了名字的<div>标签，，但是会让结构更清晰有意义

2.语义化书写举例

<h1>标准语义化HTML结构</h1>
    <nav>
        <a href="https://www.w3school.com.cn/tags/index.asp">首页</a>
        <a href="https://www.w3school.com.cn/tags/index.asp">关于我们</a>
    </nav>
    <header>
        头部信息
    </header>
    <aside>侧边栏</aside>
    <main>
        <section>
            <article>这是一篇公司的博客</article>
        </section>
        <section>
            <h3>公司业务</h3>
            <div>
                <div>网站开发</div>
                <div>软件开发</div>
                <div>APP开发</div>
                <div>App开发</div>
            </div>
        </section>
    </main>
    <footer>底部信息</footer>

3.语义化好处

1.利于网页屏幕阅读器等语音转换辅助技术读取有关信息，比如<strong>标签在被朗读时会加重语气

2.搜索引擎更喜欢语义化的HTML，因为它能更好地理解页面的内容，从而提高页面在搜索结果中的排名

3.团队开发时，增强维护性和可读性

4.可以一定程度上减少其对CSS和JS的依赖

5.提高代码的重用

（二）html标签的嵌套

缘由，好处不再赘述......

1.HTML 标签大致分类

1、块级元素(block)

一般用来组织页面内容、定义页面结构、创建导航栏、页脚等，它是页面布局的基础：

如，<div>、<p>、<h1>-<h6>、<ol>、<ul>、<li>、<form>、<table>等

2、内联元素（inline）

一般用用来在网页内容中表示文本或其他内容中的一部分，主要用于“强调、区分样式、上标、下标、锚点”等

如，<a>、<span>、<img>、<em>（强调的文本）、<strong>（重要的文本）、<sup>（上标文本）、<sub>（下标文本）等。

2.HTML 标签的嵌套规则

1）.块元素包含内联元素或某些块元素；内联不能包含块元素，但能包含其它内联元素
2）.<h1> ~ <h6>、<p>， <dt>（定义列表中的术语元素）是特殊的块级元素，它们只能包含内联元素，不能包含块级元素。称为“内联容器”或“内联上下文”的块级元素

（三）html编码规范

1.HTML格式规范定义

<!-- 文档类型，告诉浏览器这是一个HTML5文档 -->
<!DOCTYPE html>
<!-- lang="en"表示文档的主要语言是英文 -->
<html lang="en">
    <!-- <head>标签包含了文档的元信息，比如字符编码、视口设置、标题等。 -->
    <head>
        <!-- 文档的字符编码为UTF-8 -->
        <meta charset="UTF-8" />
        <!-- 告诉Internet Explorer浏览器使用其最高版本模式来渲染页面。这通常用于确保页面在旧版IE浏览器上也能以最新标准来显示。 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <!-- 它应该是用来设置视口（viewport）的属性，使得页面能在不同设备上正确显示。() -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
    </body>
</html>

注意：<script>推荐放<body>中；<style>推荐放在<head>中

script位置

在<head>中：将脚本放在<head>中通常意味着在文档完全加载和解析之前就开始执行脚本。这可能导致性能问题，因为当脚本执行时，浏览器可能会阻止HTML解析器的进一步解析，导致页面渲染延迟。
在<body>中：将脚本放在<body>的底部（或靠近底部的位置）可以确保在脚本执行之前，HTML文档已经加载和解析了大部分内容。这有助于提高页面渲染性能，因为用户可以看到页面内容在脚本执行之前加载。

style位置

在<head>中：将样式信息放在<head>中可以确保在浏览器渲染页面之前加载和解析样式。这有助于确保页面以正确的样式显示。
在<body>中：虽然可以在<body>中使用<style>元素，但这通常不是最佳实践。将样式放在<body>中可能会导致页面在加载时样式闪烁，因为浏览器在加载和解析<style>元素之前会先渲染页面的其余部分。

更详细的原理见浏览器渲染基本原理—CSDN

2.HTML编写tips

1）.尽量减少标签的数量，降低HTML整体结构复杂度

2）.遵循一致的属性顺序，提高代码的可读性和可维护性，提高团队合作开发效率

通常建议的属性顺序是：class，id / name，data-*，src/for/href，title/alt，aria-*/role
class（因为它经常用于CSS和JS选择器），id（因为它是唯一的），name（在表单元素中用于名称引用），data-*（用于存储自定义数据），src/for/type/href（这些属性定义了资源或关联），title/alt（提供额外信息或备用文本），aria-*/role（用于增强可访问性）。

3）.其他：

使用小写标签
关闭所有标签：即使<img>, <input>, <br>在HTML5中是自闭合的，但显式地关闭它们（例如，<img />）可以提高代码的可读性和可维护性。
避免使用内联样式：有助于保持HTML结构的清晰，并方便样式的修改和复用。
使用有意义的类名和ID
注释
保持简洁：避免添加不必要的空格、换行或注释。这可以减少文件大小并提高加载速度。但是，不要为了简洁而牺牲可读性。

CSS

（一）CSS书写顺序及作用

1.书写顺序

优先级第一定位属性：position display float left top right bottom overflow clear z-index
优先级第二自身属性：width height padding border margin background
优先级第三文字样式：font-family font-size font-style font-weight font-varient color
优先级第四文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow line-height
优先级第五css3中新增属性：content box-shadow border-radius transform……

2.书写顺序的作用

确保CSSOM树更加高效和紧凑，从而减少浏览器在解析和计算样式时所需的内存和计算资源，提高浏览器渲染性能。

遵循一定的书写顺序提高代码可读性，可维护性。

（二）书写规范

1.选择器的特异性：

尽量使用更具体的选择器来定义样式，以减少不必要的样式覆盖。减少浏览器解析时进行权重计算的工作量，提高效率。同时避免使用!important和内联样式，提高可读性

2.使用CSS缩写属性：

精简代码同时又能提高阅读体验，如：

/*缩写前*/
#box p{
	border-top-style: none;
	padding-left: 10px;
	padding-right: 20px;
	padding-top: 40px;
	padding-bottom: 50px;
	font-size: 12px;
	font-family: "微软雅黑";
	line-height: 30px;	
}

/*缩写后*/

#box p{
	border-top: 0;
	padding:40px 20px 50px 10px;
	font:12px/40px "微软雅黑";
}

简写font属性需要注意以下几点：

按照font-style font-variant font-weight font-size/line-height font-family顺序来写；
先写字体大小在写字体样式；
font-size/line-height作为一组使用，中间用斜杠区分；
多个值之间用空格分开；
多个字体之间用逗号分开

3.连字符CSS选择器命名规范

1）长名称或词组可以使用中横线来为选择器命名。
2）下划线 ’ _’ 禁止出现在class命名中，全小写，统一使用 ‘-’ 连字符。原因如下：

浏览器兼容问题（比如使用_tips的选择器命名，在IE6是无效的）
能良好区分JavaScript变量命名（JS变量命名是用“_”）

#box-text{
    //....
}

4.不要随意使用Id

id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。

5.一律小写

不要使用驼峰命名法，例如：className,长名称用中横线连接

（三）命名规范

页面结构

功能

---------------------------------------------------------------------------------------------------------------------------------以上内容为学习记录及个人见解，若有不足之处，还望不吝指正

自求多芙

关注

27
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
HTML页面编写规范(一)

- 文档类型，告诉浏览器这是一个HTML5文档 -->-- lang="en"表示文档的主要语言是英文 -->-- 标签包含了文档的元信息，比如字符编码、视口设置、标题等。-->-- 文档的字符编码为UTF-8 -->-- 告诉Internet Explorer浏览器使用其最高版本模式来渲染页面。这通常用于确保页面在旧版IE浏览器上也能以最新标准来显示。-->-- 它应该是用来设置视口（viewport）的属性，使得页面能在不同设备上正确显示。() -->
复制链接

扫一扫