HTML基础

HTML 超文本标记语言

一、HTML语言的语法规范

HTML标签：<标签名> 不同的标签在网页中的功能不同

单标签：<meta /> <br /> 不需要封闭标记，里面不能包含内容

双标签：<b></b> <p></p> 需要封闭标记，里面可包含内容

特点：双标签必须封闭，否则代码会出错。

HTML属性属性名="属性值" 不同的HTML标记有不同的属性

通用属性：id、title、class、style

二、HTML文档结构

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<br/> 强制换行

<nobr>强制不换行</nobr>

<hn></hn> n=1-6，六级标题字

<p></p>段落标记多用于制作正文

<hr/> 水平线

<pre></pre> 预格式化，让网页内容显示与源代码一致

<b></b>、i、s、u…… XHTML不推荐

strong em XHTML推荐

sub 下标 sup 上标

转义字符在页面中显示特殊字符

空格： 

</body>

</html>

三、HTML标签分两种：

（1）区块标记（元素）：hn、p、hr、pre

特点：独占一行，会自动换行

（2）行内标记（元素）：b、i、s、u、em、strong

特点：不换行，一行里可以有多个行内元素

分区标记：div 块分区标记

span 行内分区标记

四、路径：URL 统一资源定位器

（1）相对路径：从文件当前所在位置出发，找到目标文件的路径

目标文件与文件在同一目录：xxx.jpg

目标文件在子目录：子目录名/xxx.jpg

目标文件在向上一级目录：../../xxx.jpg

（2）绝对路径：http://www.sohu.com/image/page/xxx.jpg

协议名主机名目录结构文件名

用于指向另一台主机上的文件

五、img标签

必备属性：src 图片路径

width height title alt

六、a标签

用href指定链接的目标

链接目标可以是绝对路径、相对路径、#、javascript

链接目标浏览器窗口：target

target="_blank" 在新窗口打开链接

target="_self" 在当前窗口打开链接（默认）

_top、_parent 在框架页面中使用

锚点链接: href="#name" 或 href="#ID名"

可指向命名锚记或是ID。

七、表格：table

属性：border 边框宽度

bordercolor 边框色

bgcolor 背景色

background 背景图

cellspacing 边框与边框的间距（间距）

cellpadding 边框与内容的距离（边距）

align 表格水平居于浏览器左/中/右

tr 单元行

属性： align 内容水平对齐

valign 内容垂直对齐

height 高度

td 单元格

属性：align 内容水平对齐

valign、width、height、bordercolor

bgcolor、background

colspan 跨列

rowspan 跨行

caption 表格标题属于table的子元素

行分组标记： thead tbody tfoot

作用：给tr分组。管理好我们的tr。会影响tr的高度

八、ol 有序列表

type（1、A、a、I、i）、start

ul 无序列表

type（disk、circle、square）

（1）li 定义列表项

（2）列表可以嵌套。

（3）ol嵌套时，列表编号不会发生样式改变

（4）ul嵌套时，列表编号会分别变成disk、circle和square

（5）dl 定义列表 dt代表定义标题 dd代表定义的解释

（6）在项目中，ul及dl用的频率较高。

（7）ul多用于制作一组多个并列关系的内容

（8）dl多用于制作有层级关系的、有关联的内容

九、HTML5结构标记：

十、表单

用form定义表单，提交时是以form为单位提交

input name 提交必需。无name的元素在提交时会被忽略

type定义input的功能

（1）文本框类：

text 普通文本框（默认）

password 密码框

value 文本框的默认值

size 文本框宽度（单位：字符）

maxlength 文本框最大字符数（单位：字符）

readonly 只读 disabled 禁用

required 必须填写（有兼容性问题）

（2）按钮类：

submit 提交按钮

reset 重置按钮

button 普通按钮

value 按钮上的文字

（3）选择框类：

radio 单选框

checkbox 多选框

name定义选择框的组名

value来定义选择框对应的选项值

checked 定义默认状态已勾选

file 文件域点击后可打开浏览文件的对话框，上传附件用

（4）下拉框：select <select></select>

option 定义菜单项

value定义option对应的选项值

selected定义默认选中

size 定义select的行数。

可将单行的下拉菜单变成多行菜单

multiple 允许多选，仅适用于多行菜单

（5）textarea 文本域多行文本框

<textarea>文本域的默认值</textarea>

name、cols 列数（宽）、rows 行数（高）

（6）label 文本标签

可以用for属性与元素的ID进行绑定。

绑定后，点击label可实现与点击表单元素一样的效果。

*fieldset 控件分组标记

表单控件具体内容

</fieldset>

十一、其它HTML标记

（1） <details>

</details>

摘要与细节，仅chrome支持。

（2） <iframe></iframe> 浮动框架

用src属性定义要嵌入到框架中的网页的路径

width、height、scrolling="no" 隐藏滚动条

frameborder="0" 隐藏框架边框

（3）<meter></meter>

max 最大值

min 最小值

value 当前值

title 鼠标指上去的提示

（4）<time></time>定义时间

（5）<mark></mark> 让文字高亮显示