关于html和css的笔记

1、html【超文本标记语言】 类似于快递上的地址，快递公司根据不同的地址发送目的地
1. 普通文本与超文本
普通文本
纯字符
超文本
字符，图片，超链接，视频，音频

hello world

段落

百度一下

2. 浏览器由上而下解析html文件，会将标签自动进行转换，变成浏览器页面元素显示

2、开发环境
编辑器
vscode、sublime
浏览器
firefox、chrome、IE
服务器

3、B/S架构【浏览器/服务器模式】
B Browser浏览器
S Server服务器

手机、电脑的浏览器  <-->  各类网站(服务器)  <-->  数据库(java/python/nodejs)
演示资源库

4、html网页
1. 编写hello world

2. 结构
    doctype 	声明部分 
		html    Html的根元素，用来包含html文档的所有元素
			head    不会显示到浏览器视口中
				title		显示在浏览器选项卡的标题
				meta 		用于设置元信息，配置
					charset=utf-8 	
					编码
						编辑器 UTF-8
					解码
						浏览器
                    
                    程序员  编写 
                    浏览器  解析
			body
				网页主体

3. 基本语法
	1) 注释 ctrl + /
		<!--注释-->

	2) 元素组成
		开始标签、内容(文本或者子标签)、结束标签
		<div>hello world</div>
		<div>
			<span>hello world</span>
		</div>

	3) 属性
		在开始标签中可以添加属性
			<div 属性名=属性值 属性名=属性值>
                属性名不区分大小写
                <div id="one"></div>
                <div ID="one"></div>

		1. 核心属性【绝大多数标签都可以应用的属性】
			id 			文档内部的唯一标识
			class 	类
				<div class="first one">one</div>
				<div class="first two">two</div>
				<div class="first three">three</div>
			title 	描述
			style 	样式，取值为css规则
				css规则,键值对，键值之间通过冒号分割，规则之间通过分号分割
				<div id='one' style="color:#333;backgroud:#ededed"></div>

		2. 特有属性【某些标签特有的】
			a
				href
				target
			img
				alt
				src

	4) 元素分类
		1. 块级元素
			作用：作为页面框架，或者容器。是页面的主体
			特性：
				1) 独占一行空间
				2) 默认宽度为100%，默认高度由子元素或者内容决定 
				3) 可以为其指定宽高 style="width:;height:;" 

				div 	无意义的块元素
				h1~h3	标题
					font-size
					font-weight
					margin
				p 		段落
					margin
				html
				body
					margin
				ul、li 	无序列表，列表项	
					ul
						margin
						padding
						list-style
					li
				ol、li  	有序列表，列表项
					ol
						margin
						padding
						list-style
				dl、dt、dd 	有序列表
					dl
						margin
					dd
						margin

				H5新增的块元素（语义化标签）
					header(头)
					nav
					article（主体）
					section (部分)
					footer（脚）
                    video
                    audio

		2. 行内元素
			作用：点缀网页，填充内容
			特性：
				1) 与其他行内元素共享一行空间
				2) 默认宽高由内容决定
				3) 不能为其指定宽和高
				4) 行内元素中不可以嵌套块元素，但块元素中可以嵌套行内元素

			span 	无意义的行内元素
			a 		超级链接
				默认样式
					color
					text-decoration
					cursor
				默认事件（js - dom） 点击事件
				href
					url
					相对路径
					绝对路径
					锚点

				target
					_self   当前页打开
					_blank  新建选项卡打开
			img
				src 	图片地址
					url     	http://
					相对路径	
					绝对路径	file://从根目录开始
				alt 	图片找不到的时候显示的文本

				<img src="" alt="">

			strong
			bold
			b
			em
			i
			sub
			sup
			...

		3. 功能元素	（行内元素）
			1) 表格
				table
					【属性】border、width、、、、
					caption 	表格标题
					thead 		表头部分
						tr 
							th/td
					tbody 		表格主体部分【不可以省略】
						tr
							td/th
							【属性】colspan、rowspan、width、align
							td/th中可以放任意子元素
					tfoot 		表底部分
						tr
							td
				【注意】：每一行中的列数应该是相等

				案例：个人计划表

                作业：制作个人简历、课表

			2) 表单（前后台交互）
					用户 -> 表单 -> 后台 -> 数据库

					注册页面
					登录页面
					搜索框

					<form action="">
						input
						select
						textarea
					</form>

					form
						action 	后台接口地址
						method 	请求方式
							get
								参数拼接在url后面，通过?来分割
								传递参数较少
							post
								参数存放在请求体中，安全
								传递参数更多
						enctype 编码方式
							1. enctype='application/x-www-form-urlencoded'
								浏览器就会将参数转换为【查询字符串 qs】格式
								username=tom&password=123321&

							2. multipart/form-data
								当有附件在表单中的时候，enctype务必设置为这种格式

					input
						name: 			作为参数中的key
						value: 			作为参数中的value,在按钮中务必指定value值
						type:
							text 		单行文本框
							password 	密码框
							submit 		提交按钮
							radio 		单选按钮
							checkbox 	复选按钮
							file 		附件选择器
						checked 		单值属性	默认选择
						placeholder     提示语

					select
						option
							标签中的文本显示在网页中，提交的值应该是option的value值，当这个值没有设定的时候，提交的是标签中的文本
							<option value="sx">山西</option>

					textarea
						多行文本域
						placeholder 提示语

					第三方库
						日期插件
						地址选择器地址
						附件上传
						富文本

            3) H5新增
                标签
                    progress 进度条
                    output 表示用户动作产生的结果
                    datalist 表示其他控件可用的值
                属性
                    type
                        date    日期
                        datetime-local 	日期时间控件
                        time 	时间控件
                        number 	数字控件（只能输入数字）
                        range 	范围控件（通过控制条可以调整取值）
                        search 	搜索控件
                        tel 	电话控件
                        url 	地址控件
                        color 	颜色控件
                        email  	email控件

前端三大要素：
html：木偶
css：化妆
javascript：动态展示
css:
1.什么是css？
cascading style sheets
层叠样式表

2.语法
	1.属性名和属性值之间使用:隔开
	2.多对属性之间使用;隔开
	3.最后一对属性可以不加分号





id='one'
class='two'
style="根据css的语法进行设置"
title='mydiv'


<style>
	选择器{
		width:100px;
		height:100px;
	}

	{
		width:200px;
	}
</style>

<div style="width:100px;height:100px;"></div>
div*10

	
速记写法：
	简写形式：
		div：10px
	盒子：内容区+内边距+边框+外边距margin

	padding-left:10px;
	padding-right:10px;
	padidng-top:10px;
	padding-bottom:10px;

–>
简写：
padding:10px;//上下左右均为10px
padding:10px 20px;//上下 左右
padding:10px 20px 30px;//上 左右 下
padding:10px 20px 30px 40px;//上 右 下 左

margin-left:
-->
margin:

border:1px solid red;
border-width:1px;
	border-top-width
	border-left-width
	border-right-width
	border-bottom-width
border-style
border-color

3.注释
	1.注释写法
		/*注释内容*/
	2.注释作用
		解释说明
		便于代码的维护和管理
	3.注释能否嵌套使用
		注释不能嵌套使用
		
		<!--注释
			<!--inner-->
		内容-->
		/*
			/*
				*/
		*/

html中引入css的方式：
1.行内样式
style属性
2.内联样式
style标签

3.外部引入
创建一个以.css为后缀名的文件
link标签：优先解析css
不建议使用：@import url()：优先解析html

引入方式的优先级：
行内样式>内联/外部引入

就近原则：哪一个样式更靠近元素，那一个样式的优先级更高

内联样式
外部link标签：实际开发

1.选择器
标签选择器：
根据标签名称选择一类元素

id选择器：
	通过id属性选择一个元素
	#value

类选择器：
	class
	.value

普遍选择器：
	*：所有

后代选择器：
	>：选择当前元素的直接子元素
	空格：选择当前元素的所有后代元素，包含孙代元素

兄弟选择器：
	+：选择当前元素之后的一个兄弟
	～：选择当前元素之后的所有兄弟元素

属性选择器：
	根据元素的属性选择一类元素
	[id]:选择当前页面中具有id属性的元素
	[class='one']:选择当前页面中具有class属性并且属性值为one的元素
	[class~='one']:选择当前页面中具有class属性，并且属性值之一为one的元素
	[class^='o']:选择当前页面中具有class属性。并且属性值以o开头
	[class$='o']:选择当前页面中具有class属性，并且属性值以o结尾
	[class*='o']:选择当前页面中具有class属性，并且属性值中包含o字符的
多选择器：
	使用逗号隔开多个选择器
	div*5
	p*3
	div,p{
		width:100px;
		height:100px;
	}

	#one,p,.two{

	}

	div .outer1,div outer2{

	}

	div .outer1,outer2{

	}



<div>
	<ul class='outer1'>
		<li class='one'></li>
		<li class='two'></li>
		<li></li>
	</ul>
	<ul class="outer2">
		<li class='one'></li>
		<li class='two'></li>
		<li></li>
	</ul>
</div>
<div class='outer2'></div>

组合选择器：
	将多个选择器组合到一起使用

	div#one:选择当前页面中所有div标签并且选择div标签汇总id为one的元素

	div.one{

	}
	<div class="one"></div>
	<div></div>
	<div></div>
	<p class='one'></p>

伪类选择器：
	:伪类名称

	:first-child
	:last-child
	:nth-child(number/odd/even)

	和状态相关的：
		:hover:当鼠标悬停在某个元素上时
		:avtive：当鼠标按下时的状态
		:link：当当前元素未被点击过的状态
		:visited：被访问过之后的状态

	书写顺序：
		link-》visited--〉hover--》active

伪元素选择器：
	::伪元素名称
	<div>hello</div>

	::first-letter:第一个字符
	::first-line：第一行
	::selection:被选择的文本
	::before
		content:'text'/url()
	::after

选择器优先级：
根据特性值进行比较，特性值越大，优先级越高

!important:不计入特性值，优先级最高,不建议使用

style属性：1000
id选择器：100
类选择器/伪类选择器/属性选择器：10
元素选择器/伪元素选择器：1

div{//1

}

#one{//100

}

<div id='one'></div>

盒子模型
1) 盒子属性
width
height
margin
margin-top
margin-right
margin-bottom
margin-left
margin
margin:10px; 上右下左
margin:0 10px; 上下为0，左右10px
margin:0 5px 10px; 上0，左右5px，下10px
margin:0 5px 10px 15px; 上右下左
border
border-width 边框宽度
border-style 边框线类型
solid 实线
dotted 点
dashed 虚线
double 双实线
border-color 边框线颜色
border-radius 边框圆角

		速写
			border:1px solid #333;
	padding
		padding-top
		padding-right
		padding-bottom
		padding-left

	box-shadow

	background-color	背景颜色
	background-image	背景图片
	background-repeat 	背景重复方式
		repeat-x
		repeat-y
		no-repeat
	background-size		背景图片大小
		background-size:100% 100%;

	一个盒子的组成
		width、padding、border、margin

2) 盒子分类
	盒子可以通过box-sizing来设置分类
	1. 内容盒子【W3C标准盒子】【默认】
		box-sizing:content-box;

		width = 内容宽
		所占的宽 = width + padding + border + margin

	2. 边框盒子【IE盒子】
		box-sizing:border-box;

		width = 内容宽 + padding + border
		所占宽 = width + margin

	margin:20px,border:10px,padding:10px;width:200px;分别计算两种盒子模型下所占的宽

	内容盒子
		所占的宽 = width + padding + border + margin
				= 200 + 10*2 + 10*2 + 20*2
				= 280px
	边框盒子
		所占的宽 = width + margin
				= 200 + 20*2
				= 240px

	margin重叠【margin塌陷】
    	两个盒子上下排布，竖直方向的margin不叠加，只取较大的值作为两个盒子的间距
		(水平方向的margin是可以叠加的)

布局：
默认文档流：
元素默认所在浏览器中的位置
从上到下，从左到右
1.display：
inline:将块级元素转换为行内元素
block：将行内元素转换为块级元素
inline-block：将当前元素转换为兼具行内和块级特性的元素

2.浮动布局
	float:left/right;

	浮动属性不会遮盖文字
	对行内元素设置浮动，会让行内元素可以设置宽高属性
	对于块级元素设置浮动，独占一行属性失效

	浮动合适停止？
	1.当遇到父级边框时停止浮动
	2.遇到其他浮动元素停止浮动

清除浮动特性：
clear:left/right/both
1.在浮动元素之后添加一个块级元素,给块级元素设置清除浮动

2.给所有浮动元素的父元素设置::after{
	content:'';
	clear:left;
	display:block;
}