摘要：站点前端开发文档原文元素原文语义化标签元素元素分类块级元素自身属性为的元素，通常使用块级元素进行布局结构的搭建。可以和，，等其他标签结合使用，表示文档结构。表示标签内容之外的，与标签内容相关的辅助信息，元素被用于无关内容。
站点：前端开发文档HTML元素 元素分类
原文：HTML元素
原文：语义化标签
块级元素： div、h1-h6、hr、menu、ol、ul、li、dl、dt、dd、table、p、form
自身属性为display: block;的元素，通常使用块级元素进行布局（结构）的搭建。
块级元素的特点
独占一行
从上到下依次排列
直接控制宽度、高度以及盒子模型的相关CSS属性
不设置宽度，块级元素的宽度是它的父元素内容的宽度，高度是自身内容的高度
可以嵌套行内元素
ul/ol下面只能是li，dl下面只能是dt dd；p不能包含其他块级元素包括自身
内联元素：span、a、strong、i、em，s、u，textarea、input、select，label、img、sup，sub
自身属性为display: inline;的元素，通常使用行内元素进行文字、小图标（小结构）的搭建。
内联元素的特点
不独占一行，和其他内联元素从左到右在一行显示
不能直接控制宽度、高度以及盒子模型的相关CSS属性，可以直接设置内外边距的左右值
宽高由自身内容的大小决定（文字、图片等）
只能容纳文本或其他内联元素（不能在内联元素中嵌套块级元素）
CSS外链引入方式
link是html标签，@import是css提供的方式，写在css文件或style标签中。
加载顺序有区别，当一个页面被加载时，link引用的css文件会被同时加载，而@import引入的css文件会等页面全部下载完成后再加载。
使用js控制DOM改变CSS样式，只能使用link标签，因为import不能被DOM控制。
CSS命名规范
头部：header
内容：content/container
尾部：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登陆条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
投票：vote
合作伙伴：partner
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：register
状态：status
语义化标签尽量减少使用无意义标签，如span和div
尽量不使用标签本身的CSS属性，如b、font、s
需要强调的部分，使用strong、em
表格搭建时，使用表格头部、表格主体、表格尾部
列表搭建时，使用无序列表、
有序列表、
定义列表
section：划分网页，表示页面中的一个内容区块，比如章节、页眉、页脚或页面其它部分。可以和h1，h2，h3...等其他标签结合使用，表示文档结构。
hgroup：对整个页面/页面中的一个内容区块的标题进行组合。
header：一个内容区块或整个页面的头部部分。
footer：整个页面或页面区块的尾部。
nav：页面中导航连接的部分。
article：独立于内容其余部分的完整独立内容块。article元素专门为摘要设计。
aside：表示article标签内容之外的，与article标签内容相关的辅助信息，aside元素被用于无关内容。
应该与主内容分开的内容
aside元素中的内容可以被独立开来而不会影响文档或section中主内容的含义
可以用在主要内容相关的引用，如侧边栏、广告、nav元素组等
aside的内容如果被删除，剩下的内容仍然很合理
figure：表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元（figure元素经常用于图片）
figcaption：
一个图例的说明
figure元素的一个标题或相关解释
使用figcaption时，最好是figure块的第一个或最后一个元素
新增标签的兼容问题
HTML5语义化标签在IE6-8下，默认当成行内元素展示。
通过引入js解决IE9以下新增标签的兼容问题
Forms
新增input元素的种类：
search：搜索输入框
tel：电话号码输入框
url：输入URL地址
email：邮件输入框
number：数字输入框
rang：特定范围内的数值选择器
color：颜色选择器 只在Opera和Blackberry浏览器
datetime：显示完整日期和时间 UTC标准时间
datetime-local：显示完整日期和时间
time：显示时间
month：显示月份
week：显示周
表单新特性：
placeholder：输入框占位符，用作输入提示
autocomplete：是否保存用户输入值，默认为on，关闭为off
autofocus：自动聚焦
required：此项必填，不能为空
pattern：正则验证 pattern="d{1,5}"
form：加上form属性，表单元素可以放在页面的任意位置
formnovalidate/novalidate：
表示不需要验证表单，直接提交（novalidate用户form标签）
formnovalidate用于submit类型的提交按钮
表单验证
validity对象，通过下面的valid可以查看验证是否通过
oText.addEventListener("invalid"fn1,false);
valid：验证不通过时返回false
valueMissing：输入值为空时
typeMismatch：控件值与预期类型不匹配
patternMismatch：输入值不满足pattern正则
customError：不符合自定义验证
setCustomValidity();自定义验证
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/53876.html
摘要：下面是一个使用标签的网站头部实例信息科技有限公司需要注意的是，一个文档中可以包含一对或者一对以上的标签。示例如下版权所有信息科技有限公司五表示包含于一个文档页面应用程序或网站中的一段独立的内容，可以被独立的发布或者重新使用文章标记标签。 一、为什么HTML5要引入新语义标签 在HTML5出现之前，我们一般采用DIV+CSS布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰，...
摘要：为什么会有语义化标签在出现之前，我们一般采用布局页面。为了解决上述缺点，新增了很多新的语义化标签。 为什么会有h5 语义化标签 在HTML5出现之前，我们一般采用DIV+CSS布局页面。但是这样的布局方式不仅使我们的文档结构不够清晰，而且不利于搜索引擎爬虫对我们页面的爬取。为了解决上述缺点，HTML5新增了很多新的语义化标签。 语义标签的概念 维基百科 语义化是前端开发里面的一个专用术...
摘要：的一些规则新特性应该基于以及。将支持某些特性。作用声明帮助浏览器正确地显示网页。标签位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的名称值对。每个列表项始于标签。第二天：给自己做一个在线简历吧 最后的验证，提出了几个问题，尝试解答一下 HTML是什么，HTML5是什么 HTML的定义摘抄自w3school的HTML 简介 HTML 是用来描述网页的一种语言。 HTML 指...
摘要：什么是语义化说语义化就要先说说到底负责的什么下面摘自维基百科超文本标记语言英语，简称是一种用于创建网页的标准标记语言。常用的一些语义化标签，作为标题使用，并且依据重要性递减，是最高的等级。 什么是HTML语义化 说HTML语义化就要先说说HTML到底负责的什么？下面摘自维基百科： 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网...
摘要：什么是语义化说语义化就要先说说到底负责的什么下面摘自维基百科超文本标记语言英语，简称是一种用于创建网页的标准标记语言。常用的一些语义化标签，作为标题使用，并且依据重要性递减，是最高的等级。 什么是HTML语义化 说HTML语义化就要先说说HTML到底负责的什么？下面摘自维基百科： 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网...
阅读 3438·2021-11-23 09:51
阅读 3062·2021-11-15 11:37
阅读 1425·2021-10-22 09:53
阅读 1207·2021-10-09 09:56
阅读 690·2019-08-30 13:47
阅读 1991·2019-08-30 12:55
阅读 1432·2019-08-30 12:46
阅读 936·2019-08-30 10:51
