HTML

前端

一、基础

1. 语法格式

<标签>...</标签>
<标签 属性1="参数1" 属性2="参数2">
    ...
</标签>
<标签 属性1="参数1" 属性2="参数2" />
<!-- 注释内容 -->

• 源代码不分大小写；
• 标签外的回车、空格不起作用；

2. 嵌套规则：某些标签下只允许特定的标签存在

1. 内联元素不能包含块级元素；
2. 内联元素与内联元素并列，块级元素与块级元素并列；
3. <h1>~<h6>、<p>、<dt>不能包含块级元素；
4. <li>内可以包含<div>；
5. <blockquote>使用时必须在里面加<p>后再引用；

3. 其它概念

1. DOM：文档对象模型，树状图；
2. API：应用编程接口，如画布、地理定位、表单、视音频等；
3. MIME类型：资源的唯一本质，如Content-Type: text/html, image/jpeg, application/xhtml+xml；
4. XHTML严格语法：空标签：<img />、<meta… />、<link … />、<br />；属性值严格加""；以id代替name (form中的除外)；无属性值的标签以自身代替属性值 (e.g. noshade="noshade")。

二、语法手册

标签手册、标签文档兼容

0. 头信息Meta

<!-- meta中加入搜索引擎关键字及网页描述-->
<meta name="keywords" content="关键词1 关键词2 …" />
<meta name="description" content="网页描述" />
<!-- 使网页被搜索引擎忽略（不一定对所有引擎奏效）-->
<meta name="robots" content="noindex, nofollow" />

1. 体body

网页背景色bgcolor=颜色代码
背景图片background=图片的相对链接
文字颜色text
链接属性link link（链接颜色）；alink（正在访问的链接颜色）；vlink（访问后的链接颜色）
边距margin topmargin leftmargin

2. 字体font

大小size
字体face=字体名称
颜色color

• 加大big、缩小small；
• 加粗b或strong；
• 斜体i或em或cite；
• 上标sup、下标sub；
• 删除线s或strike；
• 下划线u或ins；
• 文字闪烁blink；
• 等宽文字（常用于英语）code或samp；

3. 段落p

对齐方式align=left, right, center, justify（两端对齐）
文字方向bdo dir=ltr, rtl

• 换行br
• 不换行nobr
• 水平线hr width= size= color= align= noshade（无阴影）
• 预定义格式pre（以原始格式显示）；
• 引用：短引用q、长引用blockquote cite=路径；

4. 滚动效果marquee（已不推荐使用）

方向direction=up, down, left, right
方式behavior=scroll（循环）, slide（只一次）, alternate（来回交替）
次数loop
速度scrollamount=数字（像素）
延迟scrolldelay=数字（毫秒）
区域背景色bgcolor
区域尺寸width height
空白空间hspace vspace=数字（像素）

5. 列表

• 无序列表ul>li：类型type=disc, circle, square；
• 有序列表ol>li：类型type=1, a, A, i, I；起始数值start=数字；
• 定义列表dl>(dt(定义条件) + dd(定义描述))；
• 菜单列表menu>li；
• 目录列表dir>li；

6. 多媒体

• 图片img：源文件src，提示文字alt，边框border，对齐方式align=bottom, top, middle, left, right, abs bottom, abs middle, baseline, texttop；
• 音乐bgsound：播放次数loop；
• 多媒体对象embed（或者object，但部分浏览器不支持）：自动运行autostart，播放次数loop，隐藏面板hidden；

7. 超链接a

链接地址href
链接命名name
提示文字title
链接目标窗口target：当前页面打开链接_self，新窗口打开链接_blank，顶层框架中打开链接_top，当前框架上一层打开链接_parent
链接热键accesskey
锚点：页内锚点<a href="#数字或英文">锚点名称</a>→<a name="数字或英文">链接内容</a>，页外锚点<a href="链接地址#数字或英文">锚点名称</a>；

8. 表格table

• 行tr;
• 表头th；
• 表格元素td（表格元素内可再嵌套table）:多行跨越rowspan=数字（跨的行数），多列跨越colspan=数字（跨的列数）；

9. 表单form（建议与表格联用）

表单链接action
发送方式method=POST（用户不可见，隐藏后台形式发送，大小无限，隐私性强，不重复提交）或GET（用户可见，附加与URL末端发送，大小受限，重复提交）

• 输入文本框input（空标签）：输入形式type=text，输入框名称name=自定义
  提交按钮input（空标签），按钮值type=submit，按钮名称value=自定义；
• 输入单选框input（空标签）：输入形式type=radio，输入框名称name=自定义，输入值名称value=自定义，默认已选状态checked="checked"；
• 输入复选框input（空标签）：输入形式type=checkbox，输入框名称name=自定义，输入值名称value=自定义；
• 输入密码input（空标签，可隐藏输入文字）：输入形式type=password，输入名称name=自定义；
• 提交文件input：输入名称type=file；
• 文本区textarea：文本区名称name=自定义，文本区高度rows=数字，文本区宽度cols=数字，字数限制maxlength=数字；
• 选择列表select（需加name属性，再加multiple=multiple可实现多选）：下拉菜单子项option（需加value属性）；
• 标签元素label（可应用于所有表单元素，便于CSS样式化，但应在应用的表单元素中加入id=自定义名称）：指向for=自定义名称，即与之绑定的id值
  表单元素组合fieldset，组合名称legend‘

10. 热点区域链接

<img src="" usemap="#name" />
<map name="name">
    <area shape="" coords="" href="" />
    <area shape="" coords="" href="" />
</map>

shape属性值：rect/circle/poly；
coords属性值：矩形：四个数字（左上左上右下右下）；圆形：三个数字（圆心圆心半径）；多边形：多个（每一转折点依序填入）；

11. 框架结构（已不推荐使用）

• 框架集frameset：水平分割rows=数字,数字（表高度，px/%），垂直分割cols=数字,数字（表宽度，px/%），嵌套分割rows+cols，边框位置frameborder=0,no（表边框隐藏）,1,yes（表边框显示），边框宽度framespacing=数字px，边框颜色bordercolor==；
• 框架frame：源文件src，名称name，窗口尺寸noresize，水平边框marginwidth，垂直边框marginheight，滚动条scroll=yes,no,auto；
• 不支持框架标记noframes（针对不支持框架的浏览器）
• 浮动边框iframe：源文件src，宽度width，高度height，对齐方式align=left,right,bottom,middle，水平边距marginwidth，垂直边距marginheight，滚动条scroll，边框位置frameborder；

附：参考

HTML参考手册-W3school
HTML参考手册-菜鸟手册