HTML基础梳理

最新推荐文章于 2022-07-09 21:02:57 发布

qq_34401852

最新推荐文章于 2022-07-09 21:02:57 发布

阅读量169

点赞数

文章标签： HTML

web前端基础梳理专栏收录该内容

2 篇文章 1 订阅

订阅专栏

一、语义化标记的好处

HTML结构清晰
代码可读性较好
无障碍阅读
搜索引擎可以根据标签的语言确定上下文和权重问题
移动设备能够更完美的展现网页（对css支持较弱的设备）
便于团队维护和开发

二、HTML5新特性

    1. Doctype更简单<!DOCTYPE html>
    2. 简单的编码类型 <meta charset=”utf-8″ />
    3. 大小写都可 <input tYPe="text" name="" id="">
    4. 布尔值 <input type="radio" checked>
    5. 可以省略引号 <input type=radio>
    6. 可以进行省略的标签
     1）不允许写结束符的标签：area、basebr、col、command、embed、hr、img、input、keygen、link、meta、   param、source、track、wbr
     2）可以省略结束符的标签：li、dt、dd、p、rt、optgroup、option、colgroup、thread、tbody、tr、td、th
     3）可以完全省略的标签：html、head、body、colgroup、tbody

三、版本与规格

HTML使用<!DOCTYPE >来声明其版本及规格。

DTD是通用标记语言SGML用于定义文档遵循何种标准的一套语法规则，HTML4.01基于SGML，因此HTML4.01也引入了DTD的声明方式，一共有三种模式：

Strict：严格模式，不允许样式标记和框架集

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Transitional：松散（混合、过渡）模式，允许样式标记，不允许框架集

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Frameset：框架集模式，允许样式标记和框架集

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML5不基于SGML，因此没有引入DTD，也只有一种声明：

<!DOCTYPE html>

四、标签

图例：H5元素；替换元素 *；行内元素

注：仅包含所有H5支持的标签。

从CSS的角度看，替换元素是一种内容样式在CSS控制范围之外的元素，它的内容是一个独立的外部对象。典型的替换元素有<img>, <object>, <video>，以及某些表单元素如<textarea>和<input>。有的元素如<audio>和<canvas>仅在某些情况下是替换元素。使用伪元素content属性插入的对象属于匿名替换元素。

分区
div	division分区	aside	侧栏
header	头部	footer	页脚
nav	导航	section	区域
article	文章

文本
abbr	abbreviation缩写	q	quotation短引用，自动加引号
strong	强调，加粗	bold	bold粗体
em	emphasized 斜体	i	italic斜体
samp	sample 示例文本	cite	引用
code	代码	var	varible变量
dfn	定义项	time	时间
kbd	keyboard键盘文本	sub/sup	上标/下标
del	deleted 删除文本	address	联系信息
ins	insert 插入文本，下划线	mark	标记文本，背景色
span	无语义	small	小号字
blockquote	块文本引用	h1~h6	标题
bdi	bidi isolate 方向隔离	bdo	bidi override 方向重置
p	paragraph 段落	pre	preformatted 预格式化文本

影音图像
img*	图片	audio	音频
source*	影音资源	track*	字幕轨道
canvas	画布	vedio	视频
figure	插图	figcaption	插图的标题
embed*	嵌套	object	对象
param*	parameter对象参数

列表
ol	有序列表	ul	无序列表
li	列表项	dl	自定义列表
dt	defined trem	dd	defined description

表格
table	表格	thead	表头
tbody	表格主体	tfoot	表尾
tr	table row 行	td	table data cell
th	table header cell

表单
form	表单	input*	输入型表单元素
textarea	文本域	select	选择框
option	下拉列表项	optgroup	下拉列表项分组
button	自定义按钮	label	标签
fieldset	用于表单元素分组	legend	为fieldset添加标题
datalist	input选填项	keygen*	key generator密匙
output	输出

其他网页元件
a	anchor 锚	wbr*	单词换行
hr*	horizontal rule 水平尺	br	break 换行
meter	比例条	progress	进度条
rp,rt,ruby	用于东亚字符	command	仅IE支持
map	图像映射	area*	图像映射区域
details	详细信息	summary	详细信息的标题
dialog	对话窗口与	menu	菜单
menuitem	菜单项