HTML笔记
2017-02-23 21:53
369 查看
一 HTML 基本元素
基本结构
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312” />
<title>这是标题</title>
</head>
<body>
HTML 文档正文内容
</body>
</html>
一 头部元素 head
作用范围整篇文档。包含以下元素：
1 标题: <title>...</title>
2 基本设置: <base href=”http://www.baidu.com” target=”_blank”/> 用来定
义相对路径的根目录
3 元信息: <meta http-equiv=”Content-Type” content=”text/html; charset=文
字编码” >
<meta name=”keywords” content=”关键字 1,关键字 2”>
<meta name=”description” content=”简介”>
<meta name=”Copyright” content=”版权”>
<meta name=”author” content=”作者”>
4 样式 style ：例：<style type=”text/css”>
#div table tr td{
text-align:center;（把所有表格内数据居中了）
}
</style>
5 链接 link：调用其它文档内容
6 脚本 script : 也能放在<body>内
二 主体元素 body
<body bgcolor=” 背 景 色 ”
background=” 背 景 图 ” text=” 文 字 颜 色 ”
link=”blue” alink=”red” vlink=”red”（三种链接颜色） leftmargin=”” topmargin=””
（页面与浏览器之间距离）>...</body>
三 内容
1 注释 ： <!-- ...-->
2 标题 ： <h1>...</h1> 从 1 到 6，由大到小。
3 字体 ： <font face=”字体” size=”字号” color=”颜色”>...</font>
4 格式化：<strong>加强 <b>加粗
<i> <em> <cite> 斜体
<sup> 上标 <sub> 下标
<big> 加大 <small> 缩小
<u> 下划线
5 段落： <p>段落 <br>换行
6 图像：
格式包括 PNG,GIF,JPEG
<img src=”图像文件的路径” alt=”加载失败” title=”鼠标悬停显示文本”
width=”图像的宽度” height=”图像的高度” border=”图像边框的宽度” align=”水平
对齐方式” hspace=”水平边距”>
7 超链接：
可设置任意文字或任意位置的图片
① <a href=”绝对路径或相对路径” target=”目标窗口的打开方式（一般用
_blank 或_self）” accesskey=”键盘上的键值（同时按 ALT 和定义的热键激活，按
ENTER 打开）” tabindex=”激活顺序数字值（数字小的优先，没有值得排最
后）” >...</a>
② 页面中的超链接：
同页跳转<a href=”#锚点的名称”>...</a> 需要和<p id=”锚点的名称”>...</p>
配合使用；
跨页跳转<a href=”路径.html#锚点的名称”>...其他一样。
③ 图像中的超链接
(1)图像整体：<a href=”链接路径”><img src=”图片路径” alt=”图片说
明”>...</a>
(2)图像局部：
<img src=”图片路径” usermap=”#map 中定义的 name 或 id”>
<map name=”名称” id=”标记”>
<area sharp=”形状” coords=”区域坐标组” href=”链接路径”
alt=”文本说明” target=”链接目标窗口”/>
</map>
附： sharp 取值
circle 圆
对应 coords 值
x,y,r
coly 多边形
rect 矩形
x1,y1,x2,y2,...每个顶点坐标
x1,y1,x2,y2 左上角、右下角
坐标
二 HTML 表格
基本结构
<table>
<tr>
<td>单元格内容</td>
</tr>
</table>
一 表格构成
1 定义表格：<table>...</table>
2 行：<tr>...</tr>
3 单元格：<td>...</td>
4 标题：<caption>...</caption> 指定唯一标题。在<table>下<tr>上。
5 头部：<th>...</th> 定义表头。一般在第一行第一列，在<tr>替代<td>。
6 定义表首：<thead >...</thead> 在<table>里唯一。包住<th>。
7 定义表尾：<tfoot>...</tfoot> 类似 Word 中的页脚。
8 表体：<tbody>...</tbody> 将表格内容分割成各个独立部分，在每个独立
的部分定义特定的表现效果。
二 表格属性
< table width=”表格宽” height=”表格高” align=”对齐方式” bgcolor=”背景色”
background=”背景图片路径” border=”表格边框值” bordercolor=”边框颜色”
bordercolorlight=”边框亮边线（影响左、顶的边线）” bordercolordark=”边框暗边
线（影响右、底的边线）” cellspacing=”每个单元格之间的间距值” cellpadding=”
各个单元格与其中的内容之间的间距值” frame=”具体显示哪条表格外边框（和
border 一起使用，常用取值：box 显示所有、void 不显示边框）”
rules=”单元
格之间的边框显示方式（和 border 一起使用，常用取值：all 显示所有、none 不
显示边框）”
三 行属性
<tr height=”” align=”” valign=”” bgcolor=”” bordercolor=”” bordercolorlight=””
bprdercolordark=””>...</tr>
四 格属性
<td
width=”” height=”” align=”” valign=”” bgcolor=”” background=””
bordercolor=”” bordercolorlight=””
rowspan=”合并行” >...</td>
注意：小单位的属性能覆盖大单位的
bordercolordark=””
colspan=” 合 并 列 ”
三 HTML 表单
基本结构
<form>表单控件和其他常规元素</form>
一 表单属性
<form action=”处理表单的程序的路径” method=”向服务器发送数据的方
式（包括 post 和 get 两种）” name=”标记某个表单，方便程序处理（id 也能替
代）” enctype=”对发送前的数据编码” target=”目标窗口打开方式”>...</form>
注意：name 相当于名字，id 相当于身份证号。id 是后来出现的，具有唯一
性。
二 控件
1
文本框：<input name=”控件名称” type=”text” value=”默认取值”
size=”控件长度” maxlength=”最大字符数”/>
2 密码：<input name=”控件名称” type=”password” value=”默认取值”
size=”控件长度” maxlength=”最大字符数”/>
3
单选：<input name=”控件名称” type=”radio” value=”默认取值”
checked（设置该属性时，单选按钮以选中状态显示）/>
4 复选：<input name=”控件名称” type=”checkbox” value=”默认取值”
checked（同上）/>
5 提交：<input name=”控件名称” type=”submit” value=”按钮的字”/>
6 重置：<input name=”控件名称” type=”reset” value=”按钮的字”/>
7 图像：<input name=”控件名称” type=”image” src=”图像路径”/>
8 隐藏域：<input name=”控件名称” type=”hidden” value=”隐藏域的取
值”/>
9
文 件 ： <input name=” 控 件 名 称 ” type=”file” size=” 控 件 长 度 ”
maxlength=”最大字符数”
为 multipart/form-data）/>
（要上传，表单的 enctype 属性必须
三 文本
<textarea name=”名称” cols=”列数” rows=”行数”></textarea>
四 选择
<select name=”下拉菜单名称” size=”下拉出的文本行数目” multiple（多选）>
<option value=”选项值” selected（同 checked）>选择列表内容</option>
</select>
四 HTML 框架
一 使用<frameset>框架实现多窗口页面
它写在<body>外面。
步骤：
1 如下写好框架
实例：<frameset cols=”25%,50%” border=”5”>
<frame src=”….html” name=””>
……
</frameset>
注意：cols 和 rows 与<table>里的同理，它们不能同时出现在一条标
签里。但 这个是分割，<table>里的是合并。
2 给需要实现跳转的页面设置 name。
3 在导航页里，设置链接：
<a href=” 目 的 地 页 面 ” target=” 要 实 现 跳 转 的 页 面 的
name”>...</a>
二 使用<iframe/>内嵌复用页面
它写在<body>里面。
格式：
<iframe
src=” 引 用 页 面 的 地 址 ” width=”” height=”” name=””
frameborder=”边框（可有可无）” scrolling=”滚动条（no 的话页面会被截断）”/>
五 课堂笔记
1 常用的 4 种块状结构：div-ul(ol)-li 用于分类导航和菜单
div-dl-dt-dd 用于图文混编
table-tr-td 用于图文布局或显示数据
form-table-tr-td 用于布局表单
2 w3c 的基本规范：内容（结构）和表现（样式）分离；
HTML 内容结构要求语义化。
3 HTML 基本规范：标签名和属性名闭合；
属性值用引号括起来；
标签正确嵌套；
添加文档类型声明。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 