html标签学习
基础知识
软件架构分类：CS（客户端-服务端）、BS（浏览器-服务端）；浏览器是特殊的客户端
在浏览器的网址栏内输入网址，简单来说发生了四件事：
- 浏览器向服务端发送请求
- 服务端接收请求
- 服务端返回响应内容
- 浏览器接收响应，并将响应内容按照一定规则渲染在页面上
浏览器要个多个不同的服务端打交道，因此需要浏览器和服务端遵循一定的规则，这个规则就是HTTP协议。
HTTP协议
超文本传输协议（也叫超文本转移协议），用来规定服务端和浏览器之间交互数据的格式。如果是BS软件，就必须准许HTTP协议，否则只能是自己写客户端的app。
HTTP四大特性
- 基于响应请求
- 基于TCP/IP协议作用在应用层的协议
- 无状态，（为了保存状态，后来出现了cookie\session\token技术）
- 无\短链接；一次请求一次响应，之后就断开连接，没有关系；（后来出现长链接，双方建立连接后默认不断开：websocket）
请求数据格式
# 请求首行\r\n请求头\r\n\r\n请求体\r\n
请求首行：标识HTTP协议版本，当前请求方式
请求头：一大堆k, v键值对
请求体：并不是所有的请求方式都有get没有post有 存放的是post请求提交的敏感数据
# 请求方式
get请求：向服务端要数据
post请求：向服务端提交数据
# 补充；
url：统一资源定位单位，即所谓的网址
响应数据格式
# 响应首行\r\n响应头\r\n\r\n响应体\r\n
响应首行：标识HTTP协议版本，响应状态码
响应头：一大堆k, v键值对
响应体：返回给浏览器展示给用户的数据
# 响应状态码：一串表示复杂状态或者描述信息的数字
1xx：服务端已经成功接收到了你的数据正在处理，你可以继续提交额外的数据
2xx：服务端成功响应了你想要的数据(200 OK请求成功)
3xx：重定向(301,302)
4xx：请求错误（404，资源不存在；403，没有访问权限）
5xx：服务器内部存错（500）
HTML
HTML是超文本标记语言缩写，我们在浏览器看到的页面，内部其实都是HTML代码(所有的网站内部都是HTML代码)。
HTML就是编写网页的一套标准。
# HTML的注释
<!--单行注释-->
<!--
多行注释1
多行注释2
多行注释3
-->
# 由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找
<!--导航条开始-->
导航条所有的html代码
<!--导航条结束-->
<!--左侧菜单栏开始-->
左侧菜单栏的HTMl代码
<!--左侧菜单栏结束-->
HTML文档结构
<html>
<head></head>:head内的标签不是给用户看的 而是定义一些配置主要是给浏览器看的
<body></body>:body内的标签 写什么浏览器就渲染什么 用户就能看到什么
</html>
HTML代码是没有格式的，可以全部写在一行都没有问题，只不过我们习惯了缩进来表示代码
HTML标签
HTML标签分类
方式1：双标签 or 单标签（自闭合标签）
双标签：<h1></h1>、<a></a> 等
单标签：<img/> 等
方式2：块级标签 or 行内标签
块级标签：h1~h6 p div 等;
行内标签：i u s b span 等
# 块级标签独占一行；行内标签自身文本多大就占多大
# 1 块儿级标签可以修改长宽 行内标签不可以 修改了也不会变化
# 2 块儿级标签内部可以嵌套任意的块儿级标签和行内标签
# 3 p标签虽然是块儿级标签 但是它只能嵌套行内标签 不能嵌套块儿级标签
# 4 行内标签不能嵌套块儿级标签 可以嵌套行内标签
head内常用标签
<title></title> # 网页标题
<style></style> # 内部用来书写css代码
<script></script> # 内部用来书写js代码
<script src="myjs.js"></script> # 还可以引入外部js文件
<link rel="stylesheet" href="mycss.css"> # 引入外部css文件
<meta charset="UTF-8"> # 指定页面字符编码
<meta name="keywords" content=""> # 书写网页检索内容的关键词
<meta name="description" content=""> # 书写网页的描述性信息
body内常用标签
基本标签
<h1>我是h1</h1> 标题标签 1～6级标题
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<p>段落</p>
<br> 换行
<hr> 水平分割线
特殊符号：HTML特殊字符编码对照表
空格
> 大于号
< 小于号
& &
¥ ¥
© ©
® ®注册商标
常用标签
div 块儿级标签
span 行内标签
页面的布局一般先用div和span占位之后再去调整样式 尤其是div使用非常的频繁
div你可以把它看成是一块区域 也就意味着用div来提前规定所有的区域,之后往该区域内部填写内容即可
而普通的文本先用span标签
img图片标签
<img src="" alt="" title="" height="" width="">
参数：
src，图片路径（本地|网络）,还可以是url,将自动向该url发get请求获取数据
alt，当图片加载不出来的时候 给图片的描述性信息
title，当鼠标悬浮到图片上之后 自动展示的提示信息
height|width，宽高，单位是px，修改一个，等比例缩放；修改两个，图片可能失真
a标签：链接标签
<a href="" target=""></a>
"""
当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色
如果点击过了就会是紫色（浏览器给你记忆了）
"""
参数
href
-1.放url，用户点击就会跳转到该url页面
-2.放其他标签的id值 点击即可跳转到对应的标签位置
target
_self 默认a标签是在当前页面完成跳转
_blank 你也可以修改为新建页面跳转
# a标签的锚点功能
"""eg:点击一个文本标题 页面自动跳转到标题对应的内容区域"""
<a href="" id="d1">顶部</a>
<a href="#d1">回到顶部</a>
标签的两个重要属性
# id值， 标识唯一身份，一个html页面内id值不允许重复
# class值， 标识一类标签
# 补充：标签既可以有默认的属性，也可以自定义新属性
<p id="first-one" class="orange" username="xliu" password="none"></p>
列表标签
# 无序列表、有序列表、标题列表
# 无序列表
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第二项</li>
<li>第二项</li>
</ul>
# 有序列表
<ol type="1" start="5">
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
# 标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
<dt>标题3</dt>
<dd>内容3</dd>
</dl>
table表格标签
<table>
<thead> # 表头(标题栏)
<tr> # 一个tr就表示一行
<th>caption</th> 标题
</tr>
</thead>
<tbody> # 表单(数据栏)
<tr>
<td>text</td> 文本
</tr>
</tbody>
</table>
参数
<table border="1"> # 加外边宽
<td colspan="2"></td> # 水平方向合并
<td rowspan="2"></td> # 垂直方向合并
