html以及css两周学习

html【超文本标记语言】

镜面嵌套关系

段落

(不推荐）
换行 元素/标签：标签名称：不用区分大小写 成对出现的：开始标签 内容 结束标签 单标签：空元素
块级元素：P (主要用于结构的布局） 独立占用一整行 宽度100% 高度由内容决定 行内元素：span （主要用于内容的填充） 共享同一行 宽度高度由内容决定 嵌套关系：块级可以嵌套行内元素 不推荐行内元素嵌套块级 行内元素可以嵌套块级元素 块级视情况嵌套块级元素 P：段落 margin-top/margin div：宽度100% 属性：开始标签书写，由属性名称key值value 1.大多数都有 id为唯一标识 class 一类标识 style （css语法） tittle属性：元素的名称 2.自己特有的 img 图片元素：src图片的地址，alt文字显示 table为块级元素 tr块级元素：占据一整行(块级） td/th：共享一行 （行内) Table:1.注意层次结构 2.数据显示 3.一定不要用布局结构，推荐使用DIV+CSS 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控件

CSS笔记
前端三大要素：
html：木偶 css：化妆 jabascript：动态面板展示
css
1.什么是css?
cascading style sheets
层叠样式表 不能脱离html单独存在
2.语法
1.属性名和属性值之间使用:隔开
2.多对属性之间使用;隔开
3.最后一对属性可以不加分号(一般不用)
公有属性 id class name style
id=‘one’
class=‘two’
style=‘根据css语法进行设置’
title=‘mydiv’

2.速记写法
简写形式；
div：10px
盒子：内容区＋内边距+边框+外边距
padding-left：10px;
pddding-right：10px;
padding-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.注释作用
1. 解释说明
2.便于代码的维护和管理
3.注释能否嵌套使用
注释不能嵌套使用
4.html中引入css的方式：
1.行内样式<div style= “>”
style属性
2.内联样式
通过style标签
5.外部引入
创建一个以.css为后缀名的文件
建议使用 link标签，优先解析
@import url（）
引入样式的优先级：
行内样式>内联样式/外部引入
6.选择器
元素选择器
id选择器
#value
类选择器
class .value
普遍选择器
*
{ }
div{ } div的所有都要
后代选择器；

；选择直接子元素
空格:选择所有后代元素，包含孙代元素
兄弟选择器；
+：之后的一个兄弟
#one+div
~；当前元素之后的所有兄弟元素
#one~div
属性选择器；
[id]
[class=“one”]
[class~=“one”]
[class^=“one”]
[class*=“one”]
多选择器
使用逗号分隔
div，
组合选择器

伪类选择器
；伪类名称
：first-child
伪元素选择器：
div::first-letter{
color：red
}
::first-line 一整行
::seclection 被选择的文本
::after
行标签

选择器优先级
特性值越大优先级越高，当特性值相同时，越靠下的优先级越高
基础值:
style属性：1000
id:100 #
class/属性/伪类：10
元素:
标签：1 div
！important：不计入特性值的计算

inherit:继承父元素height属性
initial：不继承父元素clor属性

颜色单位：

1.关键字
2.rgb(r,g,b);0-225之前

拾色器/取色器
尺寸单位：
1.px 绝对单位
2.em 相对单位 一个大写字母M的宽度 浏览器给网页的默认像素为16像素
rem
3.百分比 相对单位
font-style:用于打开和关闭文本
normal：正常
加载网络字体：
1.下载网络字体
2.声明字体 myfont
@font-face不要放{}内
3.使用字体

字体图标；
fontawesome
iconfont
word-spacing: 单词空白 单词间距
letter-spacing: 字符空白 字符间距
word-break:break-all 设置超出父元素部分是否换行显示
word-wrap 单词换行
overflow：
hidden：超出元素部分隐藏
scroll：超出元素部分以滚动条形式显示

设置宽度和高度
width height (当前高度)
min-width 最小
min-height
max-width 最大
max-height

display:
none; :元素的隐藏
block;：元素的显示

visibility
hidden：元素的隐藏;相当于修改了元素的透明度，不隐藏元素空间
visible：元素的显示

设置表格的边框合并：
border-collapse：collapse;
设置表格的标题位置
caption-side:top/left/right/bottom
col一列放置于tr上面

列表样式
list-style-type
list-style-position
list-style-image:url()
line-height

ol
li
ul
li
dl
dt:标题项
dd：列表项

img；
特殊的行内元素
私有属性：width weight
dt dd

取值：
outside：列表项标志出现在主块框外部
inside： 列表项标志出现在主块框内部

list-style-image：列表形式的速记写法

盒子=content+padding+border+margin
盒模型：
标准盒模型/w3c盒子/默认盒模型:
box-sizing:content-box
特点：
width–>contet内容
padding内边距 内边距越大盒子越大
/+边框盒子模型/怪异盒子：
box-sizijng=border-box;
特点：
width–>盒子=content+padding+border

background：
-color
-image 放图片的
-repeat 重复
-clip 当前背景覆盖范围 borderbox=外边框 paddingbox=内边框 contentbox=内容区
-origin
-position 定位 设置当前背景
-size 大小 100px 100px 100% 100%
cover 背景铺满整个平码 y轴
contain 背景铺满整个 x轴
-attachment:
border:
border-radius:圆半径
border：1px solid red
border-image-soure:url()
border-image-slice:number：注意不加单位，默认单位为px
border-image-repeat:

7.31
布局
默认文档流：元素默认所在浏览器中的位置 从上到下，从左到右
1.display：
inline:将块级元素转换为行内元素
block：将行内元素转换为块级元素
inline-block：将当前元素转换为兼具行内和块级的属性
2.浮动布局：
float：left/right；
使用浮动属性的时候不用遮盖文字
对行内元素设置浮动，可以使行内元素设置宽高属性
对块级元素设置浮动，

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

清除浮动特性：
clear：left左/left右/both左右浮动
1.在浮动元素之后添加一个块级元素，给块级元素设置清除浮动
2.给所有浮动元素的父元素设置
3.伪元素
：：afeter{
content:""；
clear:left;
display：block;
}