嵌套列表
列表之间可以互相嵌套形成多层级的列表。
例：用无序列表嵌套做一个菜单
<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>
<li>鱿鱼</li>
</ul>
</li>
<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>
</ul>
</li>
</ul>
<p><em>亲，20元以上可送餐哦！！</em></p>
表格标签
需要罗列一堆数据时会用上。
<table>：表格的最外层容器。
<tr>：定义表格行。
<th>：定义表头。
<td>：定义表格单元。
<caption>：定义表格标题。
全为双标签，它们之间嵌套有语法规范。
例：
<table>
<caption>天气预报</caption>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
<tr>
<td>2022年10月22日</td>
<td>天气晴朗</td>
<td>适合出行</td>
</tr>
<tr>
<td>2022年10月23日</td>
<td>小雨</td>
<td>出门带伞</td>
</tr>
</table>
语义化标签
<tHead>（头）、<tBody>（身体）、<tFood>（尾），双标签。（不会对网页造成影响，不具备效果，语义化规范，详见1.1.8HTML语义化）
天气预报暂时没有尾。
注：在一个table当中，tBody可以出现多次，但tHead，tFood只能出现一次。
表格属性
border：控制表格边框。
例如：赋值1。
↓
cellpadding：控制单元格内的空间。
cellspacing：控制单元格之间的空间。
例如：都赋值为30。
注：以上三者都是加到table标签当中。
rowspan：合并行。
colspan：合并列。
注：说是合并，更感觉像是一个元素同时占了几列或几行的单元格。
align：控制左右对齐的方式。（left，center，right，对应单元格中左中右的位置。）
valign：控制上下对齐的方式。（top，middle，bottom，对应在单元格中上中下的位置。）
注：可以放在tr里统一控制表格同一行元素的位置，也可以放在th和td里单一改变元素的位置，如果表格单元空间较小，控制元素位置会无明显效果，因为部分空白为填充部分。
表单标签
<form>：双标签，表单的最外层容器。
<input>：单标签，标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。
表单标签的嵌套关系没有表格那么严格。
<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">香蕉
<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>
action是输入提交按钮的地址，placeholder是显示输入框的提示信息，checked是默认勾选（可写为checked = "checked"但是等号及后面可以忽略），disabled是使input支持的控件失效（但仍会显示），多个单选框中加入name属性并赋同样的值可以进行配对使这几个单选框只能选一个。
<textarea>：双标签，多行文本框。
<h2>多行文本框</h2>
<textarea cols="10" row="30"></textarea>
以上编辑了10行30列的多行文本框。
<select>，<option>：双标签，下拉菜单。
<h2>下拉菜单</h2>
<select>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
同样，在选项中添加selected属性可以使其默认选中，在下拉菜单中还可以写入请选择之类的选项然后添加selected（默认选中）和disable（使其不可使用）属性来作为提示信息。在select标签中还可添加size="这里填数字"来显示下拉菜单默认显示多少项（默认是显示一项）。select标签中还可以加入multiple属性使选项能够多选（ctrl+左键或左键长按划过选项），multiple属性其实还可以使input的控件为上传文件时能上传多个文件。
<label>：对表单标签有辅助作用。
例如上面的单选框只能点击小圆点才能选中，加入label标签后可以使选项点击作用范围扩大（点击文字后也可选中）。
<input type="radio" name="gender" id="man"><label for="man">男</label>
<input type="radio" name="gender" id="woman"><label for="woman">女</label>
使用id和for让文字和单选框形成映射关系。
表格与表单组合
表格与表单之间可以互相组合形成数据展示效果。
<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="right">
<td>密码：</td>
<td><input type="password" placeholder="请输入密码"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit">
<input type="reset">
</td>
</tr>
</tBody>
</table>
</form>
<div>，<span>标签
div,全称division，用来划分区块。div元素在网页中是最常用的元素，可以把div元素看成一个矩形区域的容器，在这个容器内可以存放其它HTML元素，也包括div元素，因此div元素是可以嵌套的。借助于CSS样式，能够把div元素放置在网页的任何位置，实现网页的精致排版。
span，内联，文字修饰。
红框圈住的范围（红框是我画上的，不是代码编辑的）实际上就是由div划分的区块，而里面的部分文字的颜色与其他文字的明显区别是由span标签修饰的。
div和span标签都没有默认样式，需要配合CSS使用。
<div style="border:1px gray solid;">
<h2><a href="https://www.baidu.com"><span style="color: red;">百度</span>一下，你就知道</a></h2>
<a href="https://www.baidu.com"><img src="https://t14.baidu.com/it/u=3871151578,586465891&fm=179&app=42&size=w621&n=0&f=PNG?s=56F72C72CCB47E904B7DA3C40300A026&sec=1666717200&t=420aa694c8be549cc64d05871e94c0f3" alt=""></a>
<p>全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
</div>
以上为演示，不做详细介绍。
1.2.1 CSS基础语法
格式：
选择器{属性1:值1;属性2:值2}
width：宽
height：高
background-color：背景颜色
最后一个属性值可以不加分号。注意，选择器要和标签配对，具体看下列。
单位：
px（像素，pixel），%（相对于外容器的百分比）
基本样式：
width，height，background-color（分别对应宽度，高度，背景颜色）
CSS注释：
/*注释内容*/
CSS注释快捷操作与HTML一致（shift+alt+a，ctrl+/）
以下是部分语法演示
以上在head标签中加入了stlye标签来编辑样式，在style中加入了div和span的选择器来映射以下的div标签和span标签统一修饰。
CSS样式的引入方式：
1.内联（行内、行间）样式
在html标签上添加style属性来实现。
2.内部样式
在<style>标签内添加的样式。
两者区别：内部样式的代码可以复用，符合W3C的规范标准，进行让结构和样式分开处理。
比如同时对两个块进行添加样式
可以发现，两种方式表现的内容一样，但是内联样式明显使用代码量更多，尤其是需要修饰更多的div块时。
3.外部样式
需要引入一个单独的CSS文件，如：文件名.css。通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性用来引入资源的地址。
link的rel属性（点一下）。
<link rel="stylesheet" href="">
默认引入外部样式表。
以上编写了一个CSS文件，然后通过link标签引入对html文件内的div块进行修饰。
还有另一种方式也可以添加外部样式，使用@import。
注：不过这种方式有很多问题，不建议使用。
CSS中颜色的表示法
单词表示法：如red，blue，green…
十六进制表示法：#000000~#ffffff
RGB（red，blue，green）三原色表示法：rgb(0,0,0);取值范围0~255。
单词法可表示颜色比十六进制法和rgb三原色法的颜色更少，但是十六进制和rgb使用上又有点困难，这里可以借助photoshop（ps）里的拾色器来对想要的颜色进行提取。
CSS的背景样式
background-color：背景颜色。
background-image：背景图片。
background-image: url(这里写地址)
与image引入图片不同，image是主要展示图片，而background-image是对背景进行装饰，默认会水平垂直铺满背景图。
background-repeat：背景图片的平铺方式。
background-repeat: repeat-x;(x轴方向平铺)
background-repeat: repeat-y;(y轴方向平铺)
background-repeat: no-repeat;(不进行任何方向的平铺)
background-repeat: repeat;(默认水平垂直平铺，上面的图就是)
如果图片比设置的div块的大小还大，只会显示部分图片，图片默认位置在左上角，也就是说图片过大只会显示左上角的部分。
background-position：背景图片的位置。
background-position: 100px 100px;（前者为水平方向，后者为垂直方向）
background-position: 100% 100%;（相对div块左右上下的百分比位置）
background-position: center center;（前者有left，center，right；后者有top，center，bottom；一个水平方向，一个垂直方向）
background-attachment：背景图随滚动条的移动方式。
background-attachment: fixed;（背景位置是按照浏览器进行偏移的）
background-attachment: scroll;（默认值，背景位置是按照当前元素进行偏移）
fixed是将图片固定在相对与浏览器body部分的位置，而scroll是将图片固定在相对div块的位置。当滑动滚动条时，fixed修饰的背景图片只会在浏览器body部分固定位置不动，而scroll修饰的背景图片会随着div块移动。
2022-10-26 16-42-46
CSS边框样式
border-style：边框的样式。
solid：实线。
dashed：虚线。
dotted：点线。
border-width：边框的大小。
XXXpx（像素）
border-color：边框的颜色。
red #000000 …
tips：transparent（透明色）
注：针对某一条边进行单独设置，可以在以上属性的中间加入（top，bottom，left，right，上下左右的边框）如border-top-style:solid（表示顶部边框设置为实线）
将边框大小调大，将四条边的其中三条设置成透明色可以弄出一个三角形。
CSS文字样式
font-family：字体类型
英文字体：Arial，‘Times New Roman’
中文字体：微软雅黑，宋体
中文字体的英文名称
微软雅黑：‘Microsoft YaHei’
宋体：SimSun
中文字体默认为微软雅黑
衬线体与非衬线体
比如宋体就是衬线体，微软雅黑就是非衬线体。衬线体有明显的棱角，而非衬线体比较平滑，扁平化，简练。
（上面是宋体，下面是微软雅黑）
注意：
1.设置多字体的方式。
font-family：后多加几个字体。
<style>
div{font-family:宋体 ， 微软雅黑 ， Arial, 'Times New Roman'}
</style>
这样有一个作用，字体发挥作用需要浏览器识别用户的电脑是否含有该字体，如果没有则无法生效，就会跳到下一个字体进行识别，设置多字体就为了应对用户如果不包含其中一种字体就可以提供备选的解决方案字体，能够适应更多的用户设备。
2.部分字体引入需要添加引号的原因
当引入的字体中有空格时就需要添加引号，如Times New Roman和Microsoft YaHei（微软雅黑）之间就有空格。
font-size：字体大小的调整
font-size:16px （默认是16px）
注：上面两段文字是30px大小，下面两段大小为默认的16px大小
除了可以用像素大小来设置字体大小，还可以用单词，不过还是建议用像素大小来设置。（将填像素大小的地方换成单词即可）
注：像素设置的字体大小一般设置为偶数（14px，16px，18px等等），为了文字能更好的对齐。
font-size: small
font-weight：字体粗细的调整
只有两种模式（正常，加粗）
font-weight:normal （正常）
font-weight:bold （加粗）
除了用单词表示还可以使用number来设置，100~900，虽然是100~900，但是100~500都是正常大小，600~900是加粗。
font-weight:100
font-weight:600
font-style：字体样式
模式：正常（normal），斜体（italic，oblique）
写法：单词表示。
注：oblique也表示斜体，但用的比较少，一般了解即可，与italic相比，oblique能使没有倾斜属性的字体也可以设置倾斜操作，而italic要带有倾斜属性的字体才可设置倾斜操作。
color：字体颜色
CSS段落样式
和字体样式有点相似，都是针对文字，但段落样式是针对多段文字的大篇幅。
text-decoration：文本装饰
下划线：underline
删除线：line-through
上划线：overline
不添加任何装饰：none（默认设置）
可以进行多添加，设置值要用空格隔开。
Tips：可以给段落标签设置width（宽度）属性大小来让段落折行。
text-transform：文本大小写（针对英文段落）
小写：lowercase
大写：uppercase
只针对单词首字母大写：capitalize
text-indent：文本缩进。
对首行缩进
对文本首行缩进两个汉字，一个汉字大小16px，故缩进32px。当字体大小改变时用像素大小来缩进略显麻烦，可以换成em单位
em单位：相对单位，1em永远跟字体大小相同
注：如果中文里混入英文会对不齐。
text-align：文本对齐方式
对齐方式：left（左端对齐，右端不对齐），right（右端对齐，左端不对齐），center（以中间对齐，但文段两端不对齐），justify（两端对齐）
line-heght：定义行高
定义：由一行文字的上边距，字体大小，下边距组成，两行文字中一行文字的下边距等价于下一行文字的上边距。
默认：只有字体大小为默认的情况下才有默认行高，因为字体大小占行高的一部分。
取值：1.number（px）2.scale（比例值，跟文字大小成比例）
line-height: 32px （像素值）
line-height: 2 （比例值）
letter-spacing：字之间的间距
word-spacing：词之间的间距（针对英文段落）
两者都是用像素调整大小（px）
强制折行：（针对英文数字）
英文和数字不自动折行问题：当设置有width（宽度属性）时，文字段落长度超过width设置的宽度时一般会自动折行，但是英文单词和数字会被当做整体，一个单词或一串数字过长时不会折行。
1.word-break:break-all;（非常强烈的折行）
2.word-warp:break-word;（不是那么强烈的折行,会产生空白区域）
加上强制折行后↓
CSS复合样式
一个CSS属性只控制一种样式，叫做单一样式，一个CSS属性控制多种样式叫做复合样式。
复合的写法是通过空格的方式实现的。
例：在背景属性中设置了颜色，图片背景，无平铺方式，背景图居中
边框属性中设置了2px像素大小的边框，边框黑色，实线边框
注：backgroung和border的复合写法不讲究顺序
有的复合写法需要关心顺序，例如font。（至少需要两个值，size和family，先写size再写family）
font: 2px 宋体 ;
size和family要按顺序写，几种正确的格式
weight style size family
style weight size family
weight style size/line-height family
注：复合样式和单一样式尽量不要混写，如果一定要混写，先写复合样式再写单一样式。
如：
上面是一行复合样式和一行单一样式，单一样式的背景颜色覆盖了复合样式的无色，如果上面的复合样式写在单一样式的下面，复合样式的无色背景就会覆盖掉单一样式的绿黄色。
CSS选择器
1.ID选择器
css：#div1{}
html：id=“div1”
Tips：带ID的标签快速生成，输入标签单词后再输入#+ID的值后按Tab
注：在一个页面中，ID值是唯一的，出现多个ID值是不符合规范的。以下代码就是不符合规范的。
#div1{}
<div id="div1"></div>
<div id="div1"></div>
ID的命名规范，ID名由字母、下划线、中划线、数字（ID开头不能是数字）
ID命名方式：（命名尽量有意义）
驼峰写法：searchButton（小驼峰）SearchButton（大驼峰）建议写小驼峰。
短线写法：search-small-button
下划线写法：search_small_button
2.CLASS选择器
css：.div1{}
html：class=“div1”
Tips：带class的标签快速生成，标签+.+class名然后按Tab
注：
1.class选择器是可以复用的，这点和id选择器不同，如以下代码
2.可以添加多个class样式，在style标签中写入多个class选择器后，在class写入值时将其写入并用空格隔开即可。
3.写多个样式的时候，样式的优先级是根据CSS决定的，而不是class属性中的顺序。例如以下在CSS中div2排最后，class属性中div2排在前，但最终执行的是div2。
4.标签加类的写法（许多编程预言中class被称为类），这种写法是针对某一类标签来作用，如以下，只有p段落标签被作用。
2027
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
