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:响应完成
响应体: