HTML笔记整理

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
		        特点：   
		             本身不具有逻辑能力和行为能力
			         只能被读取（浏览器）

2.html特点

1.从上到下依次解析（重要）
2.容错性（宽松性）
3.大小写不敏感 即<div><DIV>均不报错

3.文档结构

**创建html文档**：
	            以.html或者.htm为后缀名的文件
	       
**默认文档结构**：
	            快捷键生成：
		        html:4t
		        html:5

**doctype声明**：
html:根元素或者叫最大父元素
head
		meta：设置字符编码
        html5中：meta：设置手机端属性
	    title：设置标签页名称
	    引入第三方文件
body:在浏览器上想要展示的内容

4.元素

1.元素的组成

	开始标签 元素内容 结束标签
	<标签名称>  hello </标签名称>
    有一部分标签没有结束标签被叫做单标签或者空元素
    
    注意：标签不能交叉嵌套

2.元素的分类

块级元素：

	    div   a
		特点：
			独占一行空间 不与其他元素共享一行空间
		    宽度占满整个父级元素
			高度由子级元素撑起
			可以直接设置宽高

行内元素：

		span
		特点：
			可以和其他元素共享一行空间
			宽高由子级元素撑起,不能直接设置宽高
			不能直接设置上下的内外边距
	    特殊的行内元素（替代元素）display：inline-block

块级元素和行内元素的区别：

1.块级独占一行，行内可以和其他元素共享一行
2.块级元素可以包含块级元素和行内元素，行内元素只能包含文本和其他行内元素
3.块级元素可以设置宽高，行内元素不能设置宽高

如何将一个块级元素或者行内元素水平垂直居中？

5.属性

1.属性的设置

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

2.属性的分类

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

6.语法

<1>.空白
	在文档中无论出现多少个空白或者换行，浏览器都只解析为一个空白
<2>.字符实体
	使用&开头   使用;结尾
	中间写实体名称
<3>注释
	  注释的作用：提升代码的可读性，便于代码的维护和管理
	  注释的表现形式：
		             <!--注释内容-->（单行）
		             /*注释内容*/（多行）	
		             被注释掉的内容不会被浏览器所解析

7.标签

body：8px的外边距
p：段落标签16px
pre：段落标签，保留用户所输入的格式
div:块
span：行
img：图片
alt：替换图片的内容
src：引入图片地址
width：设置图片宽度px
height：设置图片高度px
强调元素：  i（斜体文本 没有强调作用）  italic
          em （强调内容并倾斜显示文本）  emphasis
          strong（强调文本，文本被加粗）
          b（加粗 没有强调作用）  
          u（为文本添加下划线） underline
          del （定义文档中已被删除的文本）delete
br:换行标签
hr：水平线
    size:设置水平线高度
    width:水平线的宽度
    align:水平线的位置 
left
center
right
sub（subscript）：定义下标文本；标签中的内容会以当前文本流中字符高度的一半来显示，但是字体和字号与当前文本流中的文字是一样的
sup（supscript）：定义上标文本
h1-h6:标题标签
a:标签 定义超链接，用于从一张页面链接到另一张页面（块级元素 点之前和点之后颜色会不同 是用来实现的标签）
  属性：（1）href:设置链接地址  用来指示链接的目标
           1>规定链接指向的页面的url
           2>锚点
	       通过id属性设置锚点位置
	       #id属性值
           3>邮箱地址  mailto:邮箱地址
        
       （2）target:设置页面的打开方式（规定在何处打开链接文档）
                   _blank:打开新页面
                   _self:在当前页面中打开
                   _top:在顶级框架中打开
                   _parent:在父框架中打开
                   framename：在指定的框架中打开被链接文档

**table:表格**
caption:设置表格标题
thead：设置表格头部
tbody：设置表格体部
tfoot：设置表格脚部
tr：一行
td/th：一个单元格

table的私有属性：
align：
border:（注意：是属性不是标签）围绕表格的边框的宽度
cellpadding：规定单元格边沿与其内容之间的空白（最好使用css的text-align:center来添加内边距）
cellspacing
width
bgcolor
td/th:元素定义表格单元/元素定义表头
colspan：属性规定单元格可横跨的列数
rowspan：属性规定单元格可横跨的行数

form：表单（标签）
	  私有属性：
		      action：表单提交地址
		      target：指定在新窗口打开
			  _self：在当前窗口打开
			  _blank：在空白窗口打开
		      method:设置表单提交方式（get post）
    get:
	1.将数据拼接在浏览器地址栏上
	2.安全性较低（密码直接拼接上去）
	3.只能提交轻量级数据
	
    post：
	1.将数据封装在请求体中
	2.安全性较高
    3.可以提交重量级数据	   
	表单默认使用get请求方式
	
    enctype：设置表单提交的数据类型
    
    子组件input：表单组件（文本框标签）
	   私有属性：
	           style属性：为input元素设定css样式
			   text:单行文本输入框
			   password：密码输入框
			   
			   button：普通按钮
			   submit:提交按钮
			   reset：重置按钮
			   image：图像按钮
			   radio：单选按钮
			   checkbox：多选框 复选框
			   
			   hidden：隐藏域
			   file：文件域
               value:
	                 1.写在按钮上，代表修改按钮名称(button reset submit)
	                 2.写在输入框上，代表输入框的默认值（text password hidden）
	                 3.写在单选/多选框上，代表交互数据的value（radio checkbox image）
               name:input名称
               size：元素的宽度
	           width：当input type="image"时，通过width属性控制元素的宽度
               height: 当input type="image"时，通过height属性控制元素的高度
	           checked：布尔值，默认选中
针对单选框和多选框
	size:设置文本框的宽度 默认宽度20
	maxlength:文本框的最大输入字符长度
	readonly：只读，布尔属性
	disabled:布尔属性，禁用组件
	autofocus:自动聚焦，布尔属性
	placeholder：提示用户输入
	required：布尔属性，必填项
    label: 关联文件和组件
    legend:设置区域标题
	button：按钮
    type:submit
	reset
	button
	如果button写在form标签内，type默认为submit
	如果button写在form标签外，type默认为button
select：下拉框
	    私有属性：
			    size：设置每次展示的项数
			    multiple：布尔属性，是否可以多选
			    disabled：
			    name
		子组件：
				option：选项
				disabled：
				selected：布尔属性，默认选中项
                optgroup：
			   分组option
			      <option>1</option>
			      <option>2</option>
			      <option>3</option>
   label属性：设置分组标题
   textarea：多行文本输入框
			        cols
			        row
			        wrap
			        off
				    hard
				    soft

http协议：

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