HTML学习笔记（一）初始HTML即head、body内常用标签介绍-CSDN博客

本文链接：https://blog.csdn.net/m0_51734025/article/details/122049059

这是听了林海峰老师的视频总结，来与大家一起学习分享~

一、首先聊一聊浏览器窗口输入网址回车发生了几件事吧

"""

1、浏览器朝服务端发送请求

2、服务端接受请求（比如：请求百度首页）

3、服务端返回相应的响应（返回一个百度首页）

4、浏览器接收响应，根据特定的规则渲染页面展示给用户看

"""

浏览器可以充当很多服务端的客户端，如百度，腾旭视频，优酷等等....

那么如何做到浏览器能够跟多个不同的客户端之间进行数据交互呢？

1、浏览器很厉害，能够自动识别不同服务端做不同处理（但现在显然不行）

2、制定一个统一的标准，如果你想要让你写的服务端能够跟客户端之间做正常的数据交互，那么你必须要遵守一些规则-----HTTP协议

二、简谈HTTP协议

HTTP协议即超文本传输协议，用来规定服务端和浏览器之间的数据交互的格式

该协议你可以不遵循，但是你写的服务端就不能被浏览器正常访问，你就只能自己跟自己玩，或者你就自己写客户端，用户想要使用，就下载你专门的app即可

# HTTP协议四大特性

'''
1、基于请求响应
2、基于TCP/IP作用于应用层之上的协议
3、无状态
    不保存用户的信息（由于HTTP协议是无状态的，所以后续出现了一些专门用来记录用户状态的技术如：                
    cookie、session、token....）
4、无/短链接
    请求来一次，我响应一次，之后两个就没有任何链接关系了
    长链接：双方建立连接之后默认不断开，websocket
'''

请求数据格式：

请求首行（标识HTTP协议版本，当前请求方式）

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

\r\n------》这里千万不能省略

请求体（并不是所有的请求方式，get请求方式没有，post请求方式有，请求体存放的是post请求提交的敏感数据）

响应数据格式

响应首行（标识HTTP协议版本，响应状态码）

响应头（一大堆k,v键值对）

\r\n------》这里千万不能省略

响应体（返回给浏览器展示给用户看的数据）

响应状态码

用一串简单的数字来表示一些复杂的状态或描述信息如404：请求资源不存在

1xx:服务端已经成功接收到了你的数据正在处理，你可以继续提交额外的数据

2xx:服务端成功响应了你想要的数据（如200 OK请求成功）

3xx:重定向（当你在访问一个需要登录之后才能看到的页面时，你会发现自动跳转到登录页面）

4xx:请求错误（如403：当前请求不合法或者不符合访问资源的条件；404;请求资源不存在）

5xx:服务器内存错误

请求方式

1、get请求：

朝服务端要数据

ps:输入网址获取对应的内容

2、post请求：

朝服务端提交数据

ps:用户登录输入用户名和密码之后，提交到服务端后端做身份校验

url:统一资源定位符（用大白话来说就是网址）

三、HTML简介

HTML是一种超文本语言

如果你想要让浏览器能够渲染出你写的页面，你就必须遵循HTML语法

我们浏览器看到的页面，内部其实就是HTML代码（所有的网站都是HTML代码）

HTML就是书写网页的一套标准

# HTML注释语句：注释是代码之母
<!--单行注释-->

<!--
多行注释1
多行注释2
多行注释3
多行注释4
-->

# 由于HTML代码非常的杂乱无章并且很多，所有我们习惯性的用注释来划定区域方便后续查找

<!--导航开始-->
导航条所有的html代码
<!--导航结束-->

<!--左侧菜单栏开始-->
左侧菜单栏所有的html代码
<!--左侧菜单栏结束-->

HTML文档结构

<html>
        <head></head>
head内的标签不是给用户看的，而是定义一些配置主要给浏览器看的

         <body></body>
body内标签写什么，浏览器就渲染什么，用户就能看到什么 

</html>

四、head内常用标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用来展示网页标题</title>
<!--在书写html代码的时候，只需要写标签名 然后tab键自动补全    -->
<!--head内常用标签讲解-->
<!--    内部书写css代码-->
    <style>
        h1{
            color: #1cb7fd;
        }
    </style>

<!--    内部书写js代码-->
    <script>
        alert(123)
    </script>

<!--    也可以用来引入外部js文件-->
    <script src="myjs.js"></script>

<!--    引入外部css文件-->
    <link rel="stylesheet" href="mycss.css">

    <!--指定文档的编码类型(需要知道)-->
<meta http-equiv="content-Type" charset=UTF8">
<!--2秒后跳转到对应的网址，注意引号(了解)-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--告诉IE以最高级模式渲染文档(了解)-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

<!--    name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。-->
<!--    当你在百度浏览器搜索的时候，只要输入keywords后面指定的关键子那么该网页就有可能被百度搜索出来展示给用户-->
    <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">

<!--    网页的描述性信息-->
<meta name="description" content="老男孩教育Python学院">
</head>
<body>
<h1>hello word</h1>
</body>
</html>

五、body内常用标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--基本标签-->
<!--h1:标题标签 1~6级-->
我是普通文本没有标签
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h5>我是h5</h5>
<h6>我是h6</h6>

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>

<p>段落标签</p>
<p>段落标签</p>
<br>换行
<hr>水平分割线
<!--基本标签-->

<!--标签的分类2-->
1、块儿级标签：独占一行
    如：h1~h6、p标签

2、行内标签：自身文本多大就占多大
    如：i、u、b、s标签
块儿级标签可以修改长度，行内标签不可以，修改了也不会改变
块儿级标签内部可以嵌套任意的块儿级标签和行内标签（特例：p标签虽然是块儿级标签，但它只能嵌套行内标签，不能嵌套块儿级标签）
    注意：如果你p标签嵌套了块儿级标签，问题也不大，并不会报错，因为浏览器会自动帮你解开，浏览器是直接面向用户的，不会轻易报错，哪怕有报错，用户也基本感受不出来
行内标签只能嵌套行内标签，不能嵌套块儿级标签
<!--标签的分类2-->

<!--特殊符号-->
&nbsp;空格符
&gt;大于号
&lt;小于号
&amp;&符号
&yen;符号
&copy;©符号
&reg;®符号

<p>哈哈哈哈&nbsp;&nbsp;&nbsp;&nbsp;达不到我吧</p>
2&gt;1
8&lt;10
LN&amp;DAD
电脑&yen;8000
版权&copy;
商标&reg;
<!--特殊符号-->

<!--常用标签-->
标签具有的两个重要属性：
    1、id值：类似于标签的身份证号，在同一个html页面上id值不能重复
    2、class值：该值有点类似于面向对象类的继承，一个标签可以继承多个class值
标签既可以有默认的属性外也可以有自定义的属性(不会报错，之后写项目的时候会用)
<p id="d4" class="c1" username="jason" password="123"></p>
<div>div:块儿级标签</div>
<span>span:行内标签</span>
<div>
    上述的两个标签是在构造页面初期最常使用的，页面的布局一般先用div和span占位之后再调整样式，尤其是div使用的非常频繁
div你可以把它看成是一块区域，也就意味着用div来提前规定所有的区域，之后往该区域内部填写内容即可,而普通文本先用span标签
</div>

<!--图片标签-->
<img src="D:\pachong_tupian\妖精的尾巴.jpg" alt="这是妖精的尾巴" title="yjdwb" height="800px" width="800px">
    src:
        1、图片的路径，可以是本地的图片地址也可以是网上的
        2、url     自动朝该url发送get请求获取数据
    alt:
        当图片加载不出来时，给图片的描述信息
    title:
        当鼠标悬浮到图片上之后,自动展示的提示信息
    height:
        图像高度
    width:
        图像宽度
    高度与宽度当你只修改一个的时候，另外一个参数等比例缩放
    如果你修改了两个参数没有考虑等比例问题，图片就会失真
<!--图片标签-->

<!--链接标签-->
<a href="baidu.com" target="_blank">点我去百度</a>
    href:
        1、放的是url，用户点击就会跳转到url页面
    当a标签指定网址从来没有被点击过，那么a标签的字体颜色是蓝色
        2、放其它标签的id值（不是a标签的其它标签的id值也可以），点击即可跳转到对应的标签位置
    target:
        默认a标签是在当前页面完成跳转，默认为_self
        你也可以修改为新建页面跳转 _blank

    a标签的锚点功能：
        点击一个文本标题，页面自动跳转到标题对应的内容区域
<!--a标签的锚点功能-->
<a href="" id="d1">顶部</a>
<h1 id="d11">hello~</h1>
<div style="height: 500px;background: #2b99ff"></div>
<a href="" id="d2">中部</a>
<div style="height: 500px;background: #7a77c8"></div>
<a href="#d1">回到顶部</a>
<a href="#d11">回到h1标签处</a>
<a href="#d2">回到中部</a>
<!--a标签的锚点功能-->
<!--链接标签-->

<!--链表标签-->
1、有序列表
2、无序列表（用的比较多）
3、标题列表

<!--无序列表-->
<!--type属性：
    disc（实心圆点，默认值）
    circle（空心圆圈）
    square（实心方块）
    none（无样式）-->
<ul type="circle">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    <li>第四项</li>
</ul>
虽然ul标签很丑，但是在页面布局的时候，只要是排版一致的几行数据基本上用的都是ul标签
<!--无序列表-->

<!--有序列表-->
<!--type属性：
    1 数字列表，默认值
    A 大写字母
    a 小写字母
    Ⅰ大写罗马
    ⅰ小写罗马-->
<!--ol>li*3 然后按tab键变成如下形式-->
<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

<!--ol>li{$}*3 然后按tab键变成如下形式-->
<ol type="A" start="5">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>
<!--有序列表-->

<!--标题列表-->
<dl>
    <dt>标题一</dt>
    <dd>内容一</dd>
    <dt>标题二</dt>
    <dd>内容二</dd>
</dl>
<!--标题列表-->

<!--链表标签-->
<!--常用标签-->


</body>
</html>