HTML5笔记梳理

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控件