HTML+CSS基础 第二季课堂笔记

一、列表

列表都不是单打独斗的，通常都是一组标签组成

1 无序列表

作用：定义一个没有顺序的列表结构

由两个标签组成，ul（容器级标签），li（容器级）

ul：英文ulordered list（无序列表）

li：英文list item（列表项）

无序列表的基本使用

<h2>古典四大名著</h2>
<ul><li>三国演义</li><li>西游记</li><li>红楼梦</li><li>水浒传</li>
</ul>

需要注意的是，ul内部嵌套li，它们是父子关系。

规定：ul标签的内部必须只能嵌套li，li标签的内部可以嵌套任何标签，甚至是ul

下面的写法是错误的，因为ul标签的内部不能嵌套除了li标签以外的其他标签

<ul><p>西游记</p><p>三国演义</p>
</ul>

列表的拓展，li标签内部可以继续嵌套列表结构

<h2>四大名著</h2>
<ul><li><h3>西游记</h3><ul><li>唐僧</li><li>孙悟空</li><li>猪八戒</li><li>沙悟净</li></ul></li><li><h3>水浒传</h3><ul><li>宋江</li><li>武松</li><li>林冲</li><li>卢俊义</li></ul></li><li><h3>红楼梦</h3><ul><li>林黛玉</li><li>薛宝钗</li><li>王熙凤</li><li>贾宝玉</li></ul></li><li><h3>三国演义</h3><ul><li>刘备</li><li>曹操</li><li>孙权</li><li>张飞</li></ul></li>

 

无序列表项之间没有先后顺序之分的

列表项之前的前缀样式是有CSS去控制的，目前只负责结构的搭建就可以了

2 有序列表

作用：定义一个有序列表的列表结构

需要有两个标签组成ol，li

ol：英文ordered list（有序列表）

li：英文list item（列表项）

需要注意的是，ol内部嵌套li，它们是父子关系。

规定：ul标签的内部必须只能嵌套li，li标签的内部可以嵌套任何标签，甚至是ul

基本使用

<h2>三年级排名情况</h2>
<ol><li>三年级2班</li><li>三年级1班</li><li>三年级2班</li>
</ol>

ol标签的嵌套

<h2>三年级期末考试排名</h2>
<ol><li><h3>三年级2班</h3><ol><li>王同学</li><li>张同学</li><li>李同学</li></ol></li><li><h3>三年级1班</h3><ol><li>樊同学</li><li>周同学</li><li>孟同学</li></ol></li><li><h3>三年级3班</h3><ol><li>刘同学</li><li>赵同学</li><li>李同学</li></ol></li>
</ol>

我们看得出来ol和ul的最大区别就是使用场景，一个是有序，一个是无序

我们看一下企业中无序列表标签的使用场景

比如腾讯网

有序列表的使用场景，更多的是用来有排行的网页布局，比如九酷音乐排行

3 定义列表

1. 作用：定义一个标题和内容自定义的列表结构
2. 由三个标签组成，dl，dt，dd

dl英文：definition list 表示创建一个自定义列表结构

dt英文：definition term定义主题或者定义术语，表示一个列表的主题

dd英文：definition description 定义解释项，表示解释和说明前面的主题内容

dl内部只能存放dt和dd，dt和dd是同级关系

基本使用：

<h2>国内女明星</h2>
<dl><dt>杨幂</dt><dd>作品：《三生三世》、《宫》、《仙剑奇侠传》等</dd><dt>赵丽颖</dt><dd>作品：《花千骨》、《楚乔传》、《陆贞传奇》等</dd><dt>刘诗诗</dt><dd>作品：《步步惊心》、《仙剑奇侠传》、《女医明妃传》等</dd>
</dl>

   3.每个dt主题的后面可以跟0-多个解释的dd，每个dd解释的就是上一个最近的dt

<dl><dt>杨幂</dt><dd>作品：《三生三世》、《宫》、《仙剑奇侠传》等</dd><dd>家庭：小糯米</dd><dd>迪丽热巴</dd><dt>赵丽颖</dt><dd>作品：《花千骨》、《楚乔传》、《陆贞传奇》等</dd><dd>家庭：冯绍峰</dd><dt>刘诗诗</dt><dd>作品：《步步惊心》、《仙剑奇侠传》、《女医明妃传》等</dd><dd>家庭：吴奇隆</dd>
</dl>

      4.dt和dd都是容器级标签，内部可以存放任意内容

<dl><dt>杨幂</dt><dd><p>作品：《三生三世》、《宫》、《仙剑奇侠传》等</p><p>家庭：小糯米</p><p>工作室：迪丽热巴</p></dd><dt>赵丽颖</dt><dd><p>作品：《花千骨》、《楚乔传》、《陆贞传奇》等</p><p>家庭：冯绍峰</p></dd><dt>刘诗诗</dt><dd><p>作品：《步步惊心》、《仙剑奇侠传》、《女医明妃传》等</p><p>家庭：冯绍峰</p></dd>
</dl>

定义列表的使用场景

我们通过查看京东网站的源码之后发现，dl、dt和dd都是一套标签组成，一个页面有多个dl并不是一个dl内部嵌套多个dt和dd，原因是因为这样会方便搭建布局

下面的定义列表结构是工作中常用的

<dl><dt>杨幂</dt><dd><p>作品：《三生三世》、《宫》、《仙剑奇侠传》等</p><p>家庭：小糯米</p><p>工作室：迪丽热巴</p></dd>
</dl>
<dl><dt>赵丽颖</dt><dd><p>作品：《花千骨》、《楚乔传》、《陆贞传奇》等</p><p>家庭：冯绍峰</p></dd>
</dl>
<dl><dt>刘诗诗</dt><dd><p>作品：《步步惊心》、《仙剑奇侠传》、《女医明妃传》等</p><p>家庭：冯绍峰</p></dd>
</dl>

二、表格

1. 表格基础

表格主要有三个标签组成

table英文：table，作用是定义了一个表格的结构

tr英文是table rows作用定义了表格的行

td英文是table dock作用是定义表格的单元格

关系：table>tr>td

案例：三行四列表格

<table border="1" style="border-collapse:collapse"><tr><td>第1行，第1列</td><td>第1行，第2列</td><td>第1行，第3列</td><td>第1行，第4列</td></tr><tr><td>第2行，第1列</td><td>第2行，第2列</td><td>第2行，第3列</td><td>第2行，第4列</td></tr><tr><td>第3行，第1列</td><td>第3行，第2列</td><td>第3行，第3列</td><td>第3行，第4列</td></tr>
</table>

table标签上有两个属性，一个是border=“1”，这个属性是用来设置表格的边框的，如果没有这个属性，边框不显示，第二个属性style="border-collapse:collapse"是css样式，作用就是合并表格

如果表格需要设置表头，可以使用tr>th设置

<tr><th>第1列</th><th>第2列</th><th>第3列</th><th>第5列</th>
</tr>

2 单元格合并

一部分单元格需要进行跨行跨列合并，可以给对应的td和th标签设置相关属性

rowspan: 上下跨行合并

colspan：左右跨列合并

属性值是数字，数字是几就代表跨几行或者跨几列

步骤：

1. 确定一行有多少td
2. 然后我们再看一共有几行
3. 观察哪个单元格有合并，设置对应属性

案例：

1		2	3			4
5	6		7	8	9	10
	11	12	13			14
15		16	17	18

<table border="1" style="border-collapse: collapse;"><tr><td colspan="2">1</td><td rowspan="2">2</td><td colspan="3">3</td><td>4</td></tr><tr><td rowspan="2">5</td><td>6</td><td>7</td><td>8</td><td  rowspan="2">9</td><td>10</td></tr><tr><td rowspan="2">11</td><td>12</td><td colspan="2">13</td><td rowspan="2">14</td></tr><tr><td>15</td><td>16</td><td>17</td><td colspan="2">18</td></tr></table>

3 表格分区

一个完整的表格主要包含三个部分：表格标题、表格表头、表格的主体

一个table内部实际还有三个分区标签组成

caption： 定义表格的主题

thead： 定义表格的头部，内部嵌套tr>th

tbody： 定义表格主体，内部嵌套tr>td

<table border="1"><!-- 主题分区 --><caption>各地区资产投资情况</caption><!-- 表头分区 --><thead><tr><th rowspan="2">地区</th><th colspan="2">按总量分</th><th colspan="2">按比重分</th></tr><tr><th>自年初累计（亿元）</th><th>去年同期增长（%）</th><th>自年初累计（%）</th><th>自年同期（%）</th></tr></thead><!-- 主体分区 --><tbody><tr><td>全国</td><td>234234</td><td>9.8</td><td>100.0</td><td>100.0</td></tr><tr><td>全国</td><td>234234</td><td>9.8</td><td>100.0</td><td>100.0</td></tr><tr><td>全国</td><td>234234</td><td>9.8</td><td>100.0</td><td>100.0</td></tr><tr><td>全国</td><td>234234</td><td>9.8</td><td>100.0</td><td>100.0</td></tr><tr><td>全国</td><td>234234</td><td>9.8</td><td>100.0</td><td>100.0</td></tr></tbody></table>

三、表单元素

• 表单元素是网页中提供给用户进行点击或者输入的控件

1 form标签

form是表单的意思

form是容器级标签，内部存放可输入的控件。如果输入的表单需要提交到数据，所有的控件需要被form表单包裹

method：方法的意思，指的数据提交的方法，属性值是post和get

action：是数据提交的位置

2 input标签

input标签是输入框的一种，但是不仅仅只有输入框，通过type属性，可以拓展多功能

input的type属性非常丰富

2.1 输入框

输入框有两个重要属性，一个是value，一个placeholder

value：设置默认显示的内容，属性值为自定义内容

placeholder： 属性作用是如果没有value的时候提示用户的文字占位符

<input type="text" placeholder="请输入用户名">

2.2 密码框

通过type值为password设置的

显示效果是输入后通过掩码形式显示的

<input type="password" placeholder="请输入密码">

2.3 单选框

通过type值为radio设置的

单选按钮都是成组出现的

要想实现一组单选按钮的互斥，需要设置相同的name属性

<p>性&nbsp;别：<input type="radio" name='sex'>男<input type="radio" name='sex'>女<input type="radio" name='sex'>保密</p>

2.4 复选框

也叫多选框，通过type值为checkbox设置

复选框可以通过对自身进行多次点击实现选择或者取消

多选框可以选择一个或者多个，建议同一组设置同样的name属性

<p>爱&nbsp;好：<input type="checkbox" name="hobby"> 运动<input type="checkbox" name="hobby"> 绘画<input type="checkbox" name="hobby"> 音乐<input type="checkbox" name="hobby"> 阅读<input type="checkbox" name="hobby"> 其他</p>

单选框和多选框都有一个默认被选择的功能，需要给input标签添加一个checked="checked"

<p>性&nbsp;别：<input type="radio" name='sex' checked="checked">男<input type="radio" name='sex'>女<input type="radio" name='sex'>保密</p><p>爱&nbsp;好：<input type="checkbox" name="hobby"> 运动<input type="checkbox" name="hobby" checked="checked"> 绘画<input type="checkbox" name="hobby"> 音乐<input type="checkbox" name="hobby"> 阅读<input type="checkbox" name="hobby"> 其他</p>

现在有一个现象就是如果点击文字是不能触发对应单选或者多选框的点击事件的，所以需要label标签去扩大触发范围

<label><input type="radio" name='sex' checked="checked">男</label>

2.5 文本域

标签是textarea

我们之前学习的input的单行输入框，只能输入单行文本，如果需要使用多行文本，就使用textarea标签

textarea是一个双标签，是文本级标签

属性值rows和cols

rows：定义文本域的可视区域有几行，单位是数字

cols：当前行显示的字节数量（以英文为准），单位师数字

placeholder：占位符

我们发现textarea默认是可以通过拖动右下角实现放大或者缩小文本域的，如果我们不希望缩放文本域

我们可以通过设置style性的resize属性，值为none，去掉可拖拽区域

<textarea rows="4s" cols="50"  placeholder="请输入自我介绍" style="resize:none"></textarea>

2.6 下拉菜单

需要一组标签进行制作

需要两个标签select和option

select英文就是选择的意思，表示搭建下拉项

option英文是选项的意思，表示搭建下拉项

关系：select>option

<select><option>北京</option><option>上海</option><option>广州</option><option>深圳</option></select>

现在默认的第一个是显示，并不是被选中的，如果希望有默认被选中想，使用selected属性，值也是selected

<select><option>北京</option><option>上海</option><option selected="selected">广州</option><option>深圳</option></select>

四、HTML注释

在代码中有一些特殊结构，特点是在编辑器能看到，在浏览器中看不到，这种结构叫做注释，特点是浏览器不加载

注释主要有两个作用

第一个是用来注解代码，添加合理的解释，从而实现对代码的可读性

<!-- 头部部分 --><div class="header"><!-- 导航 --><div class="nav"><!-- logo内容 --><div class="logo"></div></div></div><!-- 内容部分 --><div clsss="content"></div><!-- 底部部分 --><div class="footers"></div>

语法 <!-- 被注释的内容 -->

快捷键ctrl+/

第二个作用：先注释掉一部分不使用的代码，便于后期恢复

我们多用于代码调试

五、字符实体

w3c手册：https://www.w3school.com.cn/html/html_entities.asp

在网页中普通文字部分，在键盘中是打不出来的，比如我们的版权符号，商标符号等等。还有一种场景就是替代字符，HTML会识别一部分字符

比如下面的场景

<div>好开心啊，今天老师带我们学习了<h1>标签的作用</div>

我们发现浏览器会识别文本中的<h1>单独标签进行加载了

解决办法，利用字符实体进行转换

<div>好开心啊，今天老师带我们学习了&lt;h1>标签的作用</div>

字符实体的规定是以&符号开头‘;’结尾

罗列常用的字符实体

 	实体空格
小于号	<
大于号	>
版权符号	©
注册商标	®
引号	"
和号	&

• div和span

div和span都是常用的布局标签，俗称盒子

div：分割跨度大跨度

div是容器级标签，双标签

span：小区域小跨度

作用是用来分割页面的布局，div指的是跨度布局分割，span是文字分割

HTML+CSS又叫做div+CSS

div主要作用是进行网页布局的拆分，没有明确的语义

span标签的作用是一个极限小，只适用于文字的跨度划分

<p>今天一共收入 <span style="color:red;">300</span> 元</p>