HTML+CSS基础知识2

1.嵌套列表
2.表格标签
3.表格属性
4.表单标签
5.表格与表单的组合
6.`<div>`与`<span>`
7.css的基础语法
8.css样式的引入方式
9.css中的颜色表示法
10.css背景样式
11.css背景样式
12.css文字样式
13.css段落样式
14.css复合样式
15.css选择器

1.嵌套列表

列表之间可以互相嵌套形成多层级列表
eg.

<ul><li>江苏省<ul><li>南京市</li><li>扬州市</li></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>
</dl>

<dl><dt><strong>好美味小吃</strong></dt><dd><ul><li>小吃类<ul><li>煮面干</li><li>蛋炒饭</li></ul>    </li>
                <li>卤味类
                    <ul>
                        <li>鸭肠</li>
                        <li>鱿鱼</li>
                    </ul>
                </li>
              <li>套餐类
                <ul>
                    <li>猪肉拌饭</li>
                    <li>猪脚拌饭</li>                </ul>
              </li>
              <li>炖罐类
                <ul>
                    <li>羊肉枸杞</li>
                    <li>猪心莲子</li>
                </ul>
              </li>

            </ul>
</dl>

（嵌套列表必须要嵌套完整，内部依旧使用完整的结构体系）

2.表格标签

<table>:表格的最外层容器

<tr>：定义表格行

<th>：定义表头

<td>：定义表格单元

<caption>：定义表格标题

语义化标签:<tHead>``<tBody>``<tFood>

注：在一个table中，<tHead><tFood>只能出现一次，<tBody>可以出现多次

 <table><caption>天气预报</caption><tHead><tr><th>日期</th><th>天气情况</th><th>出行情况</th></tr> <tHead/>  <tBody>    <tr><td>2020.01.02</td><td>晴</td><td>适合出行</td></tr><tr><td>2020.01.03</td><td>雨</td><td>不宜出行</td></tr><tBody/>    </table>

3.表格属性

border:表格边框

cellpadding:单元格内的空间

cellspacing:单元格之间的空间

colspan合并列

rowspan:合并行

align:左右对齐方式（left、center、right）

valign:上下对齐方式（top、middle、bottom）

 <table border="2">

<table border="2" cellpadding="25">

<table border="2" cellpadding="25" cellspacing="12">

colspan和rowspan

<table border="2" cellpadding="25" cellspacing="12"><caption>天气预报</caption><tr><th>日期</th><th>日期</th><th>天气情况</th><th>出行情况</th></tr> <tr><td>2020.01.02</td><td>白天</td><td>晴</td><td>适合出行</td></tr><tr><td>2020.01.03</td><td>白天</td><td>雨</td><td>不宜出行</td></tr></table>

利用colspan后

 <th colspan="2">日期</th>

<table border="2" cellpadding="25" cellspacing="12"><caption>天气预报</caption><tr><th colspan="2">日期</th><th>天气情况</th><th>出行情况</th></tr> <tr><td>2020.01.02</td><td>白天</td><td>晴</td><td>适合出行</td></tr><tr><td>2020.01.02</td><td>夜晚</td><td>晴</td><td>适合出行</td></tr><tr><td>2020.01.03</td><td>白天</td><td>雨</td><td>不宜出行</td></tr><tr><td>2020.01.03</td><td>夜晚</td><td>雨</td><td>不宜出行</td></tr></table>

利用rowspan后

<tr><td rowspan="2">2020.01.02</td><td>白天</td><td>晴</td><td>适合出行</td></tr><tr><td>夜晚</td><td>晴</td><td>适合出行</td></tr><tr><td rowspan="2">2020.01.03</td><td>白天</td><td>雨</td><td>不宜出行</td></tr>

使用rowspan

align/valign

<table align="right">

练习：

<table border="3" cellpadding="5"><tr><th>班次名称</th><th>科目</th><th>授课内容</th><th>增值服务</th><th>课时</th><th>价格</th></tr><tr valign="middle"><td rowspan="3">真题解析班</td><td>行测+申论</td><td>全科历年真题</td><td rowspan="3">课后模拟案卷</td><td>48</td><td>1280</td></tr><tr><td>行测</td><td>行测真题</td><td>32</td><td>1520</td></tr><tr><td>申论</td><td>申论真题</td><td>25</td><td>3620</td></tr><tr valign="midddle"><td rowspan="3">高分技巧班</td><td>行测+申论</td><td>全技巧</td><td rowspan="3">入学测评</td><td>48</td><td>1235</td></tr><tr><td>行测</td><td>技巧强化</td><td>20</td><td>5210</td></tr><tr><td>申论</td><td>理论强化</td><td>62</td><td>3620</td></tr></table>

4.表单标签

<form>:表单的最外层容器

<input>（单标签）:标签用于手机用户信息，根据不同的type属性值，展示不同的控件，如输入框，密码框，复选框…（无嵌套规范）

<form action="./html/list.html">/*action作为下述文件的上传地址,提供了一个地址的作用*/<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">否/*利用name来告诉系统这两者是一个属性*/<h2>上传文件</h2><input type="file"><h2>提交和重置按钮</h2><input type="submit"><input type="reset"></form>

textarea:多行文本框

 <h2>多行文本框</h2><textarea cols="20" rows="20"></textarea>

<select>/<option>:下拉菜单

<select><option selected disabled>请选择</option><option>巧克力</option><option>菠萝蜜</option><option>苹果派</option>
</select>
<select size="2"><option>巧克力</option><option>菠萝蜜</option><option>苹果派</option>
</select>
<select multiple><option>巧克力</option><option>菠萝蜜</option><option>苹果派</option>
</select>

<lable>:辅助表单

<h2>单选框</h2>
<input type="radio" name="gender" id="yes"><label for="yes">是</label><input type="radio" name="gender" id="no"><label for="no">否</label>

练习：

<h4>设置密码：</h4> <input type="password">
<h4>真实姓名：</h4><input type="text">
<h4>性别：</h4>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<h4>生日：</h4>
<select><option selected disabled>请选择</option>年<option>2020.01.23</option>
</select>
<select><option selected disabled>--</option>月
</select>
<select><option selected disabled>--</option>日
</select>
<h4>我现在：</h4>
<select><option selected disabled>请选择身份</option>(非常重要)
</select>
<h4>验证码：</h4> <input type="text">

5.表格与表单的组合

示例：

<form action=""><table border="2" cellpadding="5"><tr><td rowspan="4">总体信息</td><td colspan="2" align="center">用户注册</td></tr><tr><td>用户名：</td><td><input type="text" placeholder="请输入用户名"></td></tr><tr><td>密码：</td><td><input type="password" placeholder="请输入密码"></td></tr><tr><td align="center" colspan="2"><input type="submit"><input type="reset"></td></tr></table></form>

(表格一般写在表单内部，因为表单无嵌套要求，但表格有)

6.`<div>`与`<span>`

<div>（块）
div全称为division，用来划分区域，类似于一个盒子，可以装段落、标题、图像等各种构成网页的元素。HTML中多数标签都可以嵌套在div中，div也可以嵌套多层div，将网页分割为不同的规划布局
<span>(内联)
用来修饰文字，<div>和<span>都是没有默认样式的，需要css配合才行

<div><h2> <a href="#">HTML 教程</a></h2><a href="#"><img src="data:images/1.png.PNG" alt="" weight="80" height="80"></a><p>现在开始学习 HTML!HTML 实例 学习100 个实例!使用我们的编辑器,HTML 测验!HTML...</p><a href="#">www.w3school.com.cn/html/ind.....</a></div>

7.css的基础语法

格式：div{属性1：值1；属性2：值2} span{属性1：值1；属性2：值2}
同时对多个不同块进行不同的样式修饰可以利用id属性<div id="">

单位：px–像素pixel、%–百分比（外容器–600px 当前容器50%–300px）

基本样式：width、height、background-color

<!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: 50px;height: 90px;background-color: rgb(174, 174, 227);}span{background: rgb(55, 225, 152);}</style>
</head>
<body><div>俄罗斯方块</div><span>乐高玩具</span>
</body>
</html>

8.css样式的引入方式

内联（行间、行内）样式：在html标签上添加<style>属性来实现
内部样式：在<style>标签内添加的样式

注：内部样式的优点，可以复用代码，符合w3c的规范标准，进行结构和样式分开处理
外部样式：引入一个单独的css文件 name.css

方法一：通过标签引入外部资源，link标签中的rel属性指定资源跟页面的关系；herf属性指定资源地址，
rel属性规定当前文档与被链接文档间的关系
（只有rel属性的stylesheet：【外部样式表】得到所有浏览器的支持，其他值只得到部分的支持）

方法二：@import引入外部链接

  <style>@import url("./comment.css")</style>

9.css中的颜色表示法

单词表示法：red、blue
十六进制表示法：#00000
rgb表示法：rgb（255,255,255）
取值范围0~255
获取颜色的工具：

提取颜色的下载地址：https：//www.baidufe.com/fehelper

photoshop工具

10.css背景样式

<background-color>：背景颜色

<background-image>：背景图片（css作用的区域的背景图，出了css作用区域则不显示）
<url>（背景默认地址）
默认都会水平垂直均铺满
<background-repeat>：背景图片的平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
no-repeat 不平铺
repeat （默认值，全都平铺）

<background-position>：背景图片的位置
x y：number（px、%）
单词： x：left、center、right
y：top、center、bottom

<background-attachment>：背景图随滚动条的移动方式
scroll：默认值（背景位置按照当前元素进行偏移）背景动
fiexd：背景位置按照浏览器进行偏移，（覆盖）背景不动

<style>div{width: 200px;height: 200px;background-color: rgb(243, 150, 150);background-image:url(./QQ图片20221026145944.jpg);background-repeat: no-repeat;background-position: center;background-attachment: scroll;}</style>

视觉差的实现:通过background-attachment来实现

scroll图片跟随滚动条滚动
fixed图片不动

11.css背景样式

<border-style>：边框样式
solid：实线
dashed：虚线
dotted：点线
<border-width>：边框粗细
px…
<border-color>：边框颜色
red、#0000…
边框也可以针对某一条边特定设置：border-left/right/top/bottom-

<style>div{width: 200px;height: 200px;background-color: rgb(240, 174, 174);border-width: 30px;border-bottom-style: dashed;border-bottom-color: aqua;border-right-style: dotted;border-right-color: aquamarine;border-top-style: solid;border-top-color: blue;}</style>

利用border属性实现三角形

<style>div{width: 0px;height: 0px;border-top-color: aliceblue;border-top-width: 30px;border-top-style: solid;border-bottom-color: aliceblue;border-bottom-width: 30px;border-bottom-style: solid;border-left-color: rgb(242, 136, 159);border-left-width: 30px;border-left-style: solid;border-right-color: aliceblue;border-right-width: 30px;border-right-style: solid;}</style>

12.css文字样式

<font-family>：字体类型
英文字体：Arial，‘Time New Roman’
中文字体：微软雅黑，宋体

中文字体的英文名称：微软雅黑’Microsoft YaHei’
宋体：SimSun
英文字体只针对英文，但中文样式可以中英文字体两者都对应
衬线体、非衬线体
(设置多个字体：防止计算机没有部分字体;
字体中出现空格时要用’'单引号引起来)

 <style>#div1{font-family: Arial;}#div2{font-family: 'Times New Roman';}</style>
</head>
<body><div id="div1">我爱阅读</div><p>我爱阅读</p><div id="div1">I like reading</div><p>I like reading</p><div id="div2">我爱阅读</div><p>我爱阅读</p><div id="div2">I like reading</div><p>I like reading</p>
</body>

<fond-size>：字体大小
默认写法：px

单词写法：
注：字体大小一般为偶数
<fond-weight>：字体粗细

模式：正常–normal

加粗–bold

利用number（px）100_{500都是普通，600}900加粗

<fond-style>：字体样式

正常：normal

斜体：italic带有倾斜属性的字体可以设置

oblique没有倾斜属性的也可以设置倾斜操作

color：字体颜色

示例：

<!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>#div1{font-family: 宋体;font-weight: 700;font-size: 18px;color: brown;}#div2{font-size: 16px;color: blueviolet;font-style: italic;}#div3{font-weight: bold;color: aqua;}</style>
</head>
<body><div id="div1"><h1>喜羊羊与灰太狼</h1></div><div id="div2"><h2>主题介绍</h2><p>《喜羊羊与灰太狼》是由广东原创动力文化传播有限公司制作的原创动画系列作品，以友情、搞笑、童话为主题。该动画以羊和狼两大族群间妙趣横生的故事为主线，讲述了羊狼凭借友谊和热爱，共同保卫家园、完成梦想的励志故事。</p></div><div id="div3"><h2>内容梗概</h2><p>截至2022年7月,《喜羊羊与灰太狼》共播出作品37部2719集主线25部2042集、网络短剧12部677集、电影10部、舞台剧5部</p></div></body>
</html>

13.css段落样式

<text-decoration>：文本装饰

取值：下划线underline、删除线line-through、上划线overline、不添加任何装饰none
添加多个：通过空格添加

<text-transform>：文本大小写（仅针对英文）

取值：小写lowercase、大写uppercase、只针对首字母大写capitalize

<text-indent>：文本缩进

首行缩进
em单位：相对单位

<text-align>：文本对齐方式

left、right、center、justify（两端点对齐）

<line-height>：定义行高

定义：一行文字的高度，上边距和下边距相等
默认：默认行高不是固定值，根据当前字体大小不断变化
取值：number（px）|比例值跟文字大小成比例

<letter-spacing>：字之间的间距

<word-spacing>：词之间的间距（针对英文）

强行折行：针对英文和数字
<word-break：break-all>（非常强烈的折行）
<work-warp：break-word>（没有那么强烈的折行，会产生一些空白区域）

eg.

<!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>h2{font-size: 20px;font-weight: bold;color: brown;text-align: center;}#div1{font-size: 18px;color: aqua;font-style: italic;text-indent: 2em;}#p1{color: blueviolet;text-align: justify;text-indent: 2em;line-height: 10px;}#p2{color: blue;text-decoration: underline;text-transform: capitalize;text-align: center;}#p3{text-indent:1em;text-align: left;text-transform: lowercase;color: rgb(236, 142, 27);text-decoration: line-through;}#div2{width: 200px;px;height: 200px; word-break:break-all;border-color: brown;border-width: 5px;border-style: solid;}</style>
</head>
<body><h2>海蒂与爷爷</h2><div id="div1">基本信息</div><p id="p1">《海蒂和爷爷》是映欧嘉纳影业公司出品德国剧情电影，由阿兰·葛斯彭纳执导，佩特拉·比翁迪娜·沃尔普编剧，阿努克·斯特芬、伊莎贝尔·奥特曼、安娜·申斯等主演，该片于2015年12月10日在德国上映于2019年5月16日在中国内地上映</p><div id="div1">角色介绍</div><p id="p2">海蒂是个聪明伶俐，且具有乐观开朗的性情，心地善良的孩子。一岁时即失去双亲，因此到五岁之前都是由姨母照顾。由于姨母必须出外工作，便把她带至居于阿尔卑斯山的爷爷那里。在山上的生活让海蒂自由奔放的性格彻底散发，并和牧羊少年成了好朋友</p><div>影片评价</div><p id="p3">影片《海蒂和爷爷》中的故事在不同的空间场景中上演，阿尔卑斯山和法兰克福这两座不同的城市，分割成主人公所经历的两段不同的故事，而每一阶段发生的故事对应了年复一年的时光。空间与时间的循环不仅仅是小海蒂成长的标志，</p><div id="div2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></body>
</html>

14.css复合样式

一个css属性只控制一种样式----单一样式

一个css属性控制多种样式----复合样式

（注意两者尽量不要混写，如果非要混写，一定要先写复合样式再写单一样式）

复合写法是通过空格实现的，有的无关顺序，如background、border；有的有关顺序，如font（至少要有两个值size family ，顺序不可调换）

size family必须按顺序放在最后

weight style size family √

style weight size family √

weight style/line-height family √

<style>div{width: 300px;height: 300px;background: rgb(223, 178, 178) url(./QQ图片20221026145944.jpg) no-repeat center center;border:darkblue dotted 4px ;font:bold italic  20px 宋体;text-align: center;}</style>

15.css选择器

idx选择器

css：#elem{} ---- html：id=“elem”

注：一个页面中，id值是唯一的；

命名规范：字母 _ - 数字（命名的第一位不能是数字）

<div id="word">  (√)
<div id="wor_d"> (√)
<div id="wor-d"> (√)
<div id="word1"> (√)
<div id="2word"> (×)

写法：

驼峰写法：searchButton(小驼峰) SerchButton(大驼峰)searchSmallButton

短线写法：search-small-button

下划线写法：search_smaal_button

class选择器

css: .elem{}----html: class=“elem”

注：1.claas选择器可以复用

2.可以添加多个class样式

3. 多个样式的时候，样式的优先根据css中的顺序决定，而不是class属性中的顺序

4.标签+类的写法<p.box>等