HTML基础(一)
HTML入门
HTTP协议
WEB服务的本质
请求 响应
请求方式:
-
get请求
向服务器要资源
-
post请求
向服务器提交数据
HTTP协议
HTTP:超文本传输协议
规定了服务端与浏览器数据传输的数据格式
四大特性
-
基于TCP/IP作用于应用层之上的协议
-
基于请求响应
请求对应响应
-
无状态
不保存客户端状态
无论连接多少次,都同样对待
-
无连接
长连接 websocket
数据格式
请求格式:
请求首行(请求方式 协议版本)
请求头 (键值对形式)
(*****空一行)
请求体(敏感信息 密码 身份证号)
响应格式:
请求首行(请求方式 协议版本)
请求头 (键值对形式)
(*****空一行)
请求体(给用户看的数据)
响应状态码
用数字来表示一串文字需要表达的意思
1XX : 服务端已经成功接收到了你的请求 正在处理 你可以继续提交其他数据
2XX : 服务端成功响应了相应的数据(200)
3XX : 重定向
4XX :（404请求资源不存在） （403你当前不符合某一些条件 无法正常访问）
5XX : 服务器内部错误(500)
HTML介绍
HTML是什么
HTML:超文本标记语言是一种用于创建网页的标记语言
它本质上是浏览器可识别的一种规则,按照这个规则去写网页,浏览器会根据规则渲染我们的网页.对于不同的浏览器,对同一个标签可能会有不同的解释(兼容性问题)
HTML的注释
<!--单行注释-->
<!--
多行注释1
多行注释2
多行注释3
-->
我们在搭建页面的时候 通常会利用注释来划分区域
<!--导航条开始-->
<!--导航条结束-->
<!--侧边栏开始-->
<!--侧边栏结束-->
HTML文档结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>css样式优先级</title>
</head>
<body>
</body>
</html>
--------------------------------------------------------------------------
#1.<!DOCTYPE html>声明为HTML5文档。
#2.<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
#3.<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
#4.<title>、</title>定义了网页标题，在浏览器标题栏显示。
#5.<body>、</body>之间的文本是可见的网页主体内容。
标签的分类
分类一:
1. 双标签(h1,a)
2. 自闭合标签(img)
分类二:
-
块儿级标签 h1-h6,p,br,hr,div
独占一行
-
块儿级标签内可以嵌套其他块儿级和行内标签
-
注意: p标签虽然是块儿级标签,但是它的内部不能嵌套任何块儿级标签
只能嵌套行内标签
-
-
行内标签 s,i,u,b,span
内部文本多大,就占多大
行内不能嵌套行内和块儿级
#块级元素与行内元素的区别：
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
标签通常有两个属性
id 就类似于身份证号,每一个标签,都对应有id值,并且在同一个html文档中,标签id唯一
class 类属性,有点类似于面向对象的继承 class = 'c1 c2 c3' 你这个标签就会拥有c1 c2 c3的所有样式
常用标签
head内常用标签
title 定义网页标题
style 内部支持写CSS代码
link 引入外部css样式文件
script 内部可以直接写js代码 也可引入外部js文件
meta 定义网页源信息
<meta name="keywords" content="*****">
<meta name="description" content="****">
body内常用标签
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<p>段落标签</p>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--换行-->
<br>
<!--水平线--><hr>
特殊字符
| 内容 | 对应代码 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版权 | © |
| 注册 | ® |
body内重要标签
div标签和span标签
div 标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
span 标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
img标签
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
a标签(超链接标签)
<a href="http://www.baidu.com" target="_blank" >点我</a>
--------------------------------------------------------------
1.跳转功能
href参数控制跳转的地址
这个地址如果在你的机器上如果没有被点击过那么默认是蓝色
只要点过一次之后 之后颜色 都是紫色
<!--<a href="https://www.sogo.com">点我点我</a>-->
a标签默认是在当前窗口跳转
你可以指定 新建窗口打开
target = "_self"
target = "_blank"
2.锚点功能
给a标签设置id值
然后在href中书写对应的a标签id值 点击即可跳转到对应的位置
<a href="" id="a1">文章开头</a>
<div style="background-color: red;height: 1000px"></div>
<div style="background-color: green;height: 1000px"></div>
<div style="background-color: orange;height: 1000px"></div>
<a href="" id="a2">文章中部</a>
<div style="background-color: black;height: 1000px"></div>
<div style="background-color: green;height: 1000px"></div>
<div style="background-color: orange;height: 1000px"></div>
<a href="#a1">回到顶部</a>
<a href="#a2">回到中部</a>
target：
_blank 表示在新标签页中打开目标网页
_self 表示在当前标签页中打开目标网页
img 图片标签
src
1.图片地址 网上的地址也可以是你的本地图片地址
2.url(网址) 自动朝该网址发送get请求 获取图片资源
alt
当图片加载不出来的时候 展示的提示信息
title
鼠标悬浮上去之后展示的提示信息
width和height
这两个参数 你只需要设置一个 就可以 默认是等比例缩放
两个都调整的话 图片就会失帧
列表
无序列表
<ul type="disc">
<li>第一项</li>
<li>第二项</li>
</ul>
type属性：
- disc（实心圆点，默认值）
- circle（空心圆圈）
- square（实心方块）
- none（无样式）
有序列表
<ol type="1" start="2">
<li>第一项</li>
<li>第二项</li>
</ol>
type属性：
- 1 数字列表，默认值
- A 大写字母
- a 小写字母
- Ⅰ大写罗马
- ⅰ小写罗马
