前端由3个层构成：
1. html 结构层
2. css 表现层
3. javascript 行为层
五大浏览器：
IE， google chrome谷歌，火狐firefox，欧朋opera，苹果safari
-ms- , -webkit- , -moz- , -o- , -webkit-
html是什么？
HyperText Markup Language 超文本标记语言，靠浏览器解释
标记标签：
双标记标签：<标签名>内容</标签名>
单标记标签：<标签名>
html文档结构：
<!DOCTYPE html>
<html>
<head>
<title>标签页标题</title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
注意：
1. <!DOCTYPE html> 定义文档类型 html5文档
2. <html></html> 根标记标签
3. <head></head> 头标记标签
4. <meta charset="utf-8"> 元数据标签
charset 字符集 设置字符编码 utf-8 万国码
gbk gbk2312 国标
段落标签
<p>内容</p>
图片标签
<img src="" alt="" width="" height="" title="">
属性：
1. src 引入图片路径
1）当html文件与图片在同一个目录下，src的值是 图片名称
<img src="1.jpg"> 或 <img src="./1.jpg">
2) 当html文件与图片所在文件夹在同一个目录下，src的值是 先写文件夹名称，再写图片名称
<img src="images/2.jpg"> 或 <img src="./images/2.jpg">
3) 当html文件所在文件夹与图片在同一个目录下，src的值是 先通过 ../ 跳出当前文件夹，再写图片名称
<img src="../3.jpg">
4）当html文件所在文件夹与图片所在文件夹在同一个目录下，src的值是 先通过 ../ 跳出当前目录，再写图片所在文件夹名称，最后写图片名称
<img src="../images/4.jpg">
2. alt 图片加载失败时的替代文本
3. width 宽度 height 高度
4. title 鼠标放到标签上的提醒文本
标题
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
相同点：都是块元素，都加粗
不同点：字号依次减小
换行 <br>
水平线 <hr align="" width="" color="">
align 水平方向对齐方式
值：
center 默认 水平居中对齐
left 左对齐
right 右对齐
width 宽度
color 水平线的颜色
列表：
无序列表 没有先后顺序
<ul>
<li>列表项</li>
<li>列表项</li>
...
</ul>
有序列表 有先后顺序
<ol>
<li>列表项</li>
<li>列表项</li>
...
</ol>
定义列表
<dl>
<dt>术语/关键字</dt>
<dd>解释的文字</dd>
</dl>
加粗
<b></b>
<strong></strong> 主旨表强调
倾斜
<i></i>
<em></em> 主旨表强调
上、下标
上标 <sup></sup>
下标 <sub></sub>
小字号
<small></small>
特殊符号：
空格：    
大于号 ：> 小于号: <
注释语句：
<!-- 注释内容 -->
<div></div>
<span></span>
超链接：
<a href="" target="_blank"></a>
属性：
href 连接前往路径
1）网址
2）相对路径
3）锚点 #id值
4）邮箱链接 mailto:邮箱地址
5）表示下载
target 链接打开的方式
1）_blank 在新窗口中打开链接
2）_top _self _parent
行内框架：
<iframe src="" frameborder="" scrolling=""></iframe>
属性：
src 用来引入外部页面路径
frameborder 框架的边框 1有边框 0无边框
scrolling 滚动条 yes有滚动条 no无滚动条
table表格 基本结构
<table border="" cellspacing="" cellpadding="">
<tr>
<th>标题</th>
<td>单元格</td>
...
</tr>
...
</table>
属性：
border 边框
cellspacing 单元格与单元格之间的距离
cellpadding 内容与单元格之间的距离
align 水平方向对齐方式
left 左对齐
center 水平居中
right 右对齐
valign 垂直方向对齐方式
middle 垂直居中
top 顶对齐
bottom 底对齐
bordercolor 边框颜色
bgcolor 背景颜色
rules 规定内侧边框哪部分可见
值：
none 内侧边框不可见
rows 行之间的线条可见
cols 列之间的线条可见
all 行与列之间的线条均可见
单元格合并：
水平合并单元格 colspan="合并单元格个数"
垂直合并单元格 rowspan="合并单元格个数"
form表单
<form></form> 表示采集数据的范围
action 行为 动作 数据提交的路径
method 方法 方式 数据提交的方式
get
post
<input type="" name="" value="" placeholder="">
input 输入
type 类型
name 名字
value 值 初始值
placeholder 输入域的提醒文本
2个输入框
<input type="text"> 文本框
<input type="password"> 密码框
2个选中框
<input type="radio" name="name值相同" checked>
<input type="checkbox">
checked 单选/复选框 默认选中
4个按钮
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮">
<input type="button" value="一般按钮">
点击文本选中复选框/单选框
<label>
<input type="checkbox">文字
</label>
<input type="radio" id="male">
<label for="male">男性</label>
文本域：
<textarea></textarea>
下拉选择框：
<select>
<option value="值1">选项1</option>
<option value="值2" selected>选项2</option>
...
</select>
选项默认选中 selected="selected"
<button>按钮</button>
块元素 display:block
特点：
1.独占一行
2.宽度未设置时，受浏览器宽度影响
3.内边距，外边距，行高都可以设置
4.块元素可以嵌套任何元素 （p元素除外）
<p></p>
<h1></h1>
...
<h6></h6>
<hr>
<ul></ul>
<ol></ol>
<dl></dl>
<dt></dt>
<dd></dd>
<div></div>
<form></form>
<option></option>
行内元素（内联元素） display:inline
特点：
1.能和其他元素在一行显示
2.行内元素的宽度只与内容有关，宽度设置无效
3.行高，内边距，外边距只有部分可以进行设置
4.行内元素一般只能嵌套文本或者行内元素，行内块元素
<b></b>
<strong></strong>
<i></i>
<em></em>
<small></small>
<sup></sup>
<sub></sub>
<span></span>
<label></label>
行内块元素 display：inline-block
特点：
1.能和其他元素在一行显示
2.能设置宽度与高度
3.内边距，外边距都能进行设置
<img src="">
<iframe></iframe>
<input type=''>
<textarea></textarea>
<select></select>
<button></button>
176
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
