HTML

前端学习路径

#知识脉络：
HTML、CSS、JavaScript、jQuery（框架）、Bootstrap（框架）
前端三剑客：HTML、CSS、JavaScript（目前学习内容）

#类比说明：
HTML：网页的骨架
CSS：网页的样式
JavaScript：网页的动态效果

HTTP简介

 	HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 

HTTP协议

	HTTP协议（Hyper Text Transfer Protocol，超文本传输协议，即传输文字、图片、音频、视频等超文本数据）是一种用于分布式、协作式和超媒体信息系统的应用层协议。为了更快地处理大量事务，确保协议的可伸缩性，HTTP协议被设计成了一种无状态协议，不保留之前一切的请求或响应报文的信息。HTTP协议也是万维网（WWW，World Wide Web）的数据通信的基础。

HTTP协议的四大特性

#基于请求、响应
	服务端永远不会主动给客户端发消息，必须是客户端先请求服务端被动响应
#基于TCP/IP作用于应用层之上的协议
	应用层协议：HTTP、HTTPS、FTP...
#无状态
	服务端不保存客户端状态（纵使见她千百遍，仍然当她如初见）
#短链接
	不保持客户端于服务端之间的链接导通
	补充：websocket（长连接），主要用于加好友聊天等业务

数据格式

请求格式：
即客户端给服务端发送消息应该遵循的数据格式

（1）请求首行（请求方法，协议版本）

（2）请求头（一大堆k：v键值对）

（3）换行，不能省略

（4）请求体（携带敏感数据：密码、身份证号...），不是一致都有
"""
b'GET / HTTP/1.1\r\n  请求首行
Host: 127.0.0.1:8080\r\n  请求头
Connection: keep-alive\r\n
Cache-Control: max-age=0\r\n
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="100", "Google Chrome";v="100"\r\n
sec-ch-ua-mobile: ?0\r\n
sec-ch-ua-platform: "macOS"\r\n
Upgrade-Insecure-Requests: 1\r\n
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36\r\n
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9\r\n
Sec-Fetch-Site: none\r\n
Sec-Fetch-Mode: navigate\r\n
Sec-Fetch-User: ?1\r\n
Sec-Fetch-Dest: document\r\n
Accept-Encoding: gzip, deflate, br\r\n
Accept-Language: zh-CN,zh;q=0.9\r\n
\r\n 换行
请求体
'
"""

响应格式：

即服务端给客户发消息应该遵循的数据格式

（1）响应首行（响应状态码，协议版本）
（2）响应头（一大堆k：v键值对）
（3）换行，不能省略
（4）响应体（给浏览器展示给用户看的页面内容）

响应状态码

1XX: 服务端成功接收到了你的数据正在处理 你可以等待或者继续发送
2XX: 200 OK  表示请求成功 服务端给出了响应
3XX: 301\302 表示重定向(想访问A页面但是自动跳转到了B页面)
4XX: 403请求不合法(权限不够)	404请求资源不存在
5XX: 都是服务端错误  与客户端无关(代码bug、机房炸了...)

HTML文档结构

给浏览器看的数据
给用户看的数据

id和class

HTML作为文本标记语言，定义了标签，或者称为元素，而id和class是其全局属性中的两个：
  id：顾名思义，元素的唯一标识id，页面中不应有重复
  class：元素的类名称（可以通过元素的classname来访问它

HTML标签

 1.标签的格式:
      <标签名>封装的数据

    2.标签名大小写不敏感。（不区分大小写）

    3.标签拥有自己的属性。
      分为基本属性：bgcolor=“red” 可以修改简单的样式效果
      事件属性： οnclick=“alert(‘你好！’);” 可以直接设置事件响应后的代码。

    4.标签又分为，单标签和双标签。
      单标签格式： <标签名/> 如：
 换行,
 水平线
      双标签格式: <标签名> …封装的数据…

    5标签的语法：
      双标签一定要结束
      标签不能交叉嵌套
      属性必须有值，属性值必须加引号
      注释不能嵌套

中的常用标签

head标签内编写的标签一般都是给浏览器看的
  title标签			控制网页小标题
  style标签			内部支持编写css代码
  link标签			引入外部css文件
  script标签		        内部支持编写js代码 也可以通过src属性引入外部js文件
  meta标签			功能非常多
  				keywords:搜索引擎查询关键字
    				description:用于展示页面搜索结果的文本描述
"""
正常的业务逻辑 HTML CSS JS都会分不同的文件存储 用于解耦合
"""

HTML常用标签

# 1.标题系列: h1~h6(1到6级标题)
 	
一级标题
    
二级标题
    
三级标题
    
四级标题
    
五级标题
    
六级标题
# 2.字体系列
    斜体
    加粗
    下划线
    删除线
# 3.文本段落： 

	
何处望神州 满眼风光北固楼
    
# 4.其他
	hr	水平分割线
	br	换行符

body内特殊符号（html）

 		空格
>		大于号
<		小于号
&		&符号(and)
¥		羊角符(￥)
©		版权	
®		商标(?)

HTML 段落标签(p)

 	
我是第一段
    
我是第二段

HTML 超链接（链接）标签(a)

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档
或者当前文档中的某个部分。
    标签是超链接
    href 属性设置连接的地址
    target 属性设置哪个目标进行跳转
      _self 表示当前页面(默认值)
      _blank 表示打开新页面来进行跳转

HTML列表标签

HTML 支持有序、无序和定义列表，常用的为前两者。
    1.无序列表
    		

    			

    			

    			

    		
    

    type 属性可以修改列表项
前面的符号：
      circle 空心圆
      disc 实心圆
      square 实心方块
      none 无符号
    我们可以使用快捷方式创建ul>li*n(n为你想要创建li的个数)，然后我们按下TAB键即可。


    2.有序列表
                    

    			

    			

    			

    		    
    

    type 属性可以修改列表项前序号的样式
      1 默认的样式 (1,2,3,4,5....)
      a 改为（a,b,c,d,e,f....）
      A 改为（A,B,C,D,E,F.....）
      i 改为(i,ii,iii,iv....)
      I 改为（I,II,III,IV....）
    我们可以使用快捷方式创建ol>li*n(n为你想要创建li的个数)，然后我们按下TAB键即可。

HTML 图像标签

标签可以在html 页面上显示图片。
src 属性可以设置图片的路径 
width 属性设置图片的宽度
height 属性设置图片的高度
border 属性设置图片边框大小
title  鼠标悬浮自动展示提示信息
alt 属性设置当指定路径找不到图片时,用来代替显示的文本内容

HTML表格标签

  

    
  
        
  
            
编号
  
            
姓名
            
年龄
        
    
  
    
    
  
        

            
1
  
            
jason
            
18
        
        

            
2
            
tony
            
28
        
        

            
3
            
kevin
            
38