HTML5笔记整理

HTML5

一、html（属于解释性语言）
1.超文本标记语言
1）超文本和普通文本的区别
普通文本是纯字符
超文本中包含字符、音视频、图片等
2.浏览器是按照从上往下的顺序解析html文件的
3.语法错误时，浏览器不会报错
4.要以.html或.htm做后缀
5.编程语言和解释性语言
编程语言
c .c
java .java
解释性语言
js .js
html .html
二、开发环境
文本编辑器：Vscode（本人使用）
测试浏览器：firefox（火狐） chrome（谷歌）
服务器：阿里云
三、代码开发流程
1.在Vscode中编写代码
2.右击当前文件open in broswer
3.浏览器中查看效果
4.将本地代码上传到阿里云服务器
5.通过公网IP访问部署的代码
四、HTTP协议
HTTP协议采用了请求/响应模式
请求：
请求体、请求头、请求数据
传递请求数据
eg.
let obj = {name : ‘tom’, age : ‘23’}
请求头
content-type: ‘application/json’
content-type: ‘application/x-www-form-urlencoded’
响应
响应体、响应头、响应内容
状态码（200、404、400）
响应内容
ajax res.data
axiosres res.data.data
接口所需要的数据格式不同时
json字符串：“{‘name’:‘tom’,‘age’:‘23’}”
查询字符串： name = tom&age = 23

五、url统一资源定位符
URI和URL
URI（统一资源标识符） 与 URL（统一资源定位符） 不同。
URL 描述资源的位置，而 URI 描述资源的 id。
URI 可以是一个资源的 URL（地址）、或 URN（统一资源名称）。
六、HTML解构
1.注释
注释格式需要注意与CSS中注释格式不同
2.实体
空格 &nbsp；
3.元素（标签）的构成
4.块级元素和行内元素
元素的组成
外边距margin + 边框border + 内边距padding +内容
块级元素【支撑起整个网页的结构】
如：div\html\body\h1-h5\p\ul li\ol li…
特点：
1）独占一行空间
2）高度由内容决定、宽度占满窗口
3）宽高可以设置
行内元素【填充网页】
如：span\i\bold\a超链接…
a超链接：
target设置超链接的打开方式
_self当前选项卡打开
_blank 新建选项卡打开
href 设置访问的地址
url 访问的地址
锚点 id
1）可以和其他元素共享一行空间
2）宽高由内容决定
3）宽高无法设置
块级元素和行内元素的转换
display:block; 将元素设置为块级元素
display:inline-block; 将元素设置为行内块元素
如何给行内元素设置宽高？
先将行内元素设置为块级元素或者行内块元素，再设置宽高即可
区别：
块级元素可以嵌套其他元素
行内元素不可以嵌套块级元素
5.属性
1）核心属性【绝大部分标签都可以使用的属性】
id 唯一标识
class 类名
title 提示语
style 样式
2）特有属性【某些标签才具有的属性】
a标签 href target
img标签 src加载图片的地址 alt图片无法加载时显示的文字
3）自定义属性
6.表格
table属性：border cellpadding cellspacing bgcolor
caption 表格的标题
thead 表头
tr
th
tbody
tr
td
合并单元格
colspan 跨列数
rowspan 跨行数
h5新增语义化标签
header、aside、nav、article、section、footer、address
7.form表单
1.提交方式get和post的区别
get会将请求数据拼接在浏览器的地址栏上，www.baidu.com?name =tom&age = 23 此方式不安全，请求数据的大小有限制
post将请求数据放在请求体中，请求数据的大小一般没有限制，比较安全
2.form
属性：action method target
3.表单的组件
1）label
for 取值为某一个id，可以和具有当前id表元素绑定
2）input
type
text 单行文本框
submit 提交表单
radio 单选按钮
checkbox 复选按钮
reset 重置表单
password 密码框
file 文件的上传
image 图片按钮
vlaue
3）select
option
value 这个value才是真正提交给后台的数据
4）textarea
5）button
type
submit
reset
4.表单的提交
用户点击新增按钮–>弹出模态框（表单）–>输入信息–>用户点击确认提交按钮–>将数据发送给后台–>关闭模态框–>调用重置按钮，清空表单内容–>下一次点击显示模态框时内容为空
5.*表单元素和a标签具有默认行为，点击时会自动刷新浏览器页面

本文地址：https://blog.csdn.net/yanxuanrende/article/details/107375066