Web前端从入门到精通（第二周）
嵌套列表
列表之间可以互相嵌套形成多层级列表
示例：
<ul>
<li>
江苏省
<ul>
<li>南京市</li>
<li>宿迁市</li>
<li>盐城市</li>
</ul>
</li>
<li>
山东省
</li>
</ul>
表格标签
-
< table > : 表格的最外层容器
< tr > : 定义表格行
< th > : 定义表头
< td > : 定义表格单元
< caption > : 定义表格标题
注：之间有嵌套关系，注意嵌套规范。
语义化标签：< tHead > < tBody > < tFood >
注：在一个< table >中，< tBody >可以出现多次，而< tHead > < tFood >只能出现一次 -
示例：
<body>
<table>
<caption>天气预报</caption>
<tHead>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tBody>
<tr>
<td>2022年10月22日</td>
<td>15°C阴</td>
<td>适宜室内运动</td>
</tr>
<tr>
<td>2022年10月23日</td>
<td>16°C阴</td>
<td>适宜室内运动</td>
</tr>
</tBody>
<tFood>
</tFood>
</table>
</body>
表格属性
- border：表格边框
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
rowspan：合并行
colspan：合并列
align：左右对齐方式（left center right）
valign：上下对齐方式（top middle bottom） - 示例：
<table border="1" cellpadding="20" cellspacing="20">
<caption>天气预报</caption>
<tHead align="right">
<tr>
<th colspan="2">日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tBody valign="top">
<tr>
<td rowspan="2">2022年10月22日</td>
<td>白天</td>
<td>18°C阴</td>
<td>适宜室内运动</td>
</tr>
<tr>
<td>夜晚</td>
<td>9°C阴</td>
<td>适宜室内运动</td>
</tr>
<tr>
<td rowspan="2">2022年10月23日</td>
<td>白天</td>
<td>16°C阴</td>
<td>适宜室内运动</td>
</tr>
<tr>
<td>夜晚</td>
<td>10°C阴</td>
<td>适宜室内运动</td>
</tr>
</tBody>
<tFood>
</tFood>
</table>
表单input标签
- < form > ：表单最外层容器
< input > （单标签）：标签用于搜集用户信息，根据不同type属性值，展示不同的控件，如输入框，密码框，复选框等，其type属性如下：
- 示例：
<form action="http://www.baidu.com">
<h2>输入框</h2>
<input type="text">
<h2>密码框</h2>
<input type="password">
<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>
表单相关标签
<h2>多行文本框</h2>
<textarea cols="30" rows="10"></textarea><!--cols表示行，rows表示列-->
<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"><label for="man">男</label><!--扩大选择范围提升用户体验-->
<input type="radio" name="gender" id="woman"><label for="woman">女</label>
表格表单组合
<form>
<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">
<input type="reset">
</td>
</tr>
</tbody>
</table>
</form>
注：注意表格表单的嵌套关系
< div > 与 < span >
- div（块）：
div全称为division，"分割、分区"的意思，< div > 标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在 < div > 标签中，< div > 中还可以嵌套多层 < div >，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。 - span(内联) :
用来修饰文字的，div 与span都是没有任何默认样式的，需要配合CSS才行。 - 示例：
<div>
<h2><a href="#"><span>HTML</span>是什么?? - 百度知道</a></h2>
<a href="#"><img src="https://t8.baidu.com/it/u=3533734223,976402395&fm=190&app=129&size=f242,150&n=0&f=PNG?s=A073709604207CAA8ECD19DC030080B0&sec=1666717200&t=e29761bdb7d3183bced50b01be93963d"></a>
<p>36个回答 - 回答时间: 2019年4月21日 最佳答案: HTML是超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用，HTML 不是一种编程语言，而是...</p>
<a href="#">更多关于html的问题>></a>
</div>
CSS语法格式
- 格式：
选择器{属性1：值1；属性2：值2} - 单位：
px -> 像素（pixel）、% -> 百分比（相对单位，与其父容器对应） - 基本样式：
width、height、background-color - CSS注释：
/* 注释内容 */ - 示例：
<head>
<style>
div{ width: 100px ; height: 25% ; background-color: aqua;}
span{ background-color: aquamarine;}
/* span{ background-color: bisque;} */
</style>
</head>
<body>
<div>第一个块</div>
<div>第二个块</div>
<span>一个内联</span>
</body>
内联样式与内部样式
- 内联（行内、行间）样式：
在html标签上添加style属性来实现 - 内部样式：
在style标签内添加的样式
注：内部样式的优点，可以复用代码 - 以上两者的区别：
内部样式的代码可以复用，符合W3C的规范标准，尽量让结构和样式分开处理 - 示例：
内联：
<body>
<div style=" width:100px; height:100px; background-color:aqua">第一个块</div>
<div style=" width:100px; height:150px; background-color:aquamarine">第一个块</div>
</body>
内部：
<head>
<style>
div{ width: 100px; height: 100px; background-color: aqua;}
</style>
</head>
<body>
<div>第一个块</div>
<div>第二个块</div>
</body>
外部样式及两种写法
- 第一种写法：
引入一个单独的css文件，name.css
通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性是资源的地址
示例：
css文件：
div{ width: 100px; height: 100px; background-color: aqua;}
html文件：
<head>
<link rel="stylesheet" href="./common.css">
</head>
<body>
<div>一个块</div>
</body>
- 第二种写法：
@import
示例：
<head>
<style>
@import url('./common.css')
</style>
</head>
<body>
<div>一个块</div>
</body>
注：这种方式存在许多问题，不建议使用
CSS颜色表示法
- 单词表示法：red、blue、green…
- 十六进制表示法：#000000（0 1 2 3…f）
- RGB三原色表示法：RGB（255，255，255）；
取值范围：（0~255） - 取色方法：FE浏览器插件，PS
- 示例：
<style>
div{ background-color: red;}
div{ background-color:rgb(20,20,20);}
div{ background-color: #100021;}
</style>
CSS背景样式
1.基本属性
- background-color 背景颜色
- background-image 背景图片
url背景地址，默认水平垂直都铺满 - background-repeat 背景图片的平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
repeat（x，y） 默认x，y都进行平铺
no-repeat 都不平铺 - background-position 背景位置
x y：number|单词
x：left、center、right
y：top、center、bottom - background-attachment 背景图随滚动条的移动方式
scroll：默认值（背景位置是按照当前元素进行偏移的）
fixed：背景位置是按照浏览器进行偏移的
- 示例：
<style>
body{height: 20000px;}
div{ width:1440px;height:800px;background-color: red;
background-image: url(./CSDN/pic/450e9bd96dcdb0f1.jpg);
background-repeat: no-repeat;
background-position: 50% 50% ;
background-attachment: fixed;
}
</style>
背景实现视觉差效果
<head>
<style>
#div1{width: 1400px; height: 800px; background-image: url(./CSDN/pic/450e9bd96dcdb0f1.jpg);background-attachment: fixed;}
#div2{width: 1400px; height: 800px; background-image: url(./CSDN/pic/\(YEJ_4QF_98KXB~YXP7_BUF.png);background-attachment: fixed;}
#div3{width: 1400px; height: 800px; background-image: url(./CSDN/pic/pc0_1g05e36mr.jpg.q_70.jpg);background-attachment: fixed;}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
CSS边框样式
- border-style：边框的样式
solid：实线
dashed：虚线
dotted：点线
border-width：边框的大小
px…
border-color：边框的颜色
red #f00…
注：针对某一条边进行单独设置
border-left-style（中间是方向：left、right、top、bottom） - 示例：
<style>
div{width:300px;height:300px;border-style:solid;border-color:red;border-width: 1px;}
div{width:300px;height:300px;
border-right-style:dotted;border-right-width:10px;border-right-color:red;
border-top-style:solid;border-top-width: 10px;border-top-color:green;}
</style>
边框实现三角形
- 示例：
<style>
body{background-color: bisque;}
div{width: 0px; height: 0px;
border-top-color: transparent;
border-top-style:solid;
border-top-width:30px;
border-right-color: rgb(0, 255, 213);
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>
注：透明颜色 transparent
family字体类型
- font-family：字体类型
英文：Arial、‘Times New Roman’
中文：微软雅黑（‘Microsoft YaHei’）、宋体（Simsun） - 示例：
<head>
<style>
div{font-family: 宋体;}
</style>
</head>
<body>
<div>一段文字</div>
</body>
- 衬线体与非衬线体
从电脑中识别字体
注：1.设置多个字体时按顺序识别各字体，若第一种字体未识别则识别第二种，以此类推
2.若字体名中含空格则需添加引号
字体大小粗细样式
- font-size：字体大小
默认大小：16px - 写法：
number（px）| 单词（small、large…不推荐）
注：字体大小一般是偶数（方便文字对齐） - 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 没有倾斜属性的字体也可以设置倾斜 - color：字体颜色
文本修饰与文本大小写
- text-decoration：文本修饰（可添加多个）
下划线：underline
删除线：line-through
上划线：overline
不添加任何装饰：none - text-transform：文本大小写（针对英文）
小写：lowercase
大写：uppercase
只针对首字母大写：capitalize
文本缩进与文本对齐
- text-indent：文本缩进
首行缩进
em单位：相对单位，1em与字体大小相同
（主要针对中文） - text-align：文本对齐方式
对齐方式：center、left、right、justify（两端点对齐）
文本的行高
- line-height：定义行高
定义：一行文字的高度，上边距和下边距的等价关系
默认：不固定，根据当前字体大小不断变化
取值：number（px）| scale（比例值，跟文字大小成比例）
文本间距与英文折行
- letter-spacing：定义字间距
- word-spacing：定义词间距（针对英文）
- 英文和数字强制折行（针对英文）：
word-break：break-all；（强烈）
word-wrap：break-word；（不强烈，会产生一些空白区域）
CSS复合样式
- 一个CSS属性只控制一种样式：单一样式
一个CSS属性控制多种样式：复合样式 - 复合样式：
background
border
font - 复合写法（通过空格实现，有的属性不用在意顺序，如background、border，有的需要，如font）
background：red url（）repeat 0 0；
border：1px red solid；
font：weight style size family
style weight size family
weight style size/line-height family
（最少要有值 size 和 family）
注：单一样式与复合样式尽量不要混写，若非要混写，要先写复合样式再写单一样式，以避免样式被覆盖
ID选择器及注意事项
- ID选择器
css：#elem{}
html：id=“elem”
注：在一个页面中，ID值是唯一的； - 命名规范：字母 _ - 数字（命名第一位不能是数字）；
命名方式：驼峰式、下划线式、短线式；
驼峰写法：searchButton（小驼峰）| SearchButton（大驼峰）| searchSmallButton
短线写法：search-small-button
下划线写法：search_small_button
CLASS选择器及注意事项
- CLASS选择器
css：.elem{}
html：class=“elem”
注：class选择器可以复用
可以添加多个class样式
多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序
标签+类的写法（如p.box）
扫一扫
644
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
