2020-08-04 46d90f082673c2f7be23fc1b0bc2f592 99+ 1 小时 6.9 k 0次访问

html和css基础

一、HTML5基础

1，基本结构

<!DOCTYPE html>   #表示文档的类型，html类型
<html>
	<head>							#网页头部
		<meta charset="utf-8" />   # 网页字符编码
		<title>第一个页面</title>   
	</head>
	<body> 							#主体部分
		yichen is a good man    
	</body>
</html>


<html>....</html>标签标记着html文档的开始和结束 

<meta/>标签 定义其他的说明
<meta name="keywords" content="逸尘秀"/> #内容描述
<meta name="description" content="分享日常工作笔记"/>

2，基本语法

1、 <常规标签>

1	<标签属性= "属性值" 属性="属性值"></标记>

2、空标签

	<标签 属性="属性值"/>
说明:
	1.写在<>中的第一个单词叫做标记，标签，元素。这3个名字都是指的一个
	2.标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在""号内。
	3.一个标记可以没有属性也可以有多个属性，属性和属性之间不分先后顺序。
	4.空标签没有结束标签，用"/"代替。

3，网页基本标签

1, 注释标签

1	ctrl + / <!--注释 -->

2，标题标签<h1-6>

<h1>.....</h1>      <h1>一级标题</h1>
<h2>.....</h2>		<h2>二级标题</h2>
<h3>.....</h3>		<h3>三级标题</h3>
<h4>.....</h4>		<h4>四级标题</h4>
<h5>......</h5>		<h5>五级标题</h5>
<h6>......</h6>		<h6>六级标题</h6>

3，换行标签<br />

1
2

<!-- 换行标签 -->
	当今世界正处于百年未有之大变局”，<br />习近平总书记的这一重大论断再次得到印证。人类21世纪的第三个十年，启幕之时因为新冠疫情被摁下“暂停键”。

4, 段落标签 <p>段落标签</p>

1	文章的段落一般用<p>标签包起来

5，水平线标签<hr/>

1	显示效果就是一条水平线

6，字体样式标签<strong>


<strong>yichen is a good man </strong><br /> <!--加粗-->
<b>yichen is a nice man </b>  <!--加粗，语气加强 -->
	
<!-- 倾斜 -->
<em>yichen is a good man</em> <br>
<i>yichen is a cool man</i>

7，特殊符号&nbsp 空格符

<!-- 特殊符号 -->
<p>yichen&nbsp  &nbsp is a nice man</p> <!--空格符  -->

<p>></p>  	<!--&gt大于符号  > 	-->
<p><</p>		<!--&lt小于符号  < 	-->
<p>"</p>	<!--&quot引号    "   -->
<p>&copy;</p>	<!--&copy版权符号 ©  -->

8，图像标签<img>

常见的格式 jpg gif png bmp

	<!-- src="图片的路径" alt="图像的替代文字" title="鼠标悬停提示文字" width="图片宽度" height="图片高度" -->
		<img src="img/ding17.gif" alt="背景图" title="大背景图" width="160" height="160" />

9,链接标签<a href=””>

1.<!-- 链接标签 -->
	<hr/>      								_self在本窗口打开，_blank新窗口打开
	<!--href="链接路径" target="目标窗口位置",常用值_self,_blank -->
	<a href="https://yichenxiu.com" target="_blank">逸尘秀</a> 
	     		<!--链接图片也可以-->
	<a href="img/ding9.jpg" target="_blank">背景图</a>
				<!-- 在链接标签内部还可以链接图片标签 -->
	<a href="https://yichenxiu.com" target="_blank"><img src="img/ding9.jpg" width="160" height="160" ></a>
2.锚点
	<a href="#mao1">跳转锚点</a>
	<!-- 锚点 -->
	<a name="mao1">这是锚点</a>

10.列表<ul><li>

列表的分类： 无序列表 有序列表 定义列表 
<!-- 无序列表 -->
	<ul>
		<li type="disc"><a href="https://yichenxiu.com">逸尘秀1</a></li>
		<li type="square"><a href="https://yichenxiu.com">逸尘秀2</a></li>
		<li type="circle"><a href="https://yichenxiu.com">逸尘秀3</a></li>
		<li type="circle"> yichen is a good man </li>
	</ul>
	<ul type="square">
		<li ><a href="https://yichenxiu.com">逸尘秀1</a></li>
		<li ><a href="https://yichenxiu.com">逸尘秀2</a></li>
		<li ><a href="https://yichenxiu.com">逸尘秀3</a></li>
		<li > yichen is a good man </li>
	</ul>
无序列表的类型
disc    项目符号显示为实体圆心，默认值
square  项目符号显示为实体方心
circle  项目符号显示为空心圆

<!-- 有序列表 -->
	<ol type="A">
		<li ><a href="https://yichenxiu.com">逸尘秀1</a></li>
		<li ><a href="https://yichenxiu.com">逸尘秀2</a></li>
		<li ><a href="https://yichenxiu.com">逸尘秀3</a></li>
		<li > yichen is a good man </li>
	</ol>
有序列表的类型
1		使用数字作为项目符号
A/a		使用大写/小写字母作为项目符号
I/i		使用大写/小写罗马数字作为项目符号

<!-- 定义列表 -->
	
	<dl>
		<dt>学院1</dt>
		<dd>电子信息工程1</dd>
		<dd>电子信息工程111</dd>
		<dt>学院2</dt>
		<dd>电子信息工程2</dd>
	</dl>
 dl 声明定义列表 dt声明的列表项 标题 dd 表示定义列表项内容

4, 表格

1.表格的基本语法

<table align="center">    表格标签
<table align="center" border="1" cellspacing="0" cellpadding="1"> 
			<tr>
				<th>头部</th>       #th代表头部
				<th>姓名</th>
				<th>学生</th>
			
			</tr>
			<tr>				 行标签
				<td>第1行第一列</td> 单元格标签
				<td>第1行第二列</td>
				<td>第1行第三列</td>
			</tr>
			第2行
			<tr>
				<td>第2行第一列</td>
				<td>第2行第二列</td>
				<td>第2行第三列</td>
			</tr> 
			第3行
			<tr>
				<td>第3行第一列</td>
				<td>第3行第二列</td>
				<td>第3行第三列</td>
			</tr>
		</table>

<tr>     定义表格的行
<th>     定义表格的头部 需要被<tr>包裹
<td>     定义表格的单元，需要被<tr>包裹	

<thead>  定义表格的页眉，表格分组标签，可将表格分割
<tfoot>	 定义表格的页脚，表格分组标签，可将表格分割
<tbody>  定义表格的主体，表格分组标签，可将表格分割
如果你使用thead,tfoot以及tbody元素，你就必须使用全部的元素，他们的出现次序是: thead、tfoot、tbody,这样浏览器就可以收获所有的数据

<caption> 定义表格标题

对齐方式
表格对齐方式
	默认对齐、居中对齐、左对齐、右对齐
单元格对齐方式
	水平对齐方式、垂直对齐方式
	
属性             值          说明
				left		左对齐
				center		居中对齐
align			right		右对齐
水平对齐方式 

				top 		顶端对齐
vailgn			middle		居中对齐
垂直对齐方式		bottom 		底端对齐
				baseline	基线对齐
				
border="2"			代表行与行之间的间距，数字越大间距越宽
cellspacing="4"     单元表格之间的空白
cellpadding="3"		代表文字与表格的间距，数字越大间距越宽
colspan ="value" 合拼列
rowspan ="value" 合并行

2，表格的跨行和跨列

<table>
	<tr>    行
				
				<td colspan="2">第一行第一列</td>  2代表占用2列
				<td>第一行第二列</td>
				
			</tr>
			<tr>
				<td>第二行第一列</td>
				<td>第二行第二列</td>
				<td rowspan="2">第二行第三列</td>   2代表2行
			</tr>
			<tr>
				<td>第三行第一列</td>
				<td>第三行第二列</td>
				<!-- <td>第三行第三列</td> -->
			</tr>
</table>

colspan ="value" 合拼列
rowspan ="value" 合并行

二、CSS基础

1，css简介

1
2
3

CSS：Cascaang Style Sheets 层叠样式表，WEB标准中表现标准语言，主要对网页信息的显示进行控制
(修饰网页信息的显示样式)
css1 1996年  css2  1998年   css2.1  2004年  css3.0 2010年

2，CSS样式

1
2
3

1, 内部样式表
2, 外部样式表
3,内联样式表(行内样式、嵌入式样式)

1，内部样式表

语法：
<style type="text/css">
			/* CSS语句 */
		</style>
		
#注意：使用style标签创建样式时，最好将标记写在<heas> </head>;之间

2，外部样式表

(1),创建外部样式表
创建css目录，
新建文件： xxx.css
@charset "utf-8";   头一行这样写，现在也可以不用写了，默认的就是utf-8

(2),导入外部样式表
方法1：
<link rel="stylesheet" type="text/css" href="css/style.css>  <!-- herf=""后面填写目标文件路径及文件名全称 -->

说明：使用link标签导入外部样式表时，需要将该元素写在文档的头部，即<head>与</head>中

方法2: 现在很少用这种方法了
<style type="text/css">
			@import url("./css/style.css");
		</style>

说明: @和import之间没有空格, url和小括号之间也没有空格；必须结尾以分号结束;

3，内联样式表(行内样式)

语法：
<标签  style="属性: 属性值 属性: 属性值">  </标签>
或者:
<标签  style="属性: 属性值 属性: 属性值"/>
<p style="color: blue;">yichen is a nice  man </p>

4,样式的优先级

内联(行内)样式表优先级别最高
内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高
		<!-- css内部样式 -->
		<style type="text/css">
			/* CSS语句 */
		</style>
		
		<!-- css外部样式调用 -->
		<link rel="stylesheet" type="text/css" href="css/style.css"/>  这个在后面，优先级就比前面的高，

3，CSS语法

0，CSS盒子模型

所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。

元素的宽度和高度

重要: 当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和边距。

下面的例子中的元素的总宽度为300px：

实例

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

让我们自己算算：
300px (宽)
+ 50px (左 + 右填充)
+ 50px (左 + 右边框)
+ 50px (左 + 右边距)
= 450px

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

1,语法

语法：
	selector {property:value;property:value;}
	selector表示选择器   property表示声明(属性和值)
	
说明:
	(1)每个css样式由3个部分组成， 选择器，属性 和值。
	(2)属性必须放在{}花括号中，属性和属性值用冒号连接。
	(3)每条声明用;分号结束。
	(4)当一个属性有多个属性值的时候，属性值与属性值不分先后顺序。
	(5)在书写样式过程中，空格，换行等操作不影响属性显示

2，简单属性的使用

其他属性参考css属性汇总

1. color: 颜色
	规定颜色值为颜色单词名称列如(red)或者十六进制的颜色列如(#ff0000)或者为rgb值的颜色列如(red(255,0,0))
2. width: 宽度
	设置标签的宽度值，值为数字:单位为px(像素)、em(字符)、%(百分比);默认值为auto(自动，通过浏览器自动计算出宽度值单位为像素)
	像素在浏览器中的概念:
		像素数决定标签或文字在浏览器中显示的大小或位置，页面中的最小计量单位为1px，即1一个像素，
3. height: 高度
	设置标签的宽度值，值为数字:单位为px(像素)、em(字符)、%(百分比);默认值为auto(自动，通过浏览器自动计算出宽度值单位为像素)
4. background-color: 背景颜色
	背景颜色:规定背景颜色值为单词的名称列如(red)或者十六进制的颜色列如(#ff0000)或者为rgb值的颜色列如(red(255,0,0))。
	可以为所有的标签设置背景色，这包括 body 一直到em和a等行内标签。

4，标签(元素)分类

标签从表面上分为单标签和双标签，单标签功能单一，不能嵌套，双标签功能多样化，可以嵌套。标签又分为块级元素和内联元素(行内元素),
(1) 块级元素(block-levelelements)  p标签，div标签，独占一行或几行
(2) 内联元素(行内元素、inlineelements)
(3) 内联块级元素(inline-block)

1，块级元素

1.块级元素在网页中就是(元素显示为矩形区域)的形式显示。
	常用的块元素: div、dl、dt、dd、ol、ul、li、fieldset、(h1-h6)、p、form、hr、colgroup、col、table、 tr、td等。
	
2.默认情况，块状元素都会占一行，通俗的说，两个相邻的块元素不会出现并列显示的现象；默认情况下，块状元素会按照顺序自上而下排列。

3. 块状元素都可以定义自己的宽度和高度，不设置宽度的时候，默认与父级元素一样宽。

4.块状元素一般都作为其他元素的容器，他可以容纳其他内联元素和其他块元素，我们可以把这种容器比喻为一个盒子。


<p>为段落标签，一般能用于装载段落文字，并且<p>标签中不可以包含块级标签。
h1-h6
<div>为最常用的结构标签，常能用于分割页面区域，以及功能模块。

(1)，块级元素汇总

块级元素有：

address - 地址
blockquote - 块引用
center - 举中对齐块
dir - 目录列表
div - 常用块级容易，也是 css layout 的主要标签
dl - 定义列表
fieldset - form控制组
form - 交互表单
h1-大标题
h4 - 副标题
h3 - 3级标题
h4 - 4级标题
h5 - 5级标题
h6 - 6级标题
hr - 水平分隔线
isindex - input prompt
menu - 菜单列表
noframes - frames可选内容，（对于不支持 frame 的浏览器显示此区块内容
noscript - ）可选脚本内容（对于不支持 script 的浏览器显示此内容）
ol - 排序表单
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表

2，内联元素(行内元素)

1.行内元素（内联元素）具有以下特点：

和其他元素都在一行上，直到一行排不下才会换行，宽度随元素内容变化；
高，行高及外边距和内边距不可改变；（设置宽度width无效，高度height无效，但可以设置line-height,设置margin只有左右有效，上下无效，设置padding左右有效，上下无效)
宽度就是他的文字或图片的宽度，不可改变；
内联元素只能容纳文本或者其他内联元素；
行内元素大多为描述性标记；

(1),内联元素汇总

行内元素有：

a - 锚点
abbr - 缩写
acronym - 首字
b - 粗体 ( 不推荐 )
bdo - bidi override
big - 大字体
br - 换行
cite - 引用
code - 计算机代码 ( 在引用源码的时候需要 )
dfn - 定义字段
em - 强调
font - 字体设定 ( 不推荐 )
i - 斜体
img - 图片
input - 输入框
kbd - 定义键盘文本
label - 表格标签
q - 短引用
s - 中划线 ( 不推荐 )
samp - 定义范例计算机代码
select - 项目选择
small - 小字体文本
span - 常用内联容器，定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u - 下划线
var - 定义变量

3，内联块级元素

1、内联块(行内块)级元素是块级元素和内联元素的混合体，inline-block元素设置宽度和高度，
2、内联快级元素属于内联元素，不会独占一行，而是会和其他inline元素和inline-block元素在同一行按左至右的顺序显示
3、常见的内联块级元素: img、textarea、input、select、iframe等。

内联块级元素的使用场合: 导航菜单

4,元素类型转换

display 属性
display: none; -- 让标签消失(隐藏元素并脱离文档流)
display: inline; -- 内联元素(内联表签)元素前后没有换行符
display: block; -- 块级元素(块级标签)
display: inline-block; -- 既有inline的属性也有block属性

5,行内块级元素案例导航栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>导航栏</title>
		<style type="text/css">
			li{
				display: inline-block;
				width: 100px;
				height: 30px;
				background-color: #ff8888;
				font: 12px; /*设置字体的大小*/
				text-align: center; /*设置字体对齐方式*/
				line-height: 30px;/* 等于li的高度，可以让字体垂直居中*/
			}
			a{
				color: cornsilk;
				text-decoration: none; /*去线*/
			}
		</style>
	</head>
	<body>
		<ul>
			<li><a href="https://www.yichenxiu.com"> 导航1</a></li>
			<li><a href="https://yichenxiu.com"> 导航2</a></li>
			<li><a href="#"> 导航3</a></li>
			<li><a href="#"> 导航4</a></li>
			<li><a href="#"> 导航5</a></li>
			<li><a href="#"> 导航6</a></li>
			<li><a href="#"> 导航7</a></li>
			<li><a href="#"> 导航8</a></li>
		</ul>
	</body>
</html>

下面是显示效果:

5,页面布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>页面布局</title>
		<style type="text/css">
			/* *表示通配 */
			*{
				padding: 0;
				margin: 0;
			}
			#box{
				width: 700px;
				
				/* background-color: red; */
				margin: 0 auto;
			}
			#logo1{
				height: 100px;
				background-color: yellow;
			}
			#nav{
				height: 26px;
				background-color: red;
			}
			#main{
				height: 600px;
				
			}
			/* #leftMain{
				display: inline-block;
				width: 350px;
				height: 600px;
				background-color: blue;
			}
			#rifhtMain{
				display: inline-block;
				width: 350px;
				height: 600px;
				float: right; 不写这个也行，但是左右div的宽度加起来不能刚好等于700px
				background-color: pink;
			} */
			#leftMain{
				display: inline-block;
				width: 350px;
				height: 600px;
				background-color: blue;
			}
			#rifhtMain{
				display: inline-block;
				width: 345px;
				height: 600px;
				/* float: right; */
				background-color: pink;
			}
			#footer{
				height: 43px;
				background-color: deeppink;
			}
		</style>
	</head>
	<body>
		<!-- box -->
		<div id="box">
			<!-- logo部分 -->
			<div id="logo1">
				
			</div>
			<!-- nav导航 -->
			<div id="nav">
				
			</div>
			<!-- 广告 -->
			<div id="guanggao">
				
			</div>
			
			<!-- 主体 -->
			<div id="main">
				<div id="leftMain">
					
					
				</div>
				<div id="rifhtMain">
					
					
				</div>
				
			</div>
			
			<!-- 底部 -->
			<div id="footer">
				
			</div>
			
		</div>
		
	</body>
</html>

6,注释

html注释

<!--注释内容-->

css注释

/*注释内容*/

三、选择器的运用

1、css选择器

常用的:
(1)、元素选择器/标签选择器(element选择器)
(2)、id选择器
(3)、class选择器
(4)、*通配符(全局选择器)
(5)、交集选择器
(6)、并级选择器(群组选择器)
(7)、后代选择器(包含选择器)
(8)、子选择器
(9)、伪类选择器

1,标签选择器

语法：
	元素(标签)名称{属性: 属性值; 
				 属性2: 属性值;
			}
	列如: p{
		cocor: red;
		background-color: pink;
	}
说明:
	(1)标签选择器:以文档语言对象类型作为选择器，即使用结构中元素名称作为选择器，列如 body、div、p、img、em、strong、span等等
	(2)所有的页面元素都可以作为选择器

用法:
	(1)如果想改变某个元素的默认样式时，可以使用元素选择器
	(2)统一文档的某个元素显示效果是，可以使用元素选择器

2，id选择器

语法:
	#id名{
		属性: 属性值;
		属性2: 属性值;
	}
	
说明:
	(1)使用id选择器时，应该为元素定义id属性，如<div id="top"> </div>。
	(2)id选择器的语法格式:"#"加上自定义的is名称。
	(3)id名命名取英文名,不能使用关键字(所有的标记和属性都是关键字)如:head、body等标记。
	(4)一个id名称只能对应文档中的一个具体的元素对象。因为id只能定义页面中的某一个唯一的元素对象。
	(5)id选择器最大的用处:创建网页的外围结构。

3,class选择器

语法:
.class类名{
		属性: 属性值;
		属性2: 属性值;
	}
说明:
	(1)使用类选择器是，应该先为每一个元素定义一个类名称。
	(2)类选择器的语法格式是:
	<div class="top"> </div>
	.top{
		width: 200px;
		height: 500px;
	}
用法:
	class选择器更适合定义一类样式

注意:
	类名的第一个字符不能使用数字。它无法再Mozila或Firefox浏览器中起作用

*4，通配符(全局选择器)**

语法:
	*{
		属性: 属性值;
		 属性2: 属性值;
	}
说明:
	通配符的写法是"*",其含义就是所有元素/标签。
	
用法:
	常用来重置样式

示例:
	*{padding:0px ; margin: 0} #0可以不用写px。

5，交集选择器

语法:
选择器1选择器2{
		属性: 属性值;
		属性2: 属性值;
}

说明:
	用于选择同时有多个选择器匹配的元素
	第一种格式类似于:
		h1.center{
			color: red; text-align:center;
		} 
		这种格式有标签选择器和类选择器组成。
	第二种格式类似于:
		h1#center{
			color:red;
			text-align:center;
		}
两个选择器之间不能有空格，必须连续书写。
以上两种格式组成的选择器，也就是前者所定义的标签类型和后者的类或者id的元素，称之为交集选择器

6,并集选择器

语法:
	选择器1,选择器2,选择器3{
		属性: 属性值;
		属性2: 属性值;
	}
说明:
当有多个选择器应用同样的样式时，可以将选择器用"," 分隔，合并为一组。

7,后代选择器

语法:
	选择器1 选择器2{
		属性: 属性值;
		属性2: 属性值;
		}
说明:
	选择器1和选择器2用空格隔开，含义就是选择器1中包含的所有选择器2;

8,子选择器

语法:
选择器1>选择器2{
		属性: 属性值;
		属性2: 属性值;
		}
说明:
	选择器1和选择器2用>连接，含义就是选择器1中的所有子一级选择器2

9,伪类选择器

语法:
a:link{color: red;}		 超链接的初始状态；没有被访问过的超链接

a:visited{color: yellow;} 超链接被访问后的状态；

a:hover{color:blue;}		鼠标划过超链接时的状态；

a:active{color: pink;}		超链接激活时的状态，即鼠标按下时超链接的状态；

说明:
	(1) 当这4个超链接伪类选择器联合使用时，应注意他们的顺序，正常的顺序为: a:link、a:visited、a:hover、a:active;错误的顺序有时会使超链接的样式失效;
	(2) 为了简化代码，可以把伪类选择符中相同声明提出来放在a选择符中；
	例如: a{color:red;} a:hover{color:green;} 表示超链接的三种状态相同，只有鼠标划过时变颜色。

2、选择器的权重

说明:
在CSS中，会根据选择器的特殊性来觉定所定义的样式规则次序，具有更特殊的选择器的规则优先于具有一般选择器的规则，如果两个规则的特殊性相同，那么后定义的规则优先。
CSS中用四位数字表示权重，权重的表达方式为如: 0,0,0,0,

	元素选择器/标签选择器的权重为0001
	class选择器的权重为0010
	id选择器的权重为0100   #这个权重比上面两个高
	属性选择器的权重为0010
	伪类选择器的权重为0010
	伪元素选择器的权重为0010
	包含选择器的权重:为包含选择器的权重之和
	子选择器的权重为0000
	群组选择器的权重为0000
	继承样式的权重为0000
	行内样式的权重为1000  #这个权重最高

比较时从高位到低位(A到D)分别比较，高位相同才需要比较低位

3、css3新增的选择器

1、属性选择器
2、结构伪类选择器
3、UI伪类选择器
4、其他选择器(兄弟元素选择器、否定伪类选择器、目标伪类选择器)

四、列表

1、列表css声明

CSS列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image	将图像设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。

<style type="text/css">
			li{
				/* list-style: none url(img/favicon.ico) inside; */ 这种写法更简单
				list-style: none;
				list-style-image: url(img/favicon.ico);
				list-style-position: inside;
			}
		</style>

1.1 定义列表符号样式

通过取不同的list-style-type属性值，我们可以得到不同的项目符号。

例：

ul { list-style-type:disc;} /*实心圆*/
 
ul { list-style-type:circle;} /*空心圆*/
 
ul { list-style-type:square;} /*实心方块*/
 
ul { list-style-type:none;} /*不显示项目符号*/
 
ol { list-style-type:decimal;} /*阿拉伯数字*/
 
ol { list-style-type:lower-roman;} /*小写罗马数字*/
 
ol { list-style-type:upper-alpha;} /*大写英文字母*/

2、背景的css声明

属性	描述	CSS
background	在一个声明中设置所有的背景属性。	1
background-attachment	设置背景图像是否固定或者随着页面的其余部分滚动。	1
background-color	设置元素的背景颜色。	1
background-image	设置元素的背景图像。	1
background-position	设置背景图像的开始位置。	1
background-repeat	设置是否及如何重复背景图像。	1
background-clip	规定背景的绘制区域。	3
background-origin	规定背景图片的定位区域。	3
background-size	规定背景图片的尺寸。	3

1. 背景颜色
语法:
	选择器{background-color: 颜色值;}
	
2. 背景图片
语法:
	选择器{background-image: url(图片的路径及全称);}
说明:
	网页上图片有两种形式。也就是结构
	背景图:属于网页的表现，背景图上可以显示文字，插入图片，表格等，
	
3. 背景图片的显示原则和平铺属性
背景图片显示原则:
(1) 容器尺寸等于图片尺寸，背景图片正好显示在容器中;
(2) 容器尺寸大于图片尺寸，背景图片将默认平铺，直到铺满元素;
(3) 容器尺寸小于图片尺寸，只显示元素范围内的背景图;

语法:
	选择器{
		background-repeat:no-repeat|repeat|repeat-x|repeat-y;
	}

	no-repeat  不平铺
	repeat		平铺
	repeat-x	横向平铺
	repeat-y 	纵向平铺
	
4.背景图片的固定
语法:
   选择器{ background-attachment: fixed;}
   fixed
   inherit
   initial
   scroll
   unset 
   local
   这些是属性值，很少用
   
5.设置背景图像的开始位置。
	 选择器{background-position}
	 值有 水平方向上的对齐方式(left/center/rifht)
	 垂直方向的对齐方式(top/center/bottom)

3、内容的显示和隐藏

(1),display:none 隐藏元素，该方式隐藏在页面不占位

(2), visibility: hidden,隐藏元素，改方式隐藏的元素在页面中占位

(3),border-radius: 100px; 以多少半径话圆

五、文本属性

1、文本css声明

1,文本样式的font属性
文本大小:font-size
文本字体:font-family
文本粗细:font-weight
文本倾斜: font-style
文本行高: line-height
文字属性font简写

2,文本样式的text属性

3,文本样式修饰的运用规范
4，文本添加阴影

六、表单

表单作用:收集用户信息

表单组成：

1.表单域

2.表单控件

3.提示信息

1，表单域

语法:
<form 属性名称="值">
</form>

常用的属性:
	1, name = "值" :规定表单的名称
	2, action="值" :提交表格的url
	3, method="get/post" :提交方式，一般用post
	4,enctype = "值" :规定在发送表单数据之前进行的编码
	可能的值: "applivation/x-wwww-from-urlercoded" ,"mutpart/from-data", "text/plain"
	5,target="_black/_self/_parent/_top"  打开表单URL
	
H5新增属性
	1, autoconmplete = "on/off" :是否启动表单自动完成
	2, novalidate = "novalidate" 不验证表单

2，表单控件

1,文本框
	<input type="text" value="默认值">
	
2,密码框	
	<input type="password" placeholder="密码" />

3,提交按钮
	<input type="submit" value="提交" />

4, 重置按钮
	<input type="reset" value="重置"/>

5, 单选框/单选按钮
<input type="radio" name="dan" checked="checked" value="power"/> 单选框里面name的值需要一样
<input type="radio" name="dan" checked="checked" value="money" />

6, 按钮
	<input type="button" value="按钮内容" />

7, 复选框
			<!-- 复选框 disabled表示禁用-->
			<input type="checkbox" name="fu"  disabled="disabled" value="money1"/>
			<input type="checkbox" name="fu"  disabled="disabled" value="money2" />
			<input type="checkbox" name="fu"   value="money3" />
			<input type="checkbox" name="fu"   value="money4" />
	
8, 下拉菜单
			<select>
				<option value ="">北京</option>
				<option value ="上海">上海</option>
				<option value ="深圳">深圳</option>
			</select>

9, 多行文本
	<textarea rows="5" cols="20">
				
			</textarea>

3,表单高级

1，表单字位焦
<fieldset id="">
				<legend>信息页面</legend>
				
				
			</fieldset>
功能:相当于一个方框，在字段中可以包含文本和其他元素，该元素用于对表单中的元素进行分组并在文档中区别标出文本，fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象

2, 字段级标题
	<legend>信息页面</legend>
功能: legend元素可以在fieldset对象控制的方框内插入一个标题，legend元素必须是fieldset内的第一个元素

3, 表单元素
	(1) 上传文件框(文件域)
	<!-- 上传文件框  multiple 表示上传多个文件-->
	<input type="file" name=""  value="选择文件" multiple="multiple" />
	
	(2)  图像域
		<input type="image" width="100" height="100" value="" src="./img/favicon.ico" />
	
	(3) 提示信息标签
	<label for="ti1">信息</label>
			<input type="text" name="name" id="ti1" value="" placeholder="请输入信息"/>
			功能: label 元素用来定义标签，为页面上的其他元素指定提示信息，要将label元素绑定到其他的控件上，可以将label元素的for属性设置为与该控件的id属性值相同。
			label元素不会向用户呈现任何效果，不过，他为鼠标用户改进了可用性，如果在label元素内点击文本，就会触发此控件，就是说，当用户选择标签时，浏览器就会自动将焦点转到和标签相关的表达控件上。
		
     (4)时间
     	<!-- 时间标签 -->
			<input type="date" name="" />
			
			<!-- 颜色 -->
			<input type="color" name="" />
			电话号码
			<input type="tel" name="" id="" value="" />
			
	等等还有很多，

本文标题：html和css基础
本文作者：yichen
本文链接：https://yc6.cool/2020/08/04/html和css基础/
版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处！