站点: 前端开发文档
原文: HTML元素
原文: 语义化标签
块级元素: div
、h1-h6
、hr
、menu
、ol
、ul
、li
、dl
、dt
、dd
、table
、p
、form
css
display: block;
的元素,一般使用块级元素进行布局(结构)的搭建。块级元素的特色html
ul/ol
下面只能是li
,dl
下面只能是dt dd
;p
不能包含其余块级元素包括自身内联元素:span
、a
、strong
、i
、em
,s
、u
,textarea
、input
、select
,label
、img
、sup
,sub
前端
display: inline;
的元素,一般使用行内元素进行文字、小图标(小结构)的搭建。内联元素的特色git
CSS外链引入方式github
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
b
、font
、s
strong
、em
<thead>
表格头部</thead>
、<tbody>
表格主体</tbody>
、<tfoot>
表格尾部</tfoot>
<ul>
无序列表</ul>
、<ol>
有序列表</ol>
、<dl>
定义列表</dl>
section
:划分网页,表示页面中的一个内容区块,好比章节、页眉、页脚或页面其它部分。能够和h1,h2,h3...
等其余标签结合使用,表示文档结构。hgroup
:对整个页面/页面中的一个内容区块的标题进行组合。header
:一个内容区块或整个页面的头部部分。footer
:整个页面或页面区块的尾部。nav
:页面中导航链接的部分。article
:独立于内容其他部分的完整独立内容块。article
元素专门为摘要设计。aside
:表示article
标签内容以外的,与article
标签内容相关的辅助信息,aside
元素被用于无关内容。app
aside
元素中的内容能够被独立开来而不会影响文档或section
中主内容的含义nav
元素组等aside
的内容若是被删除,剩下的内容仍然很合理figure
:表示一段独立的流内容,通常表示文档主体流内容中的一个独立单元(figure
元素常常用于图片)figcaption
:frontend
figure
元素的一个标题或相关解释figcaption
时,最好是figure
块的第一个或最后一个元素新增标签的兼容问题ide
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();
自定义验证