HTML

前端的三大底层语言：

	html：页面搭建-房子搭建
	css：页面美化-装修
	js：动态效果展示-按键

	页面：项目结构
		demo:
			index.html
			outer.html
			one.html
			css:
				index.css->index.html
				outer.css
				one.css
			js:
				index.js->index.html
	taobao：
		.html
		css
		js
		images

快捷键：

!+tab或者html:5+tab    快速生成默认文档
Alt+鼠标左键   同时输入多行
ctrl+/        注释
h$*6      h1-h6   标题标签

html:

1. 什么是html？

   HyperText Markup Language
   是超文本标记语言的缩写
   

   超文本：

   超越普通文本
   能够在文本内插入图片、音频、视频、超链接等等
   

   标记语言：

   编译语言：
   	c
   	java
   	hello.java->hello.class->解析
   	system.out.print(1+1);//2
   	特点：
   		需要编译运行
   		本身具有逻辑能力和行为能力
   脚本语言：
   	特点：
   		javascript
   		console.log(1+1);//2
   		被解析器解析运行
   		本身具有逻辑能力和行为能力
   标记语言：
   	html
   	xml
   	特点：
   		<div>1+1</div>->1+1
   		本身不具有逻辑能力和行为能力
   		只能被读取（浏览器）
   
   本地submit/vscode编写代码-》部署到服务器端
   	html
   

2. html特点

   1.从上到下依次解析
   2.容错性-宽松性
   3.大小写不敏感
   	<div>
   	<DIV>
   

3. 文档结构

   创建html文档：
   	.html
   	.htm
   	为后缀名的文件
   
   	node.txt->.txt:.html
   	node->node.html.txt
   

   默认文档结构：

   快捷键生成：		
   	html:4t
   		1.容错性约束loose.dtd
   		2.默认1个meta一个title
   	html:5
   	doctype声明：
   

   主体：

   html:
   	根元素
   	最大父元素
   
   head
   	meta：
   		设置字符编码
   		html5中：meta：设置手机端属性
   		编码字符集    charset="UTF-8"
   	title：
   		设置标签页名称
   	引入第三方文件
   	
   body:
   	在浏览器上想要展示的内容
   

4. 元素

   a.元素的组成
   	开始标签 元素内容 结束标签
   	<标签名称>  hello </标签名称>
   
   	有一部分标签没有结束标签：
   		单标签/空元素
   
   	标签不能交叉嵌套
   

   b.元素的分类

   块级元素：
   	div
   	特点：
   		独占一行空间
   		不与其他元素共享一行空间
   		宽度占满整个父级元素
   		高度由子级元素撑起
   
   行内元素：
   	span
   	特点：
   		可以和其他元素共享一行空间
   		宽高由子级元素撑起,不能直接设置宽高
   		不能直接设置上下的内外边距
   

5. 属性

   a.属性的设置

   写在开始标签内部
   属性名和属性值之间使用等号连接
   多对属性之间使用空格连接
   

   b.属性的分类

   1》按照公有性分类
   	公有属性：
   		所有标签都能设置的属性
   		id：元素的唯一标识
   		class：按类标识元素
   			多个属性值之间使用空格隔开
   		style:设置行内样式
   			按照css语法设置
   		title：设置提示
   
   	私有属性
   		为当前标签设置
   2》按照属性特性分类
   	基本属性：
   		属性值使用字符串类型
   			""
   			''
   			<div id='"one"'></div>嵌套使用
   	布尔值属性
   		属性值只有true和false
   		readonly='readonly';//true
   		readonly='true'
   		readonly=true
   		readonly
   
   		key=value:
   		键值对
   		key='key'
   		key='true'
   		key=true
   		key
   

6. 语法

   a.空白

   	在文档中无论出现多少个空白或者换行，浏览器都解析为一个空白
   	pre标签：段落标签，保留用户所输入的格式
   

   b.字符实体

   键盘上的空格只是一个文本分隔符，不管写多少个，搜索引擎上只展示一个
   使用&开头
   使用;结尾
   中间写实体名称
   
    	空格
   &lt;-> 	<       less than
   &gt;->	 >      great than
   &quot;	“
   &copy;	圈C
   &reg;	圈R
   &times;	x
   

   c.注释

   注释的作用：
   	用来提升代码的可读性，便于代码的维护和管理
   注释的表现形式：
   	<!--注释内容-->
   	被注释掉的内容不会被浏览器所解析
   

7. 标签

   布局：

   div+span
   html中的无意义元素
   

   标签属性：

   body：
   	8px的外边距
   p：段落标签16px（paragraph）
   h1-h6   标题标签     h$*6
   pre：段落标签，保留用户所输入的格式
   br:换行标签
   hr：水平线
   	size:设置水平线高度
   	width:水平线的宽度
   	align:水平线的位置
   		left
   		center
   		right
   sub   下角标
   sup   上角标
   div:块
   span：行
   img：图片
   	alt：图片占位符，替换图片的内容
   	src：引入图片地址source
   			1.网上的url
   			2.本地绝对路径
   			3.本地相对地址
   		title：图片提示符
   		width：设置图片宽度px
   		height：设置图片高度px
   	特殊的行内元素（替代元素）display：inline-block
   	./
   	../
   	../../
   

   a：

   链接anchor 锚
   	1）超链接 
   	2）锚点 可以找到链接的一个位置，置顶操作
   		通过id属性设置锚点位置
   		#id属性值
   	3）打电话，发邮件 
   	4）协议限定符 
   	href="http://www.baidu.com" （hyperText reference）超文本引用，所指向的目标地址
   	3》邮箱地址
   		mailto:邮箱地址
   	target:设置页面的打开方式
   		_blank:打开新页面
   		_self:在当前页面中打开
   		_top:在顶级框架中打开
   		_parent:在父框架中打开
   	http://www.baidu.com
   

   强调元素：

   em   斜体
   i
   strong     浏览器把这个字当做一个关键字
   b      只是样式加粗
   del
   u
   …
   

   列表

   li，dd，dt，ul，ol，dl块级元素
   
   a.ol有序列表
    	order list
   	<ol type="1" reversed="reversed"> A/a/i/I
   		<li>marvel</li> 
   		<li>速 8</li> 
   		<li>返老孩童</li> 
   		<li>了不起的盖茨比</li> 
   	</ol>
     如果想从第 2 个开始排序，就写<ol type = “i” start = “2”>
     
   b.无序列表 ul
   	unorder list 只有 type = “”这一个属性可以改 
   	ul 和 li 是一个很好的天生父子结构(柜子与抽屉)，可以做导航栏 
   	<ul type = “disc”> 
   		<li>草莓</li> 
   		<li>苹果</li> 
   		<li>橙子</li>
   	</ul> 
   	如 type = “disc” 意思是 discircle，实心圆 
   	如 type = “square” 意思是 square，实心方块 
   	如 type = “circle” 意思是 circle，圈(空心圆)
   	
   c.dl：标题列表
   	dt:标题标签
   	dd：列表项
   

   导航栏

   table:（tr3>td4)

   表格
   caption:设置表格标题
   thead：设置表格头部
   tbody：设置表格体部
   tfoot：设置表格脚部
   	tr：一行
   		td/th：一个单元格
   
   	table的私有属性：
   		align：表格在文档中的对齐方式，可取值为left，center，right
   		border:
   		cellpadding：内边距
   		cellspacing：表间距
   		width
   		bgcolor
   	td/th:
   		colspan    跨列合并
   		rowspan   跨行合并
   				
   tr的父标签是tbody
   
   以table的width为准
   <table align="center" border="5px" width="200px">
    th,td{
               width: 100px;
               height: 30px;
               border: 1px solid black;
           }
   
   colgroup将每一列进行分组，写在所有tr之上
   col定义一个表中的列，并用于在所有公共单元上定义通用语义
   span跨列数，即规定有几列作为同一列
   <colgroup>
       <col style="background-color: rgb(45, 90, 236);">
       <col span="2" style="background-color: yellow;">
       <col style="background-color: rgb(207, 153, 53);">
    </colgroup>
   

   form：

   表单
   与服务器端进行数据交互时使用的标签
   表单
   
   私有属性：
   	action：表单提交地址
   	target：
   		_self
   		_blank
   	method:设置表单提交方式
   		get:
   			1.将数据拼接在浏览器地址栏上
   			2.安全性较低
   			3.只能提交轻量级数据
   		post：
   			1.将数据封装在请求体中
   			2.安全性较高
   			3.可以提交重量级数据
   		表单默认使用get请求方式
   	enctype：设置表单提交的编码格式
   	
   子组件：
   	input:
   		私有属性：
   			type:
   				text:单行文本框
   				password：密码框
   				submit:提交按钮
   				button：普通按钮
   				reset：重置按钮
   				image：图片按钮
   				radio：单选框
   				checkbox：多选框
   				hidden：隐藏域
   				file：文件上传按钮
   				
   				placeholder：
   					对用户的输入进行提示，常用于搜索框。
   				required：
   					表示在表单提交之前，表单组件中必须输入值
   				pattern：
   					正则表达式
   			
   					username: <input type="text" name="username" size="30" required pattern='[a-zA-Z]{3}' placeholder="请输入您的真实姓名"> <br>
   				
   				form：
   					可以将表单内的从属元素写在页面的任何位置，然后为元素指定form属性，属性值为该表单的id
   				test：<input type="text" name="test" id="" form="two">
   				    <form action="1.html" id="two">
   				
   				formaction：
   				formmethod：
   				
   				step：步长
   				number
   				<input type="number" step="5" max="40" min="10">
   		               <input type="date">
   				color
   				url
   				email
   				week
   				date	
   			value:
   				1.写在按钮上，代表修改按钮名称
   				2.写在输入框上，代表输入框的默认值
   				3.写在单选/多选框上，代表交互数据的value
   				
   			name:
   				设置前后台交互数据的key值
   			src:
   				type=image
   			alt:
   			width
   			height:
   			checked：布尔值，默认选中
   				针对单选框和多选框
   			size:设置文本框的宽度
   				默认宽度20
   			maxlength:文本框的最大输入字符长度
   			readonly：只读，布尔属性
   			disabled:布尔属性，禁用组件
   
   			autofocus:自动聚焦，布尔属性
   			placeholder：提示用户输入
   			required：布尔属性，必填项
   
   		label:
   			关联文件和组件
   		    <label>
   		           男：<input type="radio" name="gender" checked value="men">
   	            </label>
   	            <label for="women">  //关联id=women的组件
   	                女：
   	            </label>
   	            <input type="radio" name="gender" value='women' id="women">
   		
   		fildset:划分区域
   			legend:设置区域标题
   
   		button：
   			按钮
   			type:
   				submit
   				reset
   				Button
   			          <button>普通按钮1</button>//默认submit提交按钮
   			    </form>
   			    <button>普通按钮2</button>//默认为button
   			如果button写在form标签内，type默认为submit
   			如果button写在form标签外，type默认为button
   
   		select：
   			下拉框
   			私有属性：
   				size：设置每次展示的项数
   				multiple：布尔属性，是否可以多选     Ctrl
   				disabled：
   				name
   			子组件：
   				option：选项
   					disabled：
   					selected：布尔属性，默认选中项
   				<select name="address" id="">
   			            <option>山西</option>        //不写value，浏览器默认生成的value为option元素内容
   			            <option value="内蒙古">内蒙古</option>
   			            <option value="江西">江西</option>
   			        </select>
   				
   				optgroup：
   					分组option
   						label属性：设置分组标题
   				
   		textarea：
   			多行文本输入框
   			cols：设置文本框的列数
   			rows：设置文本框的行数
   			个人简介：
   	                <textarea name="" id="" cols="100" rows="10"></textarea>
   			默认会自动换行
   			wrap：换行
   				off：不自动换行
   				hard：自动硬回车换行，换行元素一同被传送到服务器中
   				soft：自动软回车换行，换行元素不会传到服务器中
   	
   		progress：
   			进度条
   			max：定义进度元素所要求的任务的工作量，默认值为1
   			value：定义已经完成的工作量，如果max值为1.该值必须介于0~1之间
   		
   		meter：
   			规定范围内的数量值
   			<progress max="100" value="50">进度条</progress>
   	           <meter min="0" max="100" value="80" high="70" low="30">meter</meter>
   		
   		datalist：
   			提示用户输入
   			请求输入用户名：<input type="text" list="one" autofocus>
   		        <datalist id="one">
   		            <option value="lisi">lisi</option>
   		            <option value="tom">tom</option>
   		            <option value="terry">terry</option>
   		            <option value="larry">larry</option>
   		        </datalist>
   

   http协议：

   请求：
   	客户端-》服务器端
   	协议版本号
   	请求方式
   	请求参数
   	...
   响应
   	服务器端-〉客户端
   	协议版本号
   	状态码
   		200:ok
   		404
   		500
   		403
   		。。。。
   	readystate：（路上的状态）
   		0
   		1
   		2
   		3
   		4：响应完成
   	响应体：