文章目录

19、表格标签
- 示例
表格属性
- 示例
- 练习
20、表单标签
- 示例
21、表格表单组合
22、div和span
23、CSS语法格式
24、CSS样式的引入方式
- 1、内联（行内、行间）样式
- 2、内部样式
- 3、外部样式
25、CSS颜色表示法
- 1. 单词表示法
- 2. 十六进制表示法
- 3. rgb三原色表示法
- - 练习
26、CSS背景样式
27、CSS边框样式
- 练习
28、CSS文字样式
- 1. font-family：字体类型
- 2. font-size：字体大小
- 3. font-weight：字体粗细
- 4. font-style：字体样式
- 5. color：字体颜色
- - 示例
29、CSS段落样式
- 1. text-decoration：文本修饰
- 2. text-transform：文本大小写（针对英文段落）
- 3. text-indent：文本缩进
- 4. text-align：文本对齐方式
- 5. line-height：定义行高
- 6. letter-spacing：字之间的间距
- word-spacing：词之间的间距（针对英文段落）
- - 练习
30、CSS复合样式
31、CSS选择器
- 1. ID选择器
- 2. CLASS选择器
- - 练习

19、表格标签

<table>：表格的最外层容器
<caption>：定义表格标题
<tr>：定义表格行
<th>：定义表头
<td>：定义表格单元
注：之间是有嵌套关系的，要符合嵌套规范。
语义化标签：<tHead>、<tBody>、<tFoot>
**注：在一个table中，tBody是可以出行多次的，但是tHead、tFoot只能出现一次。

示例

<table><caption>天气预报</caption><tHead><tr><th>日期</th><th>天气情况</th><th>出行情况</th></tr></tHead><tBody><tr><td>2022年10月21日</td><td><img src="./img/阴.png" alt=""></td><td>气温较低,出行注意保暖</td></tr><tr><td>2022年10月22日</td><td><img src="./img/多云.png" alt=""></td><td>温度适宜又有微风相伴,适合出行</td></tr></tBody><tFoot></tFoot></table>

表格属性

border：表格边框
cellpadding：单元格内的空间
cellspacing：单元格之间的空间

<table border="1" cellpadding="15" cellspacing="7">

rowspan：合并行
colspan：合并列
align：左右对齐方式（left、center、right）
valign:上下对齐方式（top、middle、bottom）

示例

 <tr align="right" valign="top"><td rowspan="2">2022年10月21日</td><td>白天</td><td><img src="./img/阴.png" alt=""></td><td>气温较低,出行注意保暖</td></tr><tr><td>夜晚</td><td><img src="./img/多云.png" alt=""></td><td>气温较低,出行注意保暖</td></tr>

练习

<table border="1" cellpadding="17" cellspacing="0"><tHead><tr><th>班次名称</th><th>科目</th><th>授课内容</th><th>增值服务</th><th>课时</th><th>价格</th><th>试听</th><th>购买</th></tr></tHead><tBody><tr align="center"><td rowspan="3" >真题精解班</td><td>行测+申论</td><td>全科历年真题精解</td><td rowspan="3">课后赠2套模拟卷24小时以内答疑</td><td>48</td><td>1280元</td><td><img src="./img/1.png" alt="" width="50" height="50"></td><td><img src="./img/2.png" alt="" width="50" height="50"></td></tr><tr align="center"><td>行测</td><td>行测历年真题精解</td><td>32</td><td>980元</td><td><img src="./img/1.png" alt="" width="50" height="50"></td><td><img src="./img/2.png" alt="" width="50" height="50"></td></tr><tr align="center"><td>申论</td><td>申论历年真题精解</td><td>16</td><td>580元</td><td><img src="./img/1.png" alt="" width="50" height="50"></td><td><img src="./img/2.png" alt="" width="50" height="50"></td></tr><tr align="center"><td rowspan="3">高分技巧班></td><td>行测+申论</td><td>全科技巧强化</td><td rowspan="3">入学试卷测评24小时内答疑</td><td>32</td><td>980元</td><td><img src="./img/1.png" alt="" width="50" height="50"></td><td><img src="./img/2.png" alt="" width="50" height="50"></td></tr> <tr align="center"><td>行测</td><td>行测速解技巧强化</td><td>18</td><td>680元</td><td><img src="./img/1.png" alt="" width="50" height="50"></td><td><img src="./img/2.png" alt="" width="50" height="50"></td></tr><tr align="center"><td>申论</td><td>申论速解技巧强化</td><td>14</td><td>580元</td><td><img src="./img/1.png" alt="" width="50" height="50"></td><td><img src="./img/2.png" alt="" width="50" height="50"></td></tr></tBody>
</table>

20、表单标签

常见的属性：checked、disabled、name、for…
<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"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>

<textarea>：多行文本框

<h2>多行文本框</h2><textarea name="" id="" cols="30" rows="10"></textarea>

<select>、<option>：下拉菜单

<h2>下拉菜单</h2><select><option selected disabled>请选择</option><option>扬州</option><option selected>南京</option><option>苏州</option></select><select size="2"><option>扬州</option><option>南京</option><option>苏州</option></select><select multiple><option>扬州</option><option>南京</option><option>苏州</option></select><input type="file"multiple>

<label>：辅助表单

 <input type="radio" name="gender" id="man"><label for="man">男</label><input type="radio" name="gender" id="woman"><label for="woman">女</label>

21、表格表单组合

<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 align="center"><td colspan="2"><input type="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset"></td></tr></tBody> </table></form>

22、div和span

<div>：做一个区域划分的块
<span>：对文字进行修饰的内联

23、CSS语法格式

格式：
选择器 { 属性1 ：值1；属性2：值2 }
基本样式：
width：宽
height：高
background：背景色
长度单位：
1、px——>像素
2、%——>百分比
外容器——>600px , 当前容器50%——>300px
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: 10%; height: 100px; background-color: aqua}span{ background-color: aquamarine;}</style>
</head>
<body><div>这是一个块</div><div>又是一个块</div><span>这是一个内联</span>
</body>
</html>

24、CSS样式的引入方式

1、内联（行内、行间）样式

在html标签上添加style属性来实现的

<style>div{width: 100px; height:100px;background-color: royalblue}
</style>

2、内部样式

在style标签内添加的样式
区别：内部样式的代码可以复用，符合W3C的规范标准，尽量让结构和样式分开处理。

<body><div style="width: 100px; height:100px;background-color: red;">这是一个块</div><div style="width: 100px; height:100px;background-color: red;">另外一个块</div><div>这是一个块</div><div>另外一个块</div>
</body>
</html>

3、外部样式

引入一个单独的CSS文件，name.css
通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性表示资源的地址。
通过@import方式引入外部样式（这种方式有很多问题，不建议使用）
link的rel属性：http://www.w3school.com.cn/tags/att_link_rel.asp
link与@import的区别：http://www.cnblogs.com/my–sunshine/p/6872224.html

<!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"><link rel="stylesheet" href="./common.css">     <!-- 引入一个单独的CSS文件 --><title>Document</title><style>/* @import url('./common.css') */</style>
</head>
<body><div>这是一个块</div>
</body>
</html>

25、CSS颜色表示法

1. 单词表示法

red blue green…

2. 十六进制表示法

#000000 #ffffff
0 1 2 3 4 5 6 7 8 9 a b c d e f

3. rgb三原色表示法

rgb(0,0,0) , rgb(255,255,255)
取值范围0~255
获取颜色的工具:photoshop工具

练习

<!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{background-color: #000000;}div{background-color: rgb(0, 0, 0);} */div{width: 100px;height: 100;background-color: red;}</style><style>div{width: 200px;height: 150;background-color: blue;} </style> -->
</head>
<body><div style="width: 100px; height:100px;background-color: red;">这是一个块</div> <div style="width: 100px; height:100px;background-color: blue;">另外一个块</div>
</body>
</html>

26、CSS背景样式

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：背景图随滚动条移动的方式
scrol：（默认值）背景位置是按照当前元素进行偏移的
fixed：背景位置是按照浏览器进行偏移的

<!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>body{ height: 2000px;}div{ width: 300px; height: 300px; background-color : red;background-image: url(./img/dog.jpg);background-repeat: repeat-y;background-position: right bottom;background-attachment: scroll }</style>
</head>
<body><div></div>
</body>
</html>

27、CSS边框样式

1、border-style：边框样式

solid：实线
dashed：虚线
dotted：点线

2、border-width：边框大小

px…

3、border-color：边框颜色

red #f00…

边框也可以针对某一条边进行单独设置,比如border-left-style：中间是方向（ left 、right、top、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><style>body{background-color:mediumpurple;}div{width: 0px;height: 0px;border-top-color:azure ;border-top-style:solid ;border-top-width:20px ;border-right-color:transparent ;border-right-style:solid ;border-right-width:20px ;border-bottom-color:transparent ;border-bottom-style:solid ;border-bottom-width:20px ;border-left-color:transparent;border-left-style:solid ;border-left-width:20px ;}</style>
</head>
<body><div></div>
</body>
</html>

<!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: 300px;height: 300px;border-style: solid;border-color: blue;border-width: 1px;} *//* div{width: 300px;height: 300px;border-style: dashed;border-color: blue;border-width: 1px;} *//* div{width: 300px;height: 300px;border-style: dotted;border-color: blue;border-width:30px;} */div{width: 300px;height: 300px;border-right-style:dotted ;border-right-width:30px;border-right-color: rgb(20, 184, 196) ;border-top-style:solid ;border-top-width:20px;border-top-color:rgb(159, 92, 115)}</style>
</head>
<body><div></div>
</body>
</html>

28、CSS文字样式

1. font-family：字体类型

英文字体：Arial，‘Times New Roman’
中文字体：微软雅黑，宋体
中文字体的英文名称
微软雅黑：'‘Microsoft YaHei’
宋体：SimSun4
衬线体与非衬线体
注意事项：
1、设置多字体方式
2、引号的问题（空格要加引号）

2. font-size：字体大小

默认：16px
写法：number（px）、单词（不推荐使用）

注：字体大小一般为偶数

3. font-weight：字体粗细

模式：正常（normal）、加粗（bold）
写法：单词（normal、bold）、number（100 200 … 900，100到500都是正常的，600到900都是加粗的）

4. font-style：字体样式

模式：正常（normal）、斜体（italic）
写法：单词（normal、italic）
注：oblique也是表示斜体，用的比较少，了解即可
*区别：
1、italic 带有倾斜属性的字体才可以设置倾斜操作
2、oblique 没有倾斜属性的字体也可以设置倾斜操作

5. 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{font-family: Arial;} *//* div{font-family: 'Times New Roman';} *//* div{font-family: 宋体,'Times New Roman',微软雅黑;} *//* div{font-size: 30px;} *//* div{font-weight: bold;} *//* div{font-style: italic;color: aquamarine;} */</style>
</head>
<body><!-- <div>这是一段文字</div><p>这是一段文字</p><div>this is a text</div><p>this is a text </p> -->
</body>
</html>

29、CSS段落样式

1. text-decoration：文本修饰

下划线：underline
删除线：line-through
上划线：overline
不添加任何装饰：none
注：添加多个文本修饰：line-through underline overlinne

2. text-transform：文本大小写（针对英文段落）

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

3. text-indent：文本缩进
首行缩进
em单位：相对单位，1em永远都是跟字体大小相同

4. text-align：文本对齐方式

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

5. line-height：定义行高

什么是行高：一行文字的高度，上边距和下边距是等价关系。
默认行高：不是固定值，而是变化的，根据当前字体的大小在不断地变化。
取值：1、number（px）、 scale（比例值，跟文字大小成比例）

6. letter-spacing：字之间的间距

word-spacing：词之间的间距（针对英文段落）

英文和数字不自动折行问题：
1、word-break：break-all；（非常强烈的折行）
2、word-wrap：break-word；（不是那么强烈的折行，会产生一些空白区域）

练习

<!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: 800px;}h1{text-align: center;color: #FF6604;}h2{color: #0098EF;text-indent: 2em;}#p1{font-style: italic;font-weight: bold;text-indent: 2em;}#p2{color: #94F18E;line-height: 30px;text-indent: 2em;}#p3{color: #71F4F9;line-height: 30px;text-indent: 2em;text-decoration: underline;font-style: italic;}#p4{font-weight: bold;letter-spacing: 10px;line-height: 30px;text-indent: 2em;}#p5{color:#E58CDD;line-height: 30px;text-indent: 2em;}</style>
</head>
<body><div><h1>Angelababy简介</h1><h2>基本信息</h2><p id="p1">杨颖(Angelababy),1989年2月28日出生于上海,13岁时移居香港,中国影视女演员。</p><p id="p2">2009年主演电影《全城热恋》。2012年,凭借爱情片《第一次》获得第十三届华语电影传媒大奖“最受瞩目女演员奖”。2013年1月,《南都娱乐周刊》举办新生代四小花旦的评选活动,杨颖以总分70分的综合得分与刘诗诗、杨幂、倪妮共同当选为新一代“四小花旦”;同年在徐克导演的影片《狄仁杰之神都龙王》中担任女主角,并且获得第21届北京大学生电影节最受欢迎女演员奖;4月,Angelababy主演电视剧《大汉情缘之云中歌》。2014年加盟综艺节目《奔跑吧兄弟》并主演电影版;同年主演顾长卫导演的电影《微爱之渐入佳境》,票房突破2.8亿。2015年5月参演好莱坞电影《独立日2》;7月,主演电影《摆渡人》。</p><h2>早年经历</h2><p id="p3">1989年2月28日,Angelababy出生在上海,中文名杨颖,杨颖自小随家人到上海定居,在上海的演艺学校学演戏及跳舞。13岁时,杨颖回香港加入了Talent Bang,还担任Viva Club Disney主持。</p><h2>个人生活</h2><p id="p4">2015年5月27日,黄晓明和Angelababy(杨颖)在青岛民政局领证完婚。</p><p id="p5"> 2015年10月8日,黄晓明和Angelababy在上海展览中心正式举办婚礼。上午8点,Angelababy工作室曝光了两人的婚纱照,照片中,两人以巴黎地标建筑为背景,浪漫亲吻。</p></div>
</body>
</html>

30、CSS复合样式

复合的写法，是通过空格的方式实现的。复合写法有的是不需要关心顺序的，例如background、border；有的是需要关心顺序的，例如font。

background：red url () repeat 0 0；
border：1px red solid；
font：
注：最少要有两个值 size family
weight style size family √
style weight size family √
weight style size/line-height family √
注：如果非要混合去写的话，那么要先写复合样式，再写单一样式，这样样式才不会被覆盖掉。

<!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: 300px;height: 300px;background: red url(./img/dog.jpg) no-repeat center center;/* border: 3px black solid; */border-right:3px blue dashed ;font: bold italic 30px/100px 宋体;}</style>
</head>
<body><div>这是一段文字</div>
</body>
</html>

31、CSS选择器

1. ID选择器

css：#elem{ }
html：id=“elem”
**注：

ID是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的。
命名的规范，由字母、下划线、中划线、字母（并且第一个不能是数字）
驼峰写法：
searchButton（小驼峰）<div id="searchbuttom"></div>
SearchButton（大驼峰）SearchSmallButton
短线写法：search-small-button
下划线写法：search_small_button

<style>
#div1{background: green;}
#div2{background: blue;}
</style>
<body><div id="div1">这是一个块</div><div id="div2">这又是一个块</div>
</body>

2. CLASS选择器

css：.elem{ }
html：class=“elem”

**注：

class选择器是可以复用的。
可以添加多个class样式。
多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。
标签+类的写法

<style>
.box{background: red;}
/* .box{background: red;}.content{font-size: 30px;background: blue;} */
</style>
<body><div class="box">这是一个块</div><div class="box">这又是一个块</div><p class="box">这是一个段落</p><!-- <div class="box content">这是一个块</div> -->
</body>

练习

<!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{background: red;} *//* #div1{background: green;}#div2{background: blue;} *//* .box{background: red;} */.box{background: red;}.content{font-size: 30px;background: blue;}</style>
</head>
<body><!-- <div id="div1">这是一个块</div><div id="div2">这又是一个块</div><div id="searchbuttom"></div> --><!-- <div class="box">这是一个块</div><div class="box">这又是一个块</div><p class="box">这是一个段落</p> --><div class="box content">这是一个块</div>
</body>
</html>

Web前端20~45相关推荐

一文读懂前端技术演进：盘点Web前端20年的技术变迁史
本文原文由作者"司徒正美"发布于公众号"前端你别闹",即时通讯网收录时有改动,感谢原作者的分享. 1.引言 1990 年,第一个Web浏览器的诞生:1991 年 ...
推荐20个很有帮助的 Web 前端开发教程
在平常的搜索中,我碰到过很多有趣的信息,应用程序和文档,我把它们整理在下面这个列表.这是收藏的遇到的有用内容的一个伟大的方式,可以在你需要的时候方便查阅.相信你会在这个列表中发现对你很有用的资料. 您 ...
苦逼or高薪程序猿,你选谁?WEB前端这个行业普遍年薪20万+,吃鸡如开挂!
在这个产品风卷残云,软件如雨后春笋蹭蹭蹭冒的时代,我觉得未来是属于程序猿的,大家也争前恐后的想当程序猿. 有的人觉得,程序猿实现了自己改变世界的梦想,但是有的人认为这是一条不归路.你真的适合当程序猿吗 ...
5条能让web前端至少手拿20万年薪的特性！
初级web前端工程师,如何进阶成为最牛的web前端,手拿20万起的年薪?这里总结了最牛web前端必须具备的5条特性,快来看看,你现在拥有几条呢! 如何定义牛逼工程师? 有软件工程方面的研究说,对于开发 ...
Web前端HTML+CSS全套（1~20）
Web前端HTML+CSS全套(1~20) 拨云见日 CSS基础切图流程 PC企业站布局 PC游戏站布局溯本求源 HTML扩展 CSS扩展 HTMLS新语法 CSS3新语法兼容与hack 风生水 ...
web前端学习路线-20个真实web开发项目集合
目前web前端工程师日均岗位缺口已经超过50000,随着互联网+的深入发展,html5作为前端展示技术,市场人才需求量将呈直线上涨. Web前端工程师的岗位职责是利用HTML.CSS.Java.DOM ...
web前端学习路线（含20个真实web开发项目集合）
目前web前端工程师日均岗位缺口已经超过50000,随着互联网+的深入发展,html5作为前端展示技术,市场人才需求量将呈直线上涨. Web前端工程师的岗位职责是利用HTML.CSS.Java.DOM ...
20届 web前端实习生的应聘过程
第一篇博客:聊聊找web前端实习的过程吧~ 首先,我的实习目标很明确是web前端开发,三月中旬就开始投简历啦,现在在海康威视实习.在这里我想强调一下实验室的氛围是非常重要的!!!如果有小伙伴能一起找实 ...
web前端学习第二周（21~45）
一.列表嵌套案例 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...

Web前端20~45