拨云见日
一，嵌套列表
列表之间可以互相嵌套形成多层级列表
<ul>
<li>
辽宁省
<ul>
<li>沈阳</li>
<li>大连</li>
<li>丹东</li>
</ul>
</li>
<li>
山东省
<ul>
<li>济南</li>
<li>青岛</li>
<li>烟台</li>
</ul>
</li>
</ul>
以上代码所呈现效果：
<h1>好美味小吃</h1>
<ul>
<li>
小吃类
<ul>
<li>煮粉干</li>
<li>拌青菜</li>
<li>蛋炒饭</li>
<li>煎蛋</li>
<li>米饭</li>
</ul>
</li>
<li>
卤味类
<ul>
<li>鸭肠</li>
<li>面筋</li>
<li>牛肚</li>
<li>猪耳朵</li>
<li>大肠</li>
<li>鱿鱼</li>
</ul>
</li>
<li>
套餐类
<ul>
<li>卤面筋饭</li>
<li>猪肉肉饭</li>
<li>猪耳朵饭</li>
<li>卤猪脚饭</li>
<li>卤猪脚饭</li>
</ul>
</li>
<li>
炖罐类
<ul>
<li>猪蹄黄豆</li>
<li>牛肉枸杞</li>
</ul>
</li>
</ul>
效果：
二，表格标签
<table> 表格的最外层容器
<tr> 定义表格行
<th> 定义表头
<td> 定义表格单元
<caption> 定义表格标题
(有嵌套关系，要符合嵌套规范)
<body>
<table>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</table>
</body>
*语义化标签(在表格里不显示效果，但是语义化标签有益于团队协作)
<thead>
<tBody>
<tFood>
在一个table中，tBody是可以出现多次的，但是thead,tFood只能出现一次
三，表格属性
border:边框
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
rowspan：合并行
colspan：合并列
align：左右对齐方式（left，centre，right）
valign：上下对齐方式（top，middle，bottom）
例如
<table border="" cellpadding="" cellspacing="">...</table>
<td rowspan="" colspan="">...</td>
< tr align=“right” valign="top" >..</tr>
四，表单标签
（1）表单标签1
<form>:表单的最外层容器
<input>:标签用于收集用户信息，根据不同的type属性值，展示不同的控件，如输入框，密码框，复选框等。
注：表单标签不需要按照嵌套关系
常见type属性
注：type属性，决定控件的样式，是什么控件
<body>
<form action-"http://www.baidu.com">
<h2>输入框：</h2>
<input type="text">
<h2>密码框 </h2>
<input type="password">
<h2>复选框</h2>
<input type="checkbox">苹果
<input type="checkbox">香蕉
<input type='"checkbox">葡萄
<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>
action:" "：提交地址
checked:默认选中
disabled：禁止选中
placehlder：在框内显示内容
效果
（2） 表单标签2
[1]多行文本框
<textarea cols="30" row="10"></textarea>
[2]下拉菜单
<select>外层
<option>内项
例如：
<h2>下拉菜单</h2>
<select>
<option selected disables>请选择</option>
<option>北京</option>
<option selected>上海</option> 当前被选中，不然默认显示第一项
<option>杭州</option>
</select>
<multiple>：多选属性(点击然后鼠标滑过或者ctrl+鼠标左键)
<input type ="file"multiple>多选插入文件
如何扩大选中范围？
[3]辅助表单
<input type="radio"name="gender"id="man"><label for="man">男</label>
id起到一一对应的作用
通过以上的标签，可以实现表格表单组合，但是要注意，表格是有嵌套规范的！
五， div和span
div：分割，分区（做一个区域划分的块）
span：修饰文字 （对文字进行修饰，内联）
以上二位默认都是没有样式的，我们需要通过CSS来实现样式
CSS的基本语法
一,格式
选择器（属性1：值1；属性2：值2）
【最后一个属性可以不用；结尾】
<style>
添加样式
</style>
</head>
<body>
<div>zhjhu</div>
</body>
</html>
二，单位
px 像素 横向px竖向px相乘就是我们平时常说的分变率
% 百分比
三，基本样式
width，height，background-color
标签需要有映射关系，div可以一对二
四，CSS注释
/*CSS注释的内容*/
五，内联格式与内部样式
【1】内联（行内行间）样式
在HTML标签上添加的样式
注：内部样式的优点
[可以复用代码],复合W3C的规范标准进行让结构和样式分开处理
六，外部样式
1，引入一个单独的css文件
<link>标签
ref 外部资源的类型，该属性规定当前文档与被链接文档之间的关系
href 外部资源的地址（引入外部资源）
2，@import 问题很多，不建议使用
<style>
@import url（）
</style>
七，颜色表示法
1.单词表示法
2.16进制表示法
3.三原色表示法
rab(255,255,255)
括号里的数字取值只能是0~255
附颜色表
4.通过工具获取网页颜色
【1】下载Fe助手，在网络条件下进行
【2】photoshop
八，背景样式
background-image
url:图片地址，默认水平垂直铺满
background-repeat
repeat-x 横行铺满
repeat-y 竖向铺满
repeat 横行竖向都铺满
no-repeat都不平铺
background-attachment
scroll:默认值（背景位置是按照当前元素进行偏移的）
fixed： （背景位置是按照浏览器位置进行的）
九，CSS边框样式
边框样式
solid实线
doshed虚线
dotted点线
<style>
div{width:300px;height:300px;border-style:solid}
</style>
边框颜色
在样式栏中编写选择，透明色：transpavent
十， CSS文字样式
1.font-family：字体类型
英文
中文
<英文字体一般只作用于英文>
div{font-family:'Times New Roman';}
字体两头加引号是特殊情况，即当字体名称中有空格的时候
！注意
【1】设置多字体
div{font-family:'Times New Roman’，simsun，微软雅黑；}
原因：因为网页中的字体是否能够被识别取决于电脑里该字体是否存在，以防万一，设置多字体，依次尝试
2.衬线体与非衬线体
十一，CSS文字样式
1.font-size字体大小
默认：16px
写法：nunber(px)|单词（ small， large…不推荐使用）
注：字体大小一般是偶数
2.font-style字体样式
模式：正常（normal)斜体（ italic)
写法：单词（normal italic)
注：oblique也是表示斜体，用的比较少，
一般了解即可。
区别：1.italic 带有倾斜属性的字体的才可以设靈倾斜操佴。
2.cb1ique 没有倾斜属性的字体也可以设置倾斜操作。
3.font-weight字体粗细
模式：正常(normal)
写法：单词(mormal、bold)加粗（bold）
数值：只有100，200…900(100到500正常）（600到900加粗)
4.字体颜色
十二，CSS段落样式
1.text-decoration文本装饰
下划线underline
删除线line-through
止划线overline
不添加任何装饰none
p{width:300px,text-decoration:line-through}
多项样式选择用空格隔开
2.text-transform文本大小写（针对英文）
p{text-transform:lowercase/uppercase/capitalize小写/大写/仅首字母大写}
3.text-indent:文本缩进
首行缩进，假如默认一个文字16px
p{text-indent:32px;}
em单位：相对单位，永远等于一个字的大小
4.text-align
p{text-align:left/right/justify}
5.line-height
什么是行高？
一行文字的高度，上边距和下边距的等价关系。
默认行高：不是固定值，而是变化的。根据当前字体的大小再不断的变化。
取值：1. number( px)2.scale （比例值，跟当前文字大小有关）
6.letter-spacing定义行间距
letter-spacing ：定义字间距
word-spacing：定义词间距（针对英文）
英文与数字不自动折行的问题
强制折行：(针对英文)
- word-break : break-all;(非常强烈的折行)
- word-wrap :break-word;（不是那么强烈的折行）
十三，CSS复合样式
一个CSS属性只控制一种样式，叫做单一样式。
一个CSS属性控制多种样式，叫做复合样式。
复合样式
background：red，url,repeat
border:px,color,soild
font:(最少要两个值size,family,有顺序，必须按照这个顺序在最后)
尽量不要混写，如果非要混写的话，一定要先写复合样式，再写单一样式
十四，ID选择器
CSS:#elem{}
html:id=“elem”
‹style>
#div1｛background: red;}
#div2{ background: blue;}
</style>
</head>
<body>
‹div id="div1">这是一个块</div>
<div id="div2”>这又是一个块</div>
</head>
</body>
映射关系
注：
1.在一个页面中，ID值是唯一的。
2. 命名规范，字母-_数字（命名的第一位不能是数字）
3. 命名方式，驼峰式，下划线式，短线式
十五，CLASS选择器
css:elem{}
html:class:“elem”
注：
1.class选择器是可以复用的，
2.可以添加多个class样式.
3. 多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序，
4. 标签+类的写法
358
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
