HTML
前端
一、基础
1. 语法格式
<标签>...</标签>
<标签 属性1="参数1" 属性2="参数2">
...
</标签>
<标签 属性1="参数1" 属性2="参数2" />
<!-- 注释内容 -->
2. 嵌套规则:某些标签下只允许特定的标签存在
- 内联元素不能包含块级元素;
- 内联元素与内联元素并列,块级元素与块级元素并列;
<h1>
~<h6>
、<p>
、<dt>
不能包含块级元素;
<li>
内可以包含<div>
;
<blockquote>
使用时必须在里面加<p>
后再引用;
3. 其它概念
- DOM:文档对象模型,树状图;
- API:应用编程接口,如画布、地理定位、表单、视音频等;
- MIME类型:资源的唯一本质,如Content-Type: text/html, image/jpeg, application/xhtml+xml;
- XHTML严格语法:空标签:
<img />
、<meta… />
、<link … />
、<br />
;属性值严格加""
;以id代替name (form中的除外);无属性值的标签以自身代替属性值 (e.g. noshade="noshade")。
二、语法手册
<!-- 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=数字(跨的列数);
表单链接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参考手册-菜鸟手册