HTML和CSS

最新推荐文章于 2025-05-28 18:02:37 发布

编程打工人

最新推荐文章于 2025-05-28 18:02:37 发布

阅读量332

点赞数

文章标签： html

本文链接：https://blog.youkuaiyun.com/qq_43658407/article/details/124105478

版权

1. HTML
HTML（HyperText Markup Language）就是超⽂本标记语⾔。"超⽂本"就是表示⻚⾯内可以包含⾮⽂字元素，如：图⽚、链接、⾳乐等等。

标签

 分类：
 	块状元素：元素都从新的⼀⾏开始，并且其后的元素也另起⼀⾏；元素的⾼度、宽度、⾏⾼以及顶和底边距都可设置；元素宽度在不设置的情况下，是它本身⽗容器的100%（和⽗元素的宽度⼀致），除⾮设定⼀个宽度。
 	⾏内元素：和其他元素都在⼀⾏上；元素的⾼度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的⽂字或图⽚的宽度，不可改变。
 	⾏内块状元素：和其他元素都在⼀⾏上；元素的⾼度、宽度、⾏⾼以及顶和底边距都可设置。

标题标签

 标题属于块级元素。
 <h1> </h1>- <h6> </h6>标签可定义标题，标题依次递减。
 注意：h1标签可以为搜索引擎获取，便于页面在被搜索的时候检索到，但是⼀个页面最好只有⼀个h1标签，否则可能进⼊搜索引擎的黑名单。

水平线标签

 <hr/>标签在 HTML ⻚⾯中创建⼀条⽔平线（horizontal rule）可以在视觉上将⽂档分隔成各个部分。
 注意：在HTML中，hr 标签没有结束标签。
 常⽤属性：
 	align：规定hr 元素的对⻬⽅式。
 		center居中 left向左对齐 right向右对齐 
 	width：规定hr元素的宽度。

段落标签

 段落属于块级元素。
 <p></p>标签定义段落。
 注意：元素之间会留有空隙。
 属性：
 	align：规定段落中⽂本的对⻬⽅式。
 		left向左对齐  right向右对齐  center居中  justify左右对齐

列表标签

 1.无序列表结构：
 	<ul>
 		<li></li>
 		<li></li>
 		......
 	</ul>
 	属性：
 		type：规定列表的项⽬符号类型。
 			dise实⼼圆（默认）  circle空⼼圆  square⽅块
 2.有序列表结构：
 	<ol>
 		<li></li>
 		<li></li>
 		 ......
 	</ol>
 	属性：
 		type：规定在列表中使⽤的标记类型。
 			1⽤数字形式表示序号（默认）
 			a⽤⼩写字⺟表示序号
 			A⽤⼤写字⺟表示序号
 			i⽤⼩写罗⻢数字表示序号
 			I（⼤写i）⽤⼤写罗⻢数字表示序号

div和span

 div属于块级元素。默认占据一整行。
 span只展示标签体中的内容。
 两者均为双标签。

格式化标签

 font：字体标签。
 	属性：
 		face   设置字体风格
 		size   1-7字体大小
 		color  字体颜色
 pre：原模原样的展示标签体中的内容，被包围在 pre 元素中的⽂本通常会保留空格和换⾏符。

文本标签

 <b>粗体</b>   <strong>粗体</strong>   <i>斜体</i> 
 <u>下划线</u>  <del>中划线</del>
 <sub>下标文本</sub>  <sup>上标文本</sup>

a标签

 <a></a>标签定义超链接，用于从一张页面链接到另一张页面
 	属性:
 		href:  用于设置需要链接页面的地址。
 		target：设置链接打开的方式。
 			_self:  当前页面打开。
 			_blank：重新打开页面加载内容。		
 实现锚点：
 	1.目标元素 a标签
 		可以设置id属性/name属性   <a name="属性值"></a> 
 	2.目标元素 其他标签
 		设置id属性               <div id="属性值"></div> 	
 	3.导航元素 
 		a标签					<a href="#指向id/name的属性值"></a>

图片标签

 <img>元素向网页中嵌入一幅图像。
 	属性：
 		src:  链接图片的地址（在线/本地）。
 		border:  边框。
 		width：宽度。
 		height：高度。
 		alt：当图片加载失败时显示的文本内容。
 		title：图片的标题（鼠标悬停在图片上显示）。

表格标签

 格式：
 	<table>
 		<tr>
 			<th></th>
 		</tr>
 		<tr>
 			<td></td>
 		</tr>
 	</table>
 	table  表格标签
 	tr     表格的行
 	th     表格的表头信息（自动将文本居中加粗显示）
 	td     标准单元格，居左对齐
 table属性:
 	border   边框
 	width    宽度
 	height   高度
 	align    对齐方式
 	separate 分离边框（默认)
 	collapse 合并边框
 	style="border-collapse: collapse;"   设置边框的显示效果
 tr属性:
 	bgcolor 背景颜色
 	align  	单元格内容的水平对齐方式
 	valign  垂直方向的对齐方式
 td属性：	
 	colspan		规定单元格横跨的列数
 	rowspan		规定单元格横跨的行数
 字符实体：
 	空格   		空格     &nbsp;
 	小于号   	<	     &lt;
 	大于号   	>		 &gt;
 	版权号   	©		 &copy;

表单标签

 1.表单用于向服务器传输数据。
 <form></form>元素是块级元素，其前后会产生折行.
 	属性:
 		action:   数据传输的地址
 		method:
 			get   默认,数据在地址栏上，安全性差，有缓存，数据量有限
 			post  数据单独封装在请求体中，安全性较好，无缓存，数据量理论无限
 		name:     表单设置名称
 		arget:    请求打开的方式		
 2.表单元素（表单元素的数据想要提交出去，必须设置name属性）
 <input/>标签
 	属性:
 		type
 		text
 		password		密码框
 		radio			单选框（需要用name属性将按钮捆绑为一组）
 		checkbox		多选框（需要用name属性将按钮捆绑为一组）
 		......
 		value   设置标签默认值
 		checked  默认选中
 			checked='checked' 默认选中
 		disabled 禁用
 			disabled='disabled'
 		readonly 只读
 			readonly='readonly'
 		maxlength 最大长度
 			maxlength=值
 		placeholder 提示语		
 button按钮
 	属性：
 			type
 			reset	重置按钮
 			button	普通按钮
 			submit  提交按钮		
 3.文本域
 <textarea></textarea>标签定义多行的文本输入控件。文本区中可容纳无限数量的文本.
 	属性：
 		cols规定文本区内的可见宽度。
 		rows规定文本区内的可见行数。
 4.下拉框 （如果下拉框选项没有value值那么会将标签体中的文本内容提交出去）
 <select></select>
 	属性:
 		size      显示出来的个数
 		multiple  设置多选
 <option></option>
 	属性:
 		selected  默认选中
注意：如果想使用表单文件上传的功能，必须将请求方式先改为post，设置表单属性 enctype="multipart/form-data"。
 		1.二进制表单：enctype="multipart/form-data"	
 		2.普通表单：application/x-www-form-urlencoded

2. CSS
层叠样式表。

格式：
	选择器名 {
		属性 : 属性值;
		.....
	}
注意：
	1.css声明要以分号;结束，声明以{}括起来。
	2.建议一行书写一个属性。
    3.若值为若干单词，则要给值加引号，如font-family: "agency fb";。
    4.CSS是⽤来美化⽹⻚⽤的，没有⽹⻚则CSS毫⽆⽤处，所以CSS需要依赖HTML展示其功能 。

使用

 1.行内样式
 	写在具体的标签中，通过style属性将样式设置上去，多个样式分号;隔开。
 	<div style="background-color: aquamarine;">块级元素hello</div>
 2.内部样式
 	定义在<head></head>标签上的<style></style>标签中。
 	<style type="text/css">
 		div{
 			background-color: #0000FF;
 		}
 	</style>
 3.外部样式
 	在外部创建一个css文件，在head标签上通过link标签引入进来。
 	<link rel="stylesheet" type="text/css" href="css/style.css"/>
 		属性：
 			rel  当前文件与引入文件的关系
 			type  引入文件的类型
 			href  引入文件的地址	
 注意：CSS样式的优先级：就近原则。

基本选择器

 1.通⽤选择器：选中页面中所有元素。
 	*{
 	  ......
 	}
 2.id选择器：选择设置过指定id属性值的元素。
 	#id属性值 {
 		......
 	}
 3.类选择器：选择设置过指定class属性值的元素。
 	.class属性值 {
 		......
 	}
 4.元素选择器：选择指定标签。
 	元素名称 {
 	 ......
 	}
 5.分组选择器：当⼏个元素样式属性⼀样时，可以共同调⽤⼀个声明，元素之间⽤逗号分隔。
 	选择器1,选择器2,... {
 	 ......
 	}
注意：CSS样式的优先级，是根据选择器的精确度/权重来决定的，常⻅的权重如下，权重越⼤，优先级越⾼：
 		元素选择器：1
 		类选择器：10
 	    id选择器：100
 	    内联样式：1000
 	共有属性id name class

组合选择器
由两个选择器组成。

 1.后代选择器（派⽣选择器）：⽤于选择指定标签元素下的后辈元素，以空格分隔。
 	选择器1 选择器2 {
 	 ......
 	}
 2.⼦元素选择器：⽤于选择指定标签元素的所有第⼀代⼦元素，以⼤于号分隔。
 	选择器1 > 选择器2 {
 	 ......
 	}
 3.相邻兄弟选择器：可选择紧接在另⼀元素后的元素，且⼆者有相同⽗元素。以加号分隔。
 	选择器1 + 选择器2 {
 	 ......
 	}
 4.普通兄弟选择器：选择紧接在另⼀个元素后的所有元素，⽽且⼆者有相同的⽗元素，以波浪线分隔。
 	选择器1 ~ 选择器2 {
 	 ......
 	}

常用属性

 1.背景：
 	background-color   设置元素的背景颜色
 	background-image   设置元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。
 	background-repeat  设置是否及如何重复背景图像
 2.文本：
 	text-align        文本显示方式
 		left、right、center
 	color             设置字体颜色
 	font-family       设置字体样式  后备机制
 	text-indent       设置文本首行缩进
 		em一个相对值，例如页面的文本大小为17px,则2em就为17px*4
 	text-decoration   设置字体样式
 		underline	  对文本添加下划线。
 		overline      对文本添加上划线。 
 		line-through  对文本添加中划线，与HTML中的s和 strike 元素相同。 
 		none          关闭原本应用到元素上的所有装饰。
 	font-size         文本大小
 	font-style        字体风格，该属性最常用于规定斜体文本。 属性值：normal、italic、oblique
 		normal	      文本正常显示；
 		italic        文本斜体显示；
 		oblique       文本倾斜显示，oblique是将文字强制倾斜。
 	font-weight       字体加粗，该属性设置文本的粗细。  100-900   400正常体    700加粗   
 3.display属性：规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。
 	none              不显示元素
 	block             将元素设置为块级元素
 	inline            将元素设置为行内元素
 4.float              浮动
 	float的属性值有none、left、right。