HTML

# HTML

概念：是最精彩的网页开发语言

Hyper Text Markup Language 超文本标记语言

超文本：超级文本（超链接）

标记语言：由标签构成的语言 <标签名称> 如 html，xml

标记语言不是编程语言
规范

语法:
1. html 文档后缀名 .html 或者.htm
2. 标签分为
  1. 围堵标签：有开始标签和结束标签。如 <html></html>
  2. 自闭和标签：开始标签和结束标签在一起。如 <br/>
3. 标签可以嵌套:
  
  需要正确嵌套，不能你中有我，我中你
```
<a><b></a></b> #错误
<a><b></b></a> #正确
```
  1
  2
4. 在开始标签中可以定义属性，属性是由键值对构成，值需要用引号（单双都可）引起来
5. html 标签不区分大小写，但是建议使用小写

# BS 架构

资源分类
1. 静态资源
  
  特点:
  
  所有用户访问，得到的结果是一样的（固定的）。
  
  如：文本，图片，音频，视频，HTML，CSS，JavaScript
2. 动态资源
  
  特点:
  
  所有用户访问，得到的结果可能不一样。
  
  如 jsp/servlet，php，asp
  
  如果用户请求的是动态资源，服务器会执行动态资源转换为静态资源发送给用户浏览器
静态资源:

Html: 用于搭建基础网页，展示页面的内容

CSS: 用于美化页面，布局页面

JavaScript: 控制页面的元素，让页面有一些动态的效果

# 基本标签

# 文档声明

 <!DOCTYPE html>

HTML 文档声明，告诉浏览器当前页面是 HTML5 页面；
让浏览器用 HTML5 的标准去解析识别内容；
必须放在 HTML 文档的最前面，不能省略，省略了会出现兼容性问题

# html

<html> 元素表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。

所有其他元素必须是此元素的后代

<html lang="zh-CN">

lang=“en” 表示这个 HTML 文档的语言是英文；
lang=“zh-CN” 表示这个 HTML 文档的语言是中文；

# head

HTML head 元素规定文档相关的配置信息（也称之为元数据），包括文档的标题，引用的文档样式和脚本等。

head: 头标签。用于指定 html 文档的一些属性。引入外部的资源

# title

<title>标题</title>

网页的标题

# meta

网页的编码

<meta charset="utf-8">

可以用于设置网页的字符编码，让浏览器更精准地显示每一个文字，不设置或者设置错误会导致乱码；
一般都使用 utf-8 编码，涵盖了世界上几乎所有的文字

# body

body 元素里面的内容将是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构

<body>
    <input type="text">
</body>

1
2
3

# 文本标签

和文本有关的标签

# h 元素

在一个页面中通常会有一些比较重要的文字作为标题，这个时候我们可以使用 h 元

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

1
2
3
4
5
6

<h1>–<h6> 标题 (Heading) 元素呈现了六个不同的级别的标题

Heading 是头部的意思，通常会用来做标题

<h1> 级别最高，而 <h6> 级别最低。

h 元素通常和 SEO 优化有关系

# p 元素

如果我们想表示一个段落，这个时候可以使用 p 元素

<p>
    test
</p>

1
2
3

HTML <p> 元素（或者说 HTML 段落元素）表示文本的一个段落。

p 元素是 paragraph 单词的缩写，是段落、分段的意思；

p 元素多个段落之间会有一定的间距；

# 不常用元素

注释:<!-- 注释内容 --> 
<br>:换行标签
<hr>  <!--展示一条水平线 拥有属性  color颜色 width宽度 size高度 aign对齐方式 （center居中  left左对齐 right右对齐）
<b> / <strong> <!-- 字体加粗 通常加粗会使用css样式来完成； --> 
<i> / <em> <!-- 斜体 通常斜体会使用css样式来完成；开发中偶尔会用它来做字体图标（因为看起来像是icon的缩写）；--> 
<s> / <del> <!-- 删除线 --> 
<u> / <ins> <!-- 下划线 --> 
<font> <!-- h5中已经淘汰 字体标签 拥有属性  color颜色  size字体大小  face字体   --> 
<center> <!-- h5中已淘汰  居中标签 --> 
<code></code> <!--用于显示代码偶尔会使用用来显示等宽字体； -->

1
2
3
4
5
6
7
8
9
10

# 图片标签

HTML <img> 元素将一份图像嵌入文档。

img 是 image 单词的所以，是图像、图像的意思；

事实上 img 是一个可替换元素（ replaced element ）；

   <img src="图片路径" align="图片对齐方式如右对齐" alt="图片加载失败显示的文字 widt="宽度像素大小" height="高度像素大小">
<!--
   src:图片路径  相对路径:以.开头的路径
./:开头的目录为当前目录  默认为./如./image/tv01.jpg
   ../:代表上一级目录的文件
   align:图片网页放置位置
   alt:图片加载失败显示文字
   width:宽度 即像素点大小
   height:高度
   border:设置图像的边框粗细
   title:鼠标悬浮在图片上提示的文字
-->

1
2
3
4
5
6
7
8
9
10
11
12

src 属性：source 单词的缩写，表示源，必须的，它包含了你想嵌入的图片的文件路径
- 本地图片：本地电脑上的图片，后续会和 html 一起部署到服务；
  - 绝对路径
  - 相对路径：对于网页来说，不管什么操作系统（Windows、Mac、Linux），路径分隔符都是 /，而不是 \
- 网络图片：一个 URL 地址；
alt 属性：不是强制性的，有两个作用
- 当图片加载不成功（错误的地址或者图片资源不存在），那么会显示这段文本；
- 屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义；

支持格式

# 列表标签

<!-- 列表标签  分无序列表和有序列表-->
<!-- 有序列表  ol:为列表的包头   li:为每个序列的包裹-->
有序列表
<ol type="A" start="2">  <!--type属性定义序号类型   start属性为起始序号 -->
    <li>第一行</li>
    <li>第二行</li>
    <li>第三行</li>
    <li>第四行</li>
</ol>
<!-- 无序列表  ul:为列表的包头   li:为每个序列的包裹-->
无序列表
<ul type="disc"> <!-- type同时可以定义列表序号的图像  disc实心圆  square方框  circle圆 -->
    <li>第一行</li>
    <li>第二行</li>
    <li>第三行</li>
 <li>第四行</li>
 </ul>
 
 <!-- 自定义列表  dl:列表的包头  dt:名词   dd: 列表中每一项的具体描述，是围绕着dt的名词来进行解释、补充 -->
 <dl>
 	<dt>蔬菜</dt>  <!-- 不限定为1个  -->
 	<dd>大白菜</dd>
 	<dd>通心菜</dd>
 	<dd>生菜</dd>
 	<dt>肉</dt>
 	<dd>猪肉</dd>
 	<dd>牛肉</dd>
 </dl>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 链接标签

在网页中我们经常需要跳转到另外一个链接，这个时候我们使用 a 元素

<a>:定义一个超链接
属性: href:指定访问资源的url(统一资源定位符)  必须是http:// 开头   如为空链接则填入 # 号即可
target:指定打开资源的方式  1._self:默认值,在当前页面打开 2._blank:在空白页面打开

<base>:自闭标签,放在head中,定义所有的a标签跳转方式

1
2
3
4
5
6

href：Hypertext Reference 的简称，指定要打开的 URL 地址
target：该属性指定在何处显示链接的资源。
- _self：默认值，在当前窗口打开 URL；
- _blank：在一个新的窗口中打开 URL；
- _parent：在父窗口中打开 URL
- _top：在顶层窗口中打开 URL

# 锚点定位

1.使用相对应的id名标注到要跳转的位置  当前页面跳转到指定内容的位置
<h3 id = "top">test</h3>

2.使用超链接标签 href跳转为#id名
<a href="#top">瞄跳转</a>

 <h3 id="two">
 <a href="#two">:跳转链接 跳转到href指定的id前面必须要有#

1
2
3
4
5
6
7
8

# iframe

利用 iframe 元素可以实现：在一个 HTML 文档中嵌入其他 HTML 文档

<iframe src="https://www.w3school.com.cn" title="W3School 在线教程" frameborder=1></iframe>

frameborder 属性，用于规定是否显示边框，1 为显示，0 为不显示

# 预格式标签

<pre>
   什  么 ,
   连空格和回车都识别?
</pre>

pre标签文字什么样子特殊字符都可以显示出来

1
2
3
4
5
6

# 特殊字符

# 块标签

在 HTML 中有两个特殊的元素 div 元素、span 元素：

div 元素：division，分开、分配的意思；
span 元素：跨域、涵盖的意思；

<div>:每一个div沾满一整行。块级标签
<span>:文本信息在一行展示,行内标签 内联标签

1
2

div 元素和 span 元素都是 “纯粹的” 容器，也可以把他们理解成 “盒子”，它们都是用来包裹内容的；

div 元素：多个 div 元素包裹的内容会在不同的行显示；

一般作为其他元素的父容器，把其他元素包住，代表一个整体
用于把网页分割为多个独立的部分

span 元素：多个 span 元素包裹的内容会在同一行显示；

默认情况下，跟普通文本几乎没差别
用于区分特殊文本和普通文本，比如用来显示一些关键字

# 表格标签

<table>:定义表格  拥有属性  width:宽度  border:边框 cellpadding:定义内容和单元格之间的距离.如果指定为0则单元格的线合为一条   cellspacing:定义单元格之间的距离.如果指定为0则单元格的线合为一   bgcolor:表格背景颜色  align:表格对齐方式(left左对齐,center居中对齐,right右对齐)  valigh:表格内容垂直内容对齐方式(beseline基线对齐,top上对齐,middle居中对齐,bottom下对齐)
<tr>:定义行  拥有属性 bgcolor:表格背景颜色  align:表格单元格内容对齐方式  
<td>:定义单元格  拥有属性 colspan:合并列   rowspan:合并行
<th>:定义表头单元格
<caption> 定义表格标题
<thead> 表示表格的头部分
<tbody> 表示表格体部分
<tfoot> 表示表格尾部

1
2
3
4
5
6
7
8

# 路径

相对路径

同级路径

下级路径 /

上级路径 ../
绝对路径：完整路径

# URL

URL 代表着是统一资源定位符（ Uniform Resource Locator ）

通俗点说：URL 无非就是一个给定的独特资源在 Web 上的地址。

URL 的标准格式如下： [协议类型]😕/ 服务器地址：端口号 / 文件路径文件名？查询 #片段 ID

# URI

URI = Uniform Resource Identifier 统一资源标志符，用于标识 Web 技术使用的逻辑或物理资源。
URL = Uniform Resource Locator 统一资源定位符，俗称网络地址，相当于网络中的门牌号；

URI 在某一个规则下能把一个资源独一无二的识别出来。

URL 作为一个网络 Web 资源的地址，可以唯一将一个资源识别出来，所以 URL 是一个 URI；
所以 URL 是 URI 的一个子集；
但是 URI 并不一定是 URL

locators are also identifiers, so every URL is also a URI, but there are URIs which are not URLs.

# SEO

搜索引擎优化（英语：search engine optimization，缩写为 SEO）是通过了解搜索引擎的运作规则来调整网站，以及提高网站在有关搜索引擎内排名的方式。

编辑

上次更新: 2025/01/01, 10:09:39

HTML5→

HTML

# HTML

# BS 架构

# 基本标签

# 文档声明

# html

# head

# title

# meta

# body

# 文本标签

# h 元素

# p 元素

# 不常用元素

# 图片标签

# 列表标签

# 链接标签

# 锚点 定位

# iframe

# 预格式标签

# 特殊字符

# 块标签

# 表格标签

# 路径

# URL

# URI

# SEO

# 锚点定位