021嵌套列表
列表之间可以互相嵌套形成多层级列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>
辽宁省
<ul>
<li>沈阳</li>
<li>大连</li>
<li>丹东</li>
</ul>
</li>
<li>
山东省
<ul>
<li>济南</li>
<li>青岛</li>
<li>烟台</li>
</ul>
</li>
</ul>
<dl>
<dt>中国</dt>
<dd>
<dl>
<dt>辽宁省</dt>
<dd>沈阳</dd>
<dd>大连</dd>
</dl>
<dl>
<dt>山东省</dt>
<dd>济南</dd>
<dd>青岛</dd>
</dl>
</dd>
<dt>美国</dt>
<dd>洛杉矶</dd>
</dl>
</body>
</html>
022表格标签
<table>:b表格的最外层容器
<tr>:定义表格行
<th>:定义表头
<td>:定义表格单元
<caption>:定义表格标题
注意
之间是有嵌套关系的，要符合嵌套规范
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<caption>天气预报</caption>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
<tr>
<td>2019年1月1日</td>
<td><img src="./img/tianqi_1.png" alt=""></td>
<td>天气晴朗，适合出行</td>
</tr>
<tr>
<td>2019年1月2日</td>
<td><img src="./img/tiqi_2.png" alt="" ></td>
<td>有小雨，出门请带伞</td>
</tr>
</table>
</body>
</html>
语义化标签：
<tHead>,<tBody>,<tFood>
注意
tBody是可以出现很多次的，但是tHead,tFood只能出现一次。
023表格属性
border：表格边框
cellpadding:单元格内的空间
cellspcing:单元格之间的空间
rowspan：合并行
colspan:合并列
align：左右对齐方式
valign：上下对齐方式
align:left,center,right
valign:top,middle,bottom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" cellpadding="30" cellspacing="30">
<caption>天气预报</caption>
<tHead>
<tr align="right" >
<th colspan="2">日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tBody>
<tr valign="top" >
<td rowspan="2">2019年1月1日</td>
<td>白天</td>
<td><img src="./img/tianqi_1.png" alt=""></td>
<td>天气晴朗，适合出行</td>
</tr>
<tr>
<td>夜晚</td>
<td><img src="./img/tianqi_2.png" alt=""></td>
<td>天气晴朗，适合出行</td>
</tr>
<tr>
<td rowspan="2">2019年1月2日</td>
<td>白天</td>
<td><img src="./img/tiqi_1.png" alt="" ></td>
<td>有小雨，出门请带伞</td>
</tr>
<tr>
<td>夜晚</td>
<td><img src="./img/tiqi_2.png" alt="" ></td>
<td>有小雨，出门请带伞</td>
</tr>
</tBody>
<tFood>
</tFood>
</table>
</body>
</html>
024表单标签
<form>:表单的最外层容器
<input>:标签用于搜集用户信息，根据不同的控件，如输入框、密码框、复选框等。<input>(单标签)标签有一个type属性，决定是什么控件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<h2>输入框：</h2>
<input type="text" placeholder="请输入用户名">
<h2>密码框：</h2>
<input type="password" placeholder="请输入密码">
<h2>复选框</h2>
<input type="checkbox" checked>苹果
<input type="checkbox"checked>香蕉
<input type="checkbox" disabled>葡萄
<h2>单选框</h2>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<h2>上传文件</h2>
<input type="file">
<h2>提交和重置按钮</h2>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
025表单相关标签
<textarea>:多文本框
<select>、<option>:下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="http://www.baidu.com">
<!--<h2>输入框：</h2>
<input type="text" placeholder="请输入用户名">
<h2>密码框：</h2>
<input type="password" placeholder="请输入密码">
<h2>复选框</h2>
<input type="checkbox" checked>苹果
<input type="checkbox"checked>香蕉
<input type="checkbox" disabled>葡萄
<h2>单选框</h2>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<h2>上传文件</h2>
<input type="file">
<h2>提交和重置按钮</h2>
<input type="submit">
<input type="reset">-->
<h2>多行文本框</h2>
<textarea cols="10" rows="30"></textarea>
<h2>下拉菜单</h2>
<select>
<option selected disabled>请选择</option>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
<select size="3">
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
<select multiple>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
<input type="file" multiple>
<input type="radio" name="gender" id="man"><label for="man">男</label>
<input type="radio" name="gender" id="woman"><label for="woman">女</label>
</form>
</body>
</html>
026表格表单组合实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<table border="1" cellpadding="30">
<tBody>
<tr align="center">
<td rowspan="4">总体信息</td>
<td colspan="2">用户注册</td>
</tr>
<tr align="right">
<td>用户名</td>
<td><input type="text" placeholder="请输入用户名"> </td>
</tr>
<tr align="rignt">
<td>密码：</td>
<td><input type="password" placeholder="请输入密码"> </td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit">
<input type="reset">
</td>
</tr>
</tBody>
</table>
</form>
</body>
</html>
027div与span
div(块）：
div全称division，“分割，分区”的意思，<div>标签用来划分一个区域，相当于一块区域容器，可以闰年段落、标题、表格、图像等各种网页元素，即HTML中大多数的标签都可以嵌套在<div>标签中，<div>中还可以嵌套多层<div>，用来将网页分割成独立的，不同的部分，来实现网页的规划和布局。
span（内联）：
用来修饰文字的，<div>和<span>都是没有默认样式的，需要配合CSS才行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--<div>这是一个块</div>
<span>这是一个内联</span>-->
<div>
<h2><a href="a">[千峰教育]<span>html5</span> -中国数万程序员的选择-官方首页</a></h2>
<a href="a"><img src="alt"> </a>
<p>优势：······
</p>
<a href="a">www.mobletrain.org 2019-04- 评价 广告</a>
</div>
<div>
.....
</div>
</body>
</html>
028CSS语法格式
格式：
选择器{属性1：值1；属性2：值2}
单位：
px->像素（pixel）、%->百分比
基本样式：
width、height、background-color
CSS注释
/*CSS的注释内容*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{ width:100px; height:100px; background-color:red }
span{background-color:blue;}
</style>
</head>
<body>
<div>这是一个块</div>
<div>又是一个块</div>
<span>这是一个内联</span>
</body>
</html>
029内联样式和内部样式
内联样式：style属性
内部样式：style标签
内联（行内、行间）样式
在html标签上添加style属性来实现的
内部样式
在<style>标签内添加的样式
注：内部样式的优点，可复用代码
区别：内部样式可复用代码，符合W3C的规范标准，进行让结构和样式分开处理
030外部样式及两种写法
引入一个单独的CSS文件，name.css
<link>:标签
rel
href
通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性资源的地址。
@import
注：这种方式有很多问题，不建议使用。
031CSS颜色表示法
1.单词表示法：red blue green yellow…
2.十六进制表示法: #000000 #ffffff
0 1 2 3 4 5 6 7 8 9 a b c d e f
RGB三原色表示法:rgb(0,0,0);
取值范围0~255
032CSS背景样式
background-color:背景颜色
background-image:背景图片
url（背景地址）
background-repeat:背景图片的平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
repeat(x,y都进行平铺，默认值）
no-repeat 都不平铺
background-position背景图片的位置
x y:number (px.%) | 单词
x：left、center、right
y: top、center、bottom
background-attachment:背景图随滚动条的移动方式
scroll:默认值（背景位置是按照当前元素进行偏移的）
fixed（背景位置是按照浏览器进行偏移的）
033背景实现视觉差效果
略
034边框样式
border-style:边框的样式
solid:实线
dashed:虚线
dotted:点线
border-width:边框的大小
px…
border-color:边框的颜色
red #f00…
注：针对某一条边进行单独设置:border-left-style：中间是方向 left 、right、top、bottom
035边框实现三角形
略
036family字体类型
font-family:字体类型
英文字体：Arial、‘Times New Roman’
中文字体：微软雅黑，宋体
衬线体与非衬线体
注意事项
1.设置多字体方式
2.引号的问题
037字体大小粗细样式
font-size:字体大小
默认：16px
写法：number（px)|单词（ small large…不推荐）
注：字体大小一般为偶数。
font-weight：字体粗细
模式：正常（normal) 加粗（bold)
font-style:字体样式
模式：正常（normal) 斜体（italic)
注：oblique也是表示斜体，用的比较少，一般了解
区别：1.italic 所有带有倾斜字体的可以设置倾斜操作
2.oblique没有倾斜属性的字体也可以设置倾斜操作
color：字体颜色
038文本修饰与文本大小写
text-decoration:文本装饰
取值
添加多个
下划线：underline
删除线：line-through
上划线：overline
不添加如何装饰：none
text-transform:文本大小写（针对英文段落）
取值
小写：lowercase
大写：uppercase
只针对首字母大写：capitalize
039文本缩进与文本对齐
text-indent:文本缩进
首行缩进
em单位：相对单位，1em永远都是跟字体大小相同
text-align:文本对齐方式
取值
040文本的行高
line-height:定义行高
定义 默认 取值
什么是行高，一行文字的高度，上边距和下边距的等价关系。
默认行高：不是固定值，而是变化的，而是根据当前字体的大小在不断变化。
取值：1.number（px) | sacale(比例值，文字大小）
041文本间距与英文折行
letter-spacing:定义字间距
word-spacing:定义词间距（针对英文）
强行拆行：（针对英文）
英文和数字不自动折行的问题：
1.word-break：break-all(非常强烈的折行）
2.word-wrap:break-word(不是那么强烈的折行，会产生一些空白区域）
042文本与段落实现个人简介
略
043CSS符合样式
一个CSS属性只控制一种样式，叫做单一样式。
一个CSS属性控制多种样式，叫做符合样式。
复合样式
1.background
2.border
3.font:注：最少要有两个值
不要混写
044ID选择器及注意事项
ID选择器
css：#elem{}
html:id=“elem”
注：
1.在一个页面中，ID值是唯一的。
2.命名规范，字母_-数字（命名的第一位不能是数字）。
3.命名方式，驼峰式、下划线式、短线式
045CLASS选择器及注意事项
CLASS选择器
css：elem{}
html: class=“elem”
注：
1.class选择器是可以复用的.
2.可以添加多个class样式。
3.多个样式的时候，样式的优先级根据css决定，而不是class属性中的顺序。
4.标签+类的写法
2299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
