学习内容20-45
列表
1.定义列表dl
dt:定义专业术语或名词
dd: 对名词进行解释和描述
<dl>
<dt>
HTML
</dt>
<Dd>超文本编辑</Dd>
</dl>
<dt>
CSS
</dt>
<dd>层叠样式</dd>
2.嵌套列表ul (列表之间可以互相嵌套形成多层级列表)
<ul>
<LI>
中国
<ul>
<li>
江苏
<ul>
<li>
苏州
</li>
</ul>
</li>
</ul>
</LI>
<LI>
美国
<ul>
<li>
旧金山
<ul>
<li>
xxx广场
</li>
</ul>
</li>
</ul>
</LI>
</ul>
表格标签 之间具有嵌套关系
>
<table>
<caption>天气预报</caption>
<thead>
<tr>
<th>日期</th>
<th>天气</th>
</tr>
</thead>
<tBody>
<tr>
<td>2022年12月16日</td>
<td>天气晴朗</td>
</tr>
<tr>
<td>2022.12.16</td>
<td>sunshine</td>
</tr>
</tBody>
<tFood>
<tr>
<td></td>
</tr>
</tFood>
</table>
表格属性
<table border="1" cellpadding = "10" cellspacing = "10">
合并:
<th colspan="2">日期</th>
<th rowspan="2">日期</th>
对齐:
<tr align ="left"</th>
<tr valign = "leftf"</th>
表单标签 form
<form action="https://xxxxx(提交的地址)">
<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>
<form>
<h2>多行文本框</h2>
<textarea cols="30" rows="10"></textarea>
<h2>下拉菜单</h2>
<select>
<option selected disabled>请选择</option>
<option>苹果</option>
<option>香蕉</option>
<option>葡萄</option>
</select>
<select multiple size = 3>
<option selected disabled>请选择</option>
<option>苹果</option>
<option>香蕉</option>
<option>葡萄</option>
</select>
<input type="file" multiple>
</form>
<input type="radio" name="gender" id="man"><labcl for="man">男</labcl>
<input type="radio" name="gender" id="woman"><labcl for="woman">女</labcl>
(用于关联 按钮之间的文字)
表格表单组合
表格表单之间可以相互组合形成数据展示效果
<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">
<input type="reset">
</td>
</tr>
</tbody>
</table>
</form>
div 与 span
1.div
div全称为division,“分割、分区”的意思,div标签用来划分一个区域,
相当于一块区域容器,可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在div标签中,div中还可以嵌套多层div,用来将网页分割成独立的、不同的部分,来实现网页的规划和布局。
2.span
用来修饰文字的,div与span都是没有任何默认样式的,需要配合CSS才行。
<div>
<h2><a href="#"><span style="color:red">吾爱破解</span> - LCG - LSG|安卓破解|病毒分析|www.52pojie.cn</a></h2>
<a href="#"><img src="https://t7.baidu.com/it/u=3546386972,3834653662&fm=85&app=131&size=f242,150&n=0&f=PNG?s=03D1CB20DBC3B882669AD510030050DB&sec=1671296400&t=96e2664114f3dc0c31150bb7db3db71e" alt=""></a>
<p>【重申】关于百度《吾爱破解吧》非吾爱官方管理以及商业交易被骗说明(2017-4-25) 梁景祯,警察在找你!Ban:huitailang【多次注册马甲发布软件捆绑木马】(2016-11-17) 【公告】禁止微商、手机轰炸机...</p>
</div>
CSS
格式:
选择器{属性1:值1;属性2:值2}
单位:
px -> 像素(pixzel)、% -> 百分比 (外容器 -> 600px 当前容器 50% -> 300px )
基本样式:
width(宽)、height(高)、background-color(背景颜色)
<style>
div{ width: 10% ; height: 50px ; background-color : red }
</style>
内联样式与内部样式
内联(行内、行间)样式
在html标签上添加style属性来实现的
内部样式
在style标签内添加的样式
(内部样式的优点,可以复用代码)
<style>
div{ width: 10% ; height: 50px ; background-color : red } /* 内部样式 */
</style>
</head>
<body>
<div style="width: 10% ; height: 50px ; background-color : red ">这是一个块</div> <!-- 内联样式 -->
<div>这是另一个块</div>
效果同上图
内部样式优势:可以复用代码
外部样式(引入一个单独的css文件 ,xxx.css)
法1
通过<link>
标签(rel ,herf)
<link rel="stylesheet" href="文件名地址">
法2
@import法
<style>
@import url('文件名地址');
</style>
CSS中的颜色表示法
1、单词表示法:
red、blue、green、yellow、…
2、十六进制表示法:
0 1 2 3 4 5 6 7 8 9 a b c d e f
#000000(最小值) #ffffff(最大值)
3、RDB三原色表示法:
rgb(255,255,255)(最大值)
CSS颜色代码对照表
获取网页颜色:
1.FeHelper
2.PhotoShop
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(px、%) | 单词)
(x:left、center、right)
(y:top、center、bottom)
5、background-attachment:背景图随滚动条的移动方式
scroll:默认值 (背景位置是按照当前元素进行偏移的)
fixed (背景位置是按照浏览器进行偏移的)
<style>
div{ width:100%;height:100%;background-color:red;background-image:url(./xxx);background-repeat : repeat-x;background-position:100% 100%;background-attachment:scroll;}
</style>
背景实现视觉差效果
<style>
#div1{ width:1400px;height: 800px; background-image:url(图片地址); background-attachment: fixed;}
#div2{ width:1400px; height: 800px; background-image:url(图片地址); background-attachment: fixed;}
#div3{ width:1408px; height: 800px; background-image:url(图片地址); background-attachment: fixed;}
</style>
CSS边框样式
<style>
div{ width:300px; height : 300px; border-style:solid; border-color:red; border-width:1px;}
</style>
针对某一条边单独设置:
<style>
div{ width:30opx; height:300px; border-right-style: dotted; border-right-width: 10px;border-right-color: green; }
</style>
(border-left-style:solid;border-bottom-style:dashed)
三角形边框
正常边框:
三角形边框:(障眼法,通过把中间区域变为0 并且将其余三个三角形改为背景色)
div{ width: 0px; height :0px;
border-top-color: white;
border-top-style:solid;
border-top-width : 30px;;
border-right-color: red;
border-right-style: solid;
border-right-width : 30px;;
border-bottom-color: white;
border-bottom-style: solid;
border-bottom-width: 30px;;
border-left-color: white;
border-left-style: solid;
border-left-width : 30px;
}
防止和背景色不一致(通用方式):利用透明颜色 :transparent
eg:
border-top-color: transparent;
CSS文字样式
1文字字体类型
<style>
div{ font-family: Arial;}
</style>
style>
div{ font-family: "Times New Roman" , simsun ,微软雅黑;}
</style>
设置多种字体用于备用,从前往后的形式来识别的
2衬线体与非衬线体
3font-size :字体大小
默认大小 :16px
写法 : number(px) | 单词(small large … 不推荐使用)
div{ font-size: 16px}
字体大小一般设置成偶数(方便文字对齐)
4font-weight :字体粗细
两种模式 :
正常(normal)加粗(bold)
写法 :
单词(normal、bold) | number(100 200 …)
5fond-style :字体样式
两种模式:
正常(normal) 斜体(italic)或 (oblique(用得少))
(区别:1.italic带有倾斜属性的字体的才可以设置倾斜操作。2.oblique没有倾斜属性的字体也可以设置倾斜操作。)
写法:(normal、italic)
6color : 字体颜色
段落样式
1text-decoration :文本装饰
下划线:underline
删除线:overline
上划线:line-through
无装饰:none
(添加多个文本修饰:line-through underline overline)(单词之间加空格)
<style>
p{width:300px;text-decoration: underline;}
</style>
<style>
p{width:300px;text-decoration: underline overline linethrough}
</style>
2text-transform :文本大小写(针对英文段落)
小写:lowercase
大写:uppercase
只针对首字母大写:capitalize
p{width:300px;text-transform:uppercase;}
3text-indent :文本缩进
首行缩进
em单位 :相对单位,1em永远跟字体大小相同 (字缩进字符与字大小不同行与行之间无法对齐,所以需要em单位)
如上图。2em=36px
4text-align :文本对齐方式
对齐方式 :right、left、center、justify(两段点对齐)
CSS段落样式
1line-height :定义行高
默认行高 :不为固定值,根据当前字体的改变而改变
取值 :1.number(px) | scale(比例值,跟文字大小)
比例值:
<style>
p{ line-height: 1 }
</style>
2定义间距
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;height: 800px;}
h1{ text-align:center; color:greenyellow;}
h2{color:darkgreen}
#p1{font-style: italic;font-weight:bolder;color:chartreuse;text-indent: 2em}
h3{color:darkgreen}
#p2{line-height: 30px;color:springgreen;text-indent: 2em;font-style:italic;text-decoration: underline }
</style>
</head>
<body>
<div>
<h1>张翰个人简介</h1>
<h2>基本信息</h2>
<p id="p1">中国内地男演员、歌手、制作人
张翰,原名张汉,1984年10月6日出生于黑龙江省齐齐哈尔市龙沙区,中国内地男演员、歌手、制作人,
</p>
<h3>早年经历</h3>
<p id="p2">
毕业于中央戏剧学院表演系2007届本科班。2009年,张翰凭借青春校园偶像剧《一起来看流星雨》中的慕容云海一角正式进入演艺圈。2011年,主演电视剧《一不小心爱上你》,首次尝试扮演“商务轻熟男”形象。2012年,主演偶像剧《胜女的代价》,并凭借该剧获得2012年亚洲偶像盛典最具号召力演员奖。2013年月,主演古装历史剧《隋唐演义》 [7] ,凭借该剧获得第19届上海电视节白玉兰奖最具人气男演员奖 [8] 。2014年4月,参与湖南卫视真人秀《花儿与少年》第一季的录制 [9] ;6月,张翰成立个人演艺公司“张翰工作室” [10] ;同年,凭借主演的偶像剧《杉杉来了》获得第10届首尔电视剧大赏亚洲之星奖 [11] 。
</p>
</div>
</body>
</html>
CSS符合样式
一个CSS属性只控制一种样式,叫做单一样式。一个CSS属性控制多种样式,叫做复合样式。
复合样式
(复合的写法,是通过空格的方式实现的。复合写法有的是不需要关心顺序,例如background、border;有的是需要关心顺序,例如font)
1. background : red url() no-repeat 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 √
(size和family放最后)
(注:尽量不要混写,如果非要混写,那么一定要先写复合样式再写单一样式)
CSS选择器
1ID选择器
驼峰式:searchButton(小驼峰)SearchButton(大驼峰)
下划线式:search_small_buttom
短线式:search-small-buttom
2Class选择器
标签+类例子:
p.box
只对p标签带有box生效