HTML 超文本标记语言
一、HTML语言的语法规范
HTML标签:<标签名> 不同的标签在网页中的功能不同
单标签:<meta /> <br /> 不需要封闭标记,里面不能包含内容
双标签:<b></b> <p></p> 需要封闭标记,里面可包含内容
特点:双标签必须封闭,否则代码会出错。
<h1 align="center">这是标题1</h1>
HTML属性 属性名="属性值" 不同的HTML标记有不同的属性
通用属性:id、title、class、style
二、HTML文档结构
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</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 上标
转义字符 在页面中显示特殊字符
<DAY 01> <DAY 01>
空格:
</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结构标记:
<header></header>
<nav></nav>
<section></section>
<aside></aside>
<article></article>
<footer></footer>
十、表单
用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 定义菜单项
<option>菜单项目</option>
value定义option对应的选项值
selected定义默认选中
size 定义select的行数。
可将单行的下拉菜单变成多行菜单
multiple 允许多选,仅适用于多行菜单
(5)textarea 文本域 多行文本框
<textarea>文本域的默认值</textarea>
name、cols 列数(宽)、rows 行数(高)
(6)label 文本标签
可以用for属性与元素的ID进行绑定。
绑定后,点击label可实现与点击表单元素一样的效果。
*fieldset 控件分组标记
<fieldset>
<legend>分组标题</legent>
表单控件具体内容
</fieldset>
十一、其它HTML标记
(1) <details>
<summary>摘要</summary>
</details>
摘要与细节,仅chrome支持。
(2) <iframe></iframe> 浮动框架
用src属性定义要嵌入到框架中的网页的路径
width、height、scrolling="no" 隐藏滚动条
frameborder="0" 隐藏框架边框
(3)<meter></meter>
max 最大值
min 最小值
value 当前值
title 鼠标指上去的提示
(4)<time></time>定义时间
<time datetime="2012-1-12T12:00"></time>
(5)<mark></mark> 让文字高亮显示