html编写规范
今天我为大家介绍一下html的基本知识。
什么是html
html指的是超文本标记语言(Hyper Text Markup Language),它包含一系列的标签,我们把这些标签叫做HTML标签,它是HTML语言中最基本的单位、最重要的组成部分。html是用来描述网页的一种语言。
上面是一个基本的html代码文件,下面我们来看看其具体含义。
html属性
DOCTYPE标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档。
意思是文档种类为超文本标记性语言或超文本链接标示语言。声明必须是 HTML 文档的第一行,位于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
lang
强烈建议为根元素指定属性,从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音,有助于翻译工具确定其翻译时所应遵守的规则等等。
简体中文页面:
英语页面:
title
网页标题。
meta
META标签是HTML标记HEAD区的一个关键标签,提供文档字符集、使用语言、作者等基本信息,以及对关键词和网页等级的设定等,最大的作用是能够做搜索引擎优化(SEO)。
1. charset
2. http-equiv
相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助浏览器正确地显示网页内容。
X-UA-Compatible IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式,以此来解决部分兼容问题。
以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame.
3. name
name属性主要用于描述网页,比如网页的关键词,叙述等。与之对应的属性值为content,content中的内容是对name填入类型的具体描述,便于搜索引擎抓取。
a. renderer
b. viewport
4. 移动端配置
5. 图标设置
6. description、keywords
编码规范
不管有多少人参与同一个项目,一定要确保每一行代码都像是同一个人编写的。
这就需要在一个项目中,我们永远遵循同一套编码规范。在项目开发前,制定一套行之有效的编码规范,每个项目组成员都要按这个规范来编码。
块级元素和行内元素
说到代码规范,我先来说说html的块级元素和行内元素。
行内、块状元素区别:
(1).块级元素会独占一行,其宽度自动填满其父元素宽度;行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化。
(2).一般情况下,块级元素可以设置 width, height属性;行内元素设置width,height无效(注意:块级元素即使设置了宽度,仍然是独占一行的);
(3).块级元素可以设置margin 和 padding;行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。(水平方向有效,竖直方向无效);
块级元素和行内元素有哪些,我就不在这一一说明。
块级元素和行内元素间如何相互转化,大家可以思考一下。
规范
1. 标签以及标签属性小写。
2. 可省略的闭合标签不省略,自闭合的标签可不写结束斜线。
3. 嵌套的标签必须被正确的嵌套,嵌套的子元素有一格的缩进。
4. 使用2个空格进行缩进。
5. 有良好的注释规范,针对页面模块有简要的注释,便于维护。
6. 尽量使用语义化的标签,例如header,footer,nav,article,filedset,section等,避免全页使用div布局。
7. 尽量减少标签嵌套。
8. 尽量减少classname,采用语义化标签来代替。
9. 属性值使用双引号,不要使用单引号。
10. 属性的使用顺序 class id name data- src for type href title alt aria role。
11. 布尔型属性 不用赋值,有就是true,没有就是false。
12. 行内元素中不要嵌套块级元素,比如:。
13. 段落文字应该用,避免使用。
14. css、js尽量使用文件引入的形式,不要使用内联。
15. 使用link将css文件引入,并置于head中。使用script将js文件引入,并置于body底部。
今天就为大家介绍到这里,祝大家新年快乐!
- Golang语言之defer-再议
- HDUOJ------Lovekey
- 转-带交互的telnet小工具,golang版
- 需要了解的pssh(r11笔记第28天)
- 二分查找算法基本思想
- Flyod 算法(两两之间的最短路径)
- HDUOJ-4104 Discount
- HDUOJ-----1085Holding Bin-Laden Captive!
- HDUOJ-----1098 Ignatius's puzzle
- 转--shell脚本备份mysql数据库
- NYOJ——————数的长度(斯特林公式的应用)
- 关于ssh命令的几个使用小技巧(r11笔记第27天)
- Golang语言社区--消息触发服务器启动基础模块分享
- NYOJ------汉诺塔(一)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 【LeetCode】1518. 换酒问题
- OBS推流工具使用说明
- Python多进程
- app反编译遇到360加固,傻瓜式脱壳
- Java底层-本地接口(JNI)
- 如何从最坏、平均、最好的情况分析复杂度?
- 利用Python进行MR栅格数据处理
- 利用Sql处理MR栅格数据
- Netty组件之Channel注册
- 使用 kubeadm 安装单 master kubernetes 集群
- 垃圾回收算法(4)-复制算法
- Digital-Signature-Hijack:一款针对数字签名劫持的PowerShell脚本
- 使用TensorFlow物体检测模型、Python和OpenCV的社交距离检测器
- 基于OpenCV和Tensorflow的深蹲检测器
- BBPress未经身份验证的提权漏洞分析