目录
1.1 标题标签 <h1></h1> <h2></h2> <h3></h3> 2
1.5 字体样式标签 加粗《strong》《/strong》斜体 《em》 《/em》 3
1.8.2 创建跳转链接 <a href =”链接”>文字</a> 4
2.3 定义列表《dl》 《dt》 《dd》《/dd》《/dt》《/dl》 5
4.2.1 文本框 <input type="text" 8
4.2.2 密码框 <input type="password " 8
4.2.3 单选按钮 <input name="gen" type="radio" 8
4.2.4 复选框 <input type="checkbox" 9
4.2.5 列表框 <select name="列表名称" size="行数"> 9
4.2.6 按钮 <input type=”reset” 9
4.2.7 多行文本域 <textarea name=”showTExt” 10
4.2.8 文件域 <input type="file" name="files" /> 10
4.3.1 隐藏域 <input type=”hidden” values=”666” 10
4.3.2 只读和禁用 <input readonly="readonly"> 10
5.2.1 style标签<style type="text/css"> 11
5.6.7 背景样式 背景颜色： background-color 16
边框粗细 border-width thin medium thick 17
1标签
1.1 标题标签 <h1></h1> <h2></h2> <h3></h3>
1.2 段落标签 <p> </p>
1.3 换行标签 <br/>
1.4 水平线《hr》
1.5 字体样式标签 加粗《strong》《/strong》斜体《em》 《/em》
| 特殊符号 | 字符实体 | 示例 |
| 空格 |
| <a href="#">百度</a> | <a href="#">新浪</a> |
| 大于号(>) | > | 如果时间>晚上6点，就坐车回家 |
| 小于号(<) | < | 如果时间<早上7点，就走路去上学 |
| 引号(") | " | W3C规范中，HTML的属性值必须用成对的"引起来 |
| 版权符号@ | © | © 2003-2013北大青鸟 |
1.6 图像标签
1.7 链接标签
1.8 超链接
1.8.1 创建跳转标记
<a href =“#名字”>文字</a><a name=“名字”>文字</a>
1.8.2 创建跳转链接 <a href =”链接”>文字 </a>
2 列表
列表对比
| 类型 | 说明 | 项目符号 |
| 无序列表 | 以<ul>标签来实现 以<li>标签表示列表项 | 通过type属性设置项目符号 disc（默认）、square和circle |
| 有序列表 | 以<ol>标签来实现 以<li>标签表示列表项 | 通过type属性设置项目顺序 1(数字，默认)、A（大写字母）、a（小写字母）、I（大写罗马数字）和i（小写罗马数字） |
| 定义类表 | 以<dl>标签是实现 以<dt>标签定义列表项 以<dd>标签定义内容 | 无项目符号和显示顺序 |
2.1 无序列表《 ul》《li》《/li》《ul》
type取值：
| 取值 | 说明 |
| disc | 项目符号显示为实体圆心,默认值 |
| square | 项目符号显示为实体方心 |
| circle | 项目符号显示为空心圆 |
2.2 有序列表《ol》《li》《/li》《/ol》
type取值：
| 取值 | 说明 |
| 1 | 使用数字作为项目符号 |
| A/a | 使用大写/小写字母作为项目符号 |
| I/i | 使用大写/小写罗马数字作为项目符号 |
2.3 定义列表《dl》 《dt》 《dd》《/dd》《/dt》《/dl》
3 表格
3.1 表格基本语法
| 属性 | 值 | 说明 |
| align 水平对齐方式 | left | 左对齐 |
| center | 居中对齐 | |
| right | 右对齐 | |
| valign 垂直对齐方式 | top | 顶端对齐 |
| middle | 居中对齐 | |
| bottom | 底端对齐 | |
| baseline | 基线对齐 |
3.2 表格的跨行 列
4 表单
4.1 表单语法
4.2 表单元素格式
| 属性 | 说明 |
| type | 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text |
| name | 指定表单元素的名称。 |
| value | 元素的初始值。type 为 radio时必须指定一个值 |
| size | 指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位 |
| maxlength | type为text 或 password 时，输入的最大字符数 |
| checked | type为radio或checkbox时，指定按钮是否是被选中 |
4.2.1 文本框 <input type="text"
4.2.2 密码框 <input type="password "
4.2.3 单选按钮 <input name="gen" type="radio"
4.2.4 复选框 <input type="checkbox"
4.2.5 列表框 <select name="列表名称" size="行数">
4.2.6 按钮 <input type=”reset”
4.2.7 多行文本域 <textarea name=”showTExt”
4.2.8 文件域 <input type="file" name="files" />
4.3 表单的高级应用
4.3.1 隐藏域 <input type=”hidden” values=”666”
4.3.2 只读和禁用 <input readonly="readonly">
5 CSS语法
5.1 CSS基本语法结构
5.2 CSS标签
5.2.1 style标签<style type="text/css">
5.3 CSS选择器
5.3.1 标签选择器
5.3.2 类选择器
5.3.3 ID选择器
5.4 HTML中引入CSS样式
5.4.1 行内样式
<h1 style="color:red;">style属性的应用</h1>
5.4.2 内部样式表
CSS代码写在<head>的<style>标签中
优点：方便在同页面中修改样式
缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底
5.4.3 外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式
5.4.3.1 链接式
5.4.3.2 导入式
5.5 CSS的高级应用
5.5.1 CSS复合选择器
标签 和 类标签 等 混合
5.5.2 后代选择器
Div div 里面的相当于后代
5.5.3 交集选择器
标签.类标签 同时满足才可以
5.6 CSS设置
5.6.1 <span>标签
5.6.2 字体样式
| 属性名 | 含义 | 举例 |
| font-family | 设置字体类型 | font-family:"隶书"; |
| font-size | 设置字体大小 | font-size:12px; |
| font-style | 设置字体风格 | font-style:italic; |
| font-weight | 设置字体的粗细 | font-weight:bold; |
| font | 在一个声明中设置所有字体属性 | font:italic bold 36px "宋体"; |
5.6.3 文本属性
| 属性 | 含义 | 举例 |
| color | 设置文本颜色 | color:#00C; |
| text-align | 设置元素水平对齐方式 | text-align:right; |
| text-indent | 设置首行文本的缩进 | text-indent:20px; |
| line-height | 设置文本的行高 | line-height:25px; |
| text-decoration | 设置文本的装饰 | text-decoration:underline; |
5.6.4 图片对齐方式
Vertical-align属性：middle , top , bottom
5.6.5 超链接样式
| 伪类名称 | 含义 | 示例 |
| a:link | 未单击访问时超链接样式 | a:link{color:#9ef5f9;} |
| a:visited | 单击访问后超链接样式 | a:visited {color:#333;} |
| a:hover | 鼠标悬浮其上的超链接样式 | a:hover{color:#ff7300; |
| a:active | 鼠标单击未释放的超链接样式 | a:active {color:#999;} |
5.6.6 鼠标外观
| 值 | 说明 | 图例 |
| default | 默认光标 |
|
| pointer | 超链接的指针 |
|
| wait | 指示程序正在忙 |
|
| help | 指示可用的帮助 |
|
| text | 指示文本 |
|
| crosshair | 鼠标呈现十字状 |
|
5.6.7 背景样式 背景颜色： background-color
背景图像background-image
background-image属性
背景重复方式
background-repeat属性 X或Y None
背景定位
| 值 | 含义 |
| Xpos Ypos | 单位：px，Xpos表示水平位置，Ypos表示垂直位置 |
| X% Y% | 使用百分比表示背景的位置 |
| X、Y方向关键词 | 水平方向的关键词：left、center、right 垂直方向的关键词：top、center、bottom |
5.6.8 列表样式
list-style-type :
| 值 | 说明 | 语法示例 |
| none | 无标记符号 | list-style-type:none; |
| disc | 实心圆，默认类型 | list-style-type:disc; |
| circle | 空心圆 | list-style-type:circle; |
| square | 实心正方形 | list-style-type:square; |
| decimal | 数字 | list-style-type:decimal |
List-style-position : inside outside
6 盒子 DIV
6.1 边框 border
边框粗细 border-width thin medium thick
| 属性 | 说明 | 示例 |
| border-top-color | 上边框颜色 | border-top-color:#369; |
| border-right-color | 右边框颜色 | border-right-color:#369; |
| border-bottom-color | 下边框颜色 | border-bottom-color:#fae45b; |
| border-left-color | 左边框颜色 | border-left-color:#efcd56; |
| border-color | 四个边框为同一颜色 | border-color:#eeff34; |
| 上、下边框颜色：#369 左、右边框颜色：#000 | border-color:#369 #000; | |
| 上边框颜色：#369 左、右边框颜色：#000 下边框颜色：#f00 | border-color:#369 #000 #f00; | |
| 上、右、下、左边框颜色： #369、#000、#f00、#00f | border-color:#369 #000 #f00 #00f; |
6.1.1 边框样式
6.1.2 外边距和内边距
6.2 盒子型模的尺寸
6.3 标准文档流
6.4 Display属性
| 值 | 说明 |
| block | 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符 |
| inline | 内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符 |
| none | 设置元素不会被显示 |
控制元素的显示和隐藏
块级元素与行级元素的转变
7 Flaot浮动
7.1 float属性
7.1.1 左浮动和右浮动
7.2 Clearn属性 清除浮动
| 值 | 说明 |
| left | 在左侧不允许浮动元素 |
| right | 在右侧不允许浮动元素 |
| both | 在左、右两侧不允许浮动元素 |
| none | 默认值。允许浮动元素出现在两侧 |
7.3 Overflow属性
| 属性值 | 说明 |
| visible | 默认值。内容不会被修剪，会呈现在盒子之外 |
| hidden | 内容会被修剪，并且其余内容是不可见的 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 |
7.4 Position属性定位网页
7.4.1 relative属性值
相对自身原来位置进行偏移
偏移设置：top、left、right、bottom
7.4.2 浮动元素设置相对定位
设置第二个盒子右浮动，再设置第一、第二盒子相对定位
7.5 绝对定位不设置偏移量
7.5.1 绝对定位不设置偏移量
7.6 Z-index属性调整定位
7.7 网页元素透明度
| 属性 | 说明 | 举例 |
| opacity:x | x值为0~1，值越小越透明 | opacity:0.4; |
| filter:alpha(opacity=x) | x值为0~100，值越小越透明 | filter:alpha(opacity=40); |
7.8 制作下拉列表
8 1w1
8.1
扫一扫
2091
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
