一、div+css布局
绝大部分网页布局都是div+css布局。
优点：做到了结构和样式分离。便于代码维护
结构：
1 <body>
2 <!-- 结构 -->
3 <!-- header头部 -->
4 <div class="header">
5 <!-- 嵌套关系 缩进tab-->
6 <h1 class="logo">logo</h1>
7 <div class="nav">nav</div>
8 </div>
9
10 <!-- content 内容 -->
11 <div class="content">
12 <div class="aside">侧边栏</div>
13 <div class="main">主内容</div>
14 </div>
15
16 <!-- footer 底部 -->
17 <div class="footer">footer</div>
18 </body>
样式：
1 <style type="text/css">
2 /*清除默认样式*/
3 * {
4 padding: 0px;
5 margin: 0px;
6 }
7 .header {
8 width: 100%;
9 height: 100px;
10 background-color: #eee;
11 }
12 .logo {
13 float: left;
14 width: 200px;
15 height: 100px;
16 background-color: red;
17 }
18 .nav {
19 float: right;
20 width: 600px;
21 height: 100px;
22 background-color: red;
23 }
24
25 .content {
26 width: 100%;
27 height: 500px;
28 background-color: #eee;
29 margin-top: 30px;
30 }
31 .aside {
32 float: left;
33 width: 300px;
34 height: 500px;
35 background-color: green;
36 }
37 .main {
38 float: right;
39 width: 600px;
40 height: 500px;
41 background-color: green;
42 }
43 .footer {
44 width: 100%;
45 height: 100px;
46 background-color: #eee;
47 margin-top: 30px;
48 }
49 </style>
二、列表
列表有3种：无序列表，有序列表，自定义列表
列表：相类似，相近的内容使用列表语义
2.1无序列表
作用：给文本添加无序列表语义。
ul:unordered list 无序列表
li:list item 列表项
ul和li是第一个成对出现的标签,出现ul一定有Li，有li一定被ul包裹
ul内部只能嵌套li不能出现任何其他标签。
ul>li + tab键 快速生出嵌套关系标签
1 <h3>服装分类</h3
2 <ul>
3 <li>男装</li>
4 <li>女装</li>
5 <li>儿童装</li>
6 </ul>
ul是容器级标签（ul内部只能嵌套li不能出现任何其他标签）；li也是容器级标签，内部可以书写任何标签，甚至可以书写ul>li
1 <h3>服装分类</h3>
2 <ul>
3 <li>
4 <h4>男装</h4>
5 <ul>
6 <li>夹克</li>
7 <li>西服</li>
8 <li>休闲装</li>
9 </ul>
10 </li>
11 <li>
12 <h4>女装</h4>
13 <ul>
14 <li>长裙子</li>
15 <li>短裙子</li>
16 <li>T恤</li>
17 </ul>
18 </li>
19 <li>
20 <h4>儿童装</h4>
21 <ul>
22 <li>童装</li>
23 <li>童鞋</li>
24 <li>童帽子</li>
25 </ul>
26 </li>
27 </ul>
ul内部可以嵌套一个或者多个li标签，li之间没有先后顺序
无序列表前面的小圆点，样式是css设置。
**list-style: square;**小方块
2.2 有序列表
作用：给文本添加有序列表语义
ol:ordered list 有序列表
li:list item 列表项
每一个列表项之间有顺序之分
ol,li也是一组成对出现的标签，ol一定嵌套li。
ol内部嵌套一个或者多个Li
1 <!-- 各阶段考试时间安排 -->
2 <ol>
3 <li>html基础考试</li>
4 <li>js基础考试</li>
5 <li>js进阶考试</li>
6 <li>nodejs考试</li>
7 </ol>
ol,li都是容器级标签，ol内部只能书写Li，li是容器级可以书写任何内容
1 <!-- li可以嵌套有序列表 -->
2 <h3>考试说明</h3>
3 <ol>
4 <li>
5 <h4>html基础考试分数统计</h4>
6 <ol>
7 <li>100分</li>
8 <li>98分</li>
9 <li>70分</li>
10 <li>50分</li>
11 </ol>
12 </li>
13 <li>
14 <h4>js基础考试分数统计</h4>
15 <ol>
16 <li>98分</li>
17 <li>90分</li>
18 <li>70分</li>
19 <li>50分</li>
20 </ol>
21 </li>
22 <li>
23 <h4>html进阶考试分数统计</h4>
24 <ol>
25 <li>100分</li>
26 <li>98分</li>
27 <li>70分</li>
28 <li>50分</li>
29 </ol>
30 </li>
31 </ol>
列表样式，css设置
1 list-style: none;
2.3 自定义列表
作用：给文本添加自定义列表语义
dl: definition list 自定义列表
dt: definition title 标题
dd: definition description 描述
dl嵌套dt和dd，dt和dd是同级关系，dt是标题，dd是对标题解释说明（dl>dt+dd）
1 <dl>
2 <!-- 标题 -->
3 <dt>苹果公司</dt>
4 <dd>苹果是美国公司</dd>
5 <dd>苹果公司收益很多</dd>
6
7
8 <!-- 标题 -->
9 <dt>华为公司</dt>
10 <dd>华为总部在深圳</dd>
11 <dd>是国内很好的公司</dd>
12
13 <dt>小米公司</dt>
14 <!-- dt也可以没有dd，表示没有解释说明 -->
15 </dl>
dl，dt,dd都是容器级标签
dl内部书写dt和dd，可以书写多组dt和dd,dd是对dt解释说明，dd可以有多条也可以没有。
一般我们在使用dl时，只嵌套一组dt和dd，便于样式书写。
结构：
1 <!-- 一般一个dl嵌套一组dt和dd -->
2 <dl>
3 <!-- 标题 -->
4 <dt>苹果公司</dt>
5 <dd>苹果是美国公司</dd>
6 <dd>苹果公司收益很多</dd>
7 </dl>
8
9 <dl>
10 <!-- 标题 -->
11 <dt>华为公司</dt>
12 <dd>华为总部在深圳</dd>
13 <dd>是国内很好的公司</dd>
14 </dl>
15
16
17 <dl>
18 <dt>小米公司</dt>
19 <!-- dt也可以没有dd，表示没有解释说明 -->
20 </dl>
样式：
1 <style type="text/css">
2 dl {
3 float: left;
4 width: 300px;
5 height: 400px;
6 background-color: lightblue;
7 margin-left: 30px;
8 }
9 </style>
三、表格
3.1 基础表格
table: 表格（块级元素）
tr: table row 行
td: table dock 单元格
table > tr > td
最简单表格：每一行单元格个数相同
1 <table>
2 <tr>
3 <td>第1行第1个单元格</td>
4 <td>第1行第2个单元格</td>
5 <td>第1行第3个单元格</td>
6 </tr>
7 <tr>
8 <td>第2行第1个单元格</td>
9 <td>第2行第2个单元格</td>
10 <td>第2行第3个单元格</td>
11 </tr>
12 <tr>
13 <td>第3行第1个单元格</td>
14 <td>第3行第2个单元格</td>
15 <td>第3行第3个单元格</td>
16 </tr>
17 </table>
如果表格有表头的概念，将td换成th（table head）
1 <table>
2 <tr>
3 <th>姓名</th>
4 <th>年龄</th>
5 <th>性别</th>
6 </tr>
7 <tr>
8 <td>小明</td>
9 <td>20</td>
10 <td>男</td>
11 </tr>
12 <tr>
13 <td>小红</td>
14 <td>20</td>
15 <td>女</td>
16 </tr>
17 <tr>
18 <td>小红</td>
19 <td>20</td>
20 <td>女</td>
21 </tr>
22 <tr>
23 <td>小红</td>
24 <td>20</td>
25 <td>女</td>
26 </tr>
27 </table>
3.2 合并单元格
单元格合并利用td（th）两个属性
rowspan: 跨行合并
colspan: 跨列合并
属性值：是数字合并几行（列）就书写几，没有单位
1 <table>
2 <tr>
3 <td colspan="2">1</td>
4 <td>2</td>
5 <td>3</td>
6 </tr>
7 <tr>
8 <td>4</td>
9 <td rowspan="2">5</td>
10 <td colspan="2">6</td>
11 </tr>
12 <tr>
13 <td>7</td>
14 <td>8</td>
15 <td>9</td>
16 </tr>
17 </table>
3.3 三个划分区域的语义标签
caption: 标题
thead: 表头区域
tbody: 表格主体
table>caption+(thead>tr>th)+(tbody>tr>td)
1 <table>
2 <!-- 标题 -->
3 <caption>人员名单</caption>
4 <!-- 表头 -->
5 <thead>
6 <tr>
7 <th>姓名</th>
8 <th>性别</th>
9 <th>年龄</th>
10 </tr>
11 </thead>
12 <!-- 主体部分 -->
13 <tbody>
14 <tr>
15 <td>小明</td>
16 <td>男</td>
17 <td>20</td>
18 </tr>
19 <tr>
20 <td>小明</td>
21 <td>男</td>
22 <td>20</td>
23 </tr>
24 <tr>
25 <td>小明</td>
26 <td>男</td>
27 <td>20</td>
28 </tr>
29 <tr>
30 <td>小明</td>
31 <td>男</td>
32 <td>20</td>
33 </tr>
34 </tbody>
35 </table>
四、表单
4.1 form标签
将所有的表单元素都书写在form标签内部
form标签（块级元素）是功能标签不是结构标签
提交位置：action
提交方式：method：Get和Post
- Get是不安全的，因为在传输过程，数据被放在请求的URL中；Post的所有操作对用户来说都是不可见的。
2. Get传送的数据量较小，这主要是因为受URL长度限制；Post传送的数据量较大，一般被默认为不受限制。
3. Get限制Form表单的数据集的值必须为ASCII字符；而Post支持整个ISO10646字符集。
4. Get执行效率却比Post方法好；Get是form提交的默认方法。
1 <form action="1.php" method="get"></form>
表单元素：提供给用户进行输入或者选择控件
input是行内块级元素
属性：type，根据type属性值，有不同的表单类型
4.2 单行文本框
type: 属性值text
name: 名字
value: 默认文本
1 请输入用户名：<input type="text" name="yonghuming" value="用户名" />
4.3 密码框
type属性值： password
1 密码：<input type="password" name="mima" />
4.4 单选框
type属性值：radio
同一组单选框，必须设置相同的name属性值
checked: 设置表单被选中checked
1 <p>
2 请选择性别：
3 <input type="radio" name="sex" />男性
4 <input type="radio" name="sex" checked="checked" />女性
5 </p>
4.5 label标签
label标签可以绑定单选框
将要绑定标签添加id（唯一）
1 请选择性别：
2 <input type="radio" name="sex" id="nan" /><label for="nan">男性</label>
3 <input type="radio" name="sex" id="nv" checked="checked" /><label for="nv">女性</label>
4.6 复选框
type属性值：checkbox
同一组复选框，必须设置相同的name属性值
也具有checked属性
可以使用label标签
1 <p>
2 请选择爱好：
3 <input type="checkbox" name="fav" id="study" checked="checked" /><label for="study">学习</label>
4 <input type="checkbox" name="fav" id="sing" /><label for="sing">唱歌</label>
5 </p>
``
4.7 按钮
三种按钮：
普通按钮： button
提交按钮：submit
重置按钮：reset(将用户输入清空)
1 普通按钮：<input type="button" value="按钮" />
2 提交按钮：<input type="submit" value="立即注册" />
3 重置按钮：<input type="reset" />
4.8 文本域
textarea:文本域 是双标签
也可以书写默认文本，在标签中间
1 <textarea name="" id="" cols="30" rows="10">请书写意见或者建议</textarea>
4.9 下拉框
select>option(选项）
1 请选择你喜欢的城市：
2 <select name="city" id="city">
3 <!-- value提交值 -->
4 <option value="01">北京</option>
5 <option value="02" selected="selected">上海</option>
6 <option value="03">深圳</option>
7 <option value="04">广州</option>
8 </select>
一般我们使用无序列表模拟下拉框
五、html杂项
5.1 注释
快捷键：ctrl + /
特点：注释不会渲染在浏览器页面中
作用：一般标注某个结构开始，结束,或者不显示浏览器中的代码可以添加注释
1
5.2 字符实体
字符实体（转义字符）：一些有特殊功能符号，直接书写在代码在浏览器渲染时不能正常显示我们想要的效果
语法：
1 &关键字;
1 空格：
2 大于号：>
3 小于号：<
4 版权信息：©
5.3 废弃标签
b,u,i,em,strong（文本级标签）
b: 默认加粗
u: 默认下划线
i: 默认倾斜
em: 语义加强，倾斜
strong: 语义加强，加粗
5.4 色值表示法
单词表示法：
1 color:red,lightblue
十六进制表示法：#
1 color: #db9408;
rgb(,)表示法
1 color: rgb(219,148,8);
610
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
