web前端基础

1、嵌套列表

注:列表之间可以互相嵌套，形成多层级的列表。

<!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>
</head>
<body><h1>好美味小吃</h1><ul><li>小吃类<ul><li>煮粉干</li><li>拌青菜</li><li>蛋炒饭</li></ul></li><li>卤味类<ul><li>鸭肠</li><li>面筋</li><li>牛肚</li></ul></li><li>套餐类<ul><li>卤面筋饭</li><li>猪肉肉饭</li><li>卤猪脚饭</li></ul></li><li>炖罐类<ul><li>猪蹄黄豆</li><li>猪肚莲子</li><li>猪心枸杞</li></ul></li></ul>
</body>
</html>

2、表格标签

<table>:表格的最外层容器
<tr>:表格行
<th>:表头
<td>:表格单元
<caption>:表格标题

注：之间有嵌套关系，要符合嵌套规范。

语义化标签：tHead、tBody、tFood

注：在一个table中，tBody可以出现多次，但是tHead、tFood只能出现一次。

3、表格属性

border:表格边框
cellpadding:第一个内的空间
cellspacing:单元格之间的空间
rowspan:合并行
colspan:合并列
align:左右对齐方式（left、center、right）
valign:上下对齐方式（top、middle、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>
</head>
<body><table border="1" cellpdding="50" cellspadding="30"><caption>天气预报</caption><tHead><tr align="right"><th colspan="2">日期</th><th>天气情况</th><th>出行情况</th></tr></tHead><tBody><tr valign="top"><td rowspan="2">2022年10月23日</td><td>白天</td><td><img src="./太阳.jpg" alt=""></td><td rowspan="2">天气晴朗，适合出行</td></tr><tr><td>夜晚</td><td><img src="./雷雨.jpg" alt=""></td></tr><tr valign="bottom"><td rowspan="2">2022年10月24日</td><td>白天</td><td><img src="./雷雨.jpg" alt=""></td><td rowspan="2">天气有雨，适合宅家</td></tr><tr><td>夜晚</td><td><img src="./雷雨.jpg" alt=""></td></tr></tBody><tFoot></tFoot></table>
</body>
</html>

4、表单标签

<form>:表单的最外层容器
<input>:标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。

input（单标签）标签有一个type属性，决定是什么控件。
还有一些常见的属性：
checked、disabled、name、for

<textrarea>:多行文本框
<select>、<option>:下拉菜单
<label>:辅助表单

<!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>
</head>
<body><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"><h2>多行文本框</h2><textarea cols="10" rows="30"></textarea><h2>下拉菜单</h2><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><input type="file" multiple><input type="radio" name="gender" id="man"><lable for="man">男</lable><input type="radio" name="gender" id="women"><lable for="women">女</lable></form>
</body>
</html>

5、表格表单组合

表格表单之间可以互相组合形成数据展示效果。

<!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>
</head>
<body><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=" text" placeholder="请输入密码"></td></tr><tr align="center"><td colspan="2"><input type="submit">&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset"></td></tr></tBody></table></form>
</body>
</html>

6、div与span

div
定义和用法：
<div＞可定义文档中的分区或节 (division/section)
<div＞标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并目不使用任何格式与其关联。
如果用 id 或 class 来标记

，那么该标签的作用会变得更加有效。
span
用于修饰文字的，div与span都是没有默认样式的，需要配合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>
</head>
<body><div><h2><a href="#"><span style="color:blueviolet">DIV</span>(层叠样式表单元的位置和层次)_360百科</a></h2><a href="#"><img class="g-img" width="120" height="121" src="https://so.360tres.com/dmsmfl/120_121_/t016587a5c8750228c5.webp?size=960x720" style="opacity: 1;"></a><p>DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。DIV在编程中又叫做整除，即只得商的整数。DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。</p><a href="#">baike.so.com</a></div>
</body>
</html>

7、CSS基础语法

格式：
选择器{属性1：值1；属性2：值2}
长度单位：
1、px->像素（pixel）
2、% ->百分比
【外容器->600px 当前容器50%->300px】
基本样式：
width（宽）、height、background-color
CSS注释：
shift+alt+a

<!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: 100px;height:100px;background-color: blueviolet;}/*  span{background-color:deeppinkS} */</style>
</head>
<body><div>这是一个块</div><div>又是一个块</div><span>这是一个内联</span>
</body>
</html>

8、CSS样式的引入方式

内联（行内、行间）样式
在html标签上添加style属性来实现的
内部样式
在**<style标签**内添加的样式
注：内部样式的优点，可以复用代码,复合w3c的规范标准，进行让结构和样式分开处理。
外部样式
引入一个单独的CSS文件，name，css…
通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性资源的地址。
通过@import方式引入外部样式，有较多问题不建议使用。

9、CSS中颜色表示法

1、单词表示法：red、bule…

2、十六进制表示法：#000000 #ffffff
0 1 2 3 4 5 6 7 8 9
0 1
0 1 2 3 4 5 6 7 8 9 a b c d e f

3、rgb三原色表示法：rgb（255,255,255）；
取值范围0~255

<!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: #013317;} */div{ background-color:rgb(49, 133, 189);}</style>
</head>
<body><div>这是一个块</div>
</body>
</html>

10、CSS背景样式

1、background-color背景色
2、background-image背景图
url（背景地址）
默认：会水平垂直都铺满背景图
3、background-repeat 平铺方式
repeat-x（x轴平铺）
repeat-y （y轴平铺）
repeat（x，y都进行平铺，默认值）
no-repeat 都不平铺
4、background-position :背景位置
x y:number 单词
x:left、center、right
y:top、center、bottom
5、background-attachment:背景图随滚动条移动的方式
scroll：默认值（背景位置是按照当前元素进行偏移的）
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:20000px;}div{width:1200px;height:1200px;background-color:rgb(3, 45, 45);background-image: url(./阿妮娅.jpg);background-repeat:repeat-y ;background-position: 100px,100px;
background-attachment: scroll;}</style>
</head>
<body><div></div>
</body>
</html>

11、CSS边框样式

border-style:边框样式

solid:实线
dashed:虚线
dotted:点线

border-width:边框大小

px…

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>/* div{width: 300px;height: 300px;border-style: solid;border-color: blueviolet;border-width: 1px;}div{width: 300px;height: 300px;border-style: dashed;border-color: blueviolet;border-width: 30px;} */div{width: 300px;height:300px;border-right-style: dotted;border-right-width: 10px;border-right-color: rgb(164, 80, 243);border-top-style:solid;border-top-width: 10px;border-top-color: aquamarine;}</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>body{background-color: aquamarine;}div{width: 0px;height: 0px;border-top-color: transparent;border-top-style:solid ;border-top-width:30px ;border-right-color:rebeccapurple ;border-right-style:solid ;border-right-width:30px ;border-bottom-color:transparent ;border-bottom-style:solid ;border-bottom-width:30px ;border-left-color:transparent ;border-left-style:solid ;border-left-width:30px ;}</style>
</head>
<body><div></div>
</body>
</html>

12、CSS文字样式

font-family:字体类型

英文、中文
衬线体、非衬线体
注意点：1、多个字体类型的设置目的。2、引号的添加的目的

font-size:字体大小

默认16px
写法：number（px）|单词（small namber（100 200 … 900,100到500都是正常的，600到900都是分级加粗的））

font-weight:字体粗细

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

font-style:字体样式

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

13、CSS段落样式

text-decoration：文本装饰

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

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

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

text-indent:文本缩进

首行缩进
em单位：相对单位，lem永远都是跟字体大小相同

text-align：文本对齐方式

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

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

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

英文和数字不自动折行的问题：

word-break：break-all；（非常强烈的折行）
word-warp：break-word；（不是那么强烈的折行，会产生一些空白区域）

14、CSS复合样式

复合的写法，是通过空格的方式实现的。复合写法有的不需要关心顺序，如background、border；有的需要顺序，如font。
1、background:red url（）reapt 0 0；
2、border：1px red solid；
3、font：
注：最少要有两个值size family
【weight style size family
style weight size family
weight style size/line-height family】
注：如果非要混合去写的话，那么要先写复合样式，再写单一样式，这样样式才不会被覆盖掉。

15、CSS选择器

1、ID选择器
#elem（） id=“elem”
注：

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

2、CLASS选择器
.elem{} class=“elem”
注：

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