HTML 前端学习（1）—— 初识HTML
HTML 前端学习（1）—— 初识HTML
浏览器输入网址回车后发生了几件事？
1. 浏览器朝服务端发送请求
2. 服务端接收请求（eg：请求百度首页）
3. 服务端返回相应的响应（eg：返回一个百度首页）
4. 浏览器接收响应，根据特定的规则渲染页面展示给用户看
如何做到浏览器能和多个客户端之间进行数据交互
1. 浏览器可以自动识别不同服务端做出不同的处理
2. 制定一个统一的标准，即 HTTP 协议
HTTP协议
超文本传输协议
1. 用来规定服务端和浏览器之间的数据交互格式
2. 该协议可以不遵循，但是你的服务端不能被浏览器正常访问，就自己写客户端，用户使用就下载你专门的 APP
四大特性
1. 基于请求响应
2. 基于 TCP/IP 作用于应用层
3. 无状态
不保存用户信息
eg：一个人来了一千次，你都记不住，当作是第一次见面
由于 HTML协议 是无状态的，所以后续出现了一些专门来记录用户状态的技术：session，cookie，token
4. 短/无链接接
请求来一次响应一次
长链接：双方建立链接之后默认不断开，如 webstorm
请求数据格式
请求首行（标识 HTTP 协议版本，当前请求方式 ）
请求头（一大堆 K,V 键值对）
\r\n
请求体（并不是所有的请求方式都有。get没有post有，存放的是post请求提交的敏感数据）
响应数据格式
响应首行（标识 HTTP 协议版本，当前响应状态码）
响应头（一大堆K,V键值对）
\r\n
响应体（返回给浏览器展示给用户看的数据，及页面）
请求方式
Get 请求
从服务端（浏览器）获取数据
一般情况下不使用请求体存储数据，如果要存储数据一般使用URL后面直接加数据的方式
例如：url?username=aoteman&password=abc123
eg.输入网址获取对应的内容
Post 请求
向服务端（浏览器提供数据）
eg.用户登录，输入用户名和密码，提交到服务端后端做身份校验
响应状态码
用一串简单的数字表达一段简单的状态或者描述性信息。
1xx：服务端已经成功接收到你的数据正在受理，你可以继续提交额外的信息
2xx：服务端成功响应了你想要的数据（200 表示请求成功）
3xx：重定向（当你在访问一个需要登陆才能看的页面，你会发现自动跳转到登陆页面）
4xx：请求错误
404：请求资源不存在
403：当前请求不合法或者不符合访问资源的条件
5xx：服务器端出现问题，比如服务器崩溃
HTML
超文本标记语言
注释
注释是代码之母
1. <!--单行注释-->
2. <!--
多行注释
多行注释
-->
3. 由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找
<!--导航条开始-->
导航条所有 HTML 代码
<!--导航条结束-->
文档结构
<html>
<head></head> 写HTML文件配置内容，不是给用户展示的，即用户不需要看懂
<body></body> 浏览器渲染展示给用户看的部分
</html>
标签分类
单标签和双标签
单标签，如：<img src="" alt="">
双标签，如：<a href=""></a>
块级标签和行内标签
常见的块级标签
独占一行
div标签，p标签，h1~h6
1. 块级标签可以修改长宽，行内标签不可以，修改了也不会变化
2. 块级标签内部既可以嵌套块级标签也可以嵌套行内标签
ps: p 标签只能嵌套行内标签，但如果嵌套了行内标签也没有问题，因为在运行的时候浏览器会自动解套
常见的行内标签
自身文本多大就占多大位置
span标签 i u s b
行内标签可以嵌套行内标签
head内常用标签
<title>Title</title> 定义页面名称
<style></style> CSS层叠样式
<link rel="stylesheet" href=""> href 调用本地的 CSS 文件进行渲染
<script></script> 书写 js 命令 或是 调用 js 文件
<meta name="keywords" content=""> 当你在用浏览器搜索时，只要输入了 keywords 后面指定的关键词那么该网页就有可能被百度搜索出来展示给用户
<meta name="description" content=""> 网页的描述信息
body内常用标签
<a href="" target=""></a> 超链接
href 可以输入网址也可以输入该HTML文件中的标签 id ，实现跳转
如：<a href="#hq" target="">跳转</a>
<h1 id="hq">123</h1>
target 默认是 _blank 表示新打开一个网页跳转页面
_self 表示在原有网页的基础上跳转页面
<img src="" alt=""> 图片标签
src 可以输入本地图片路径
也可以输入 url （注意这里 url 既可以是图片的url 也可以是网址的 url）
alt 是图片加载不出来展示给用户的描述性信息
title 鼠标悬浮到图片上之后，自动展示的提示信息
height="800px"
width=""
高度和宽度只修改一个参数时，另一个参数会等比例缩放
<p></p> 段落标签，展示时自动换行
<h1></h1> 标题标签，从 h1~h6
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
HTML 中特殊符号
空格
> 大于号
< 小于号
& &符号
¥ 羊角符?
© 版权?
® 商标?
标签的两个重要属性
id 值
类似于身份证，在一个 HTML 文档中，不能有相同的 id 值
class 值
该值有点类似于面向对象里面的继承，一个标签可以继承多个 class 值
列表标签
<ul>
<li>1li>
<li>2li>
<li>3li>
ul>