前端（一）—— HTML

最新推荐文章于 2024-08-01 11:39:49 发布

GDYuLuo

最新推荐文章于 2024-08-01 11:39:49 发布

阅读量1.1k

点赞数 24

分类专栏：知识分享文章标签：前端 html

本文链接：https://blog.csdn.net/GDYuLuo/article/details/135033061

版权

知识分享专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1. Web服务本质

浏览器发请求 → HTTP协议 → 服务端接收请求 → 服务端返回响应 → 服务端把HTML文件内容发给浏览器 → 浏览器渲染页面

2. 关于HTML

2.1 HTML是什么

超文本标记语言（Hypertext Markup Language，HTML）是一种用于创建网页的标记语言
本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释（兼容性问题）
网页文件的扩展名：.html或.htm

2.2 HTML不是什么

HTML是一种标记语言（markup language），它不是一种编程语言
HTML使用标签来描述网页。不像Python编程语言一样，这个标记语言是没有逻辑的

3. HTML介绍

3.1 HTML文档结构

<!DOCTYPE html>
<html lang="zh-CN">

<head> 
  <meta charset="UTF-8">
  <title> </title>
</head>

<body> 
</body>

</html>

标注：
① <!DOCTYPE html>：声明为HTML5文档；
② lang='zh-CN'：表示整个文档的内容以中文为主，如果以英文为主则写成lang='en'；
③ <html></html>：表示文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）；
④ <head></head>：定义了HTML文档的开头部分，它们之间的内容不会在浏览器的文档窗口显示，包含了文档的元数据（meta），配置信息等；
⑤ <title></title>：定义了网页标题，在浏览器标题栏显示（标签页）；
⑥ <body></body>：这里面的文本是可见的网页主体内容

注意：
① 标签要封闭，全封闭/自封闭；
② HTML文件不识别多个空格或换行，均识别成一个空格，此时需借助特殊字符

注意：对于中文网页需要使用 <meta charset="UTF-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="GBK">

3.2 HTML的注释

找到一行内容，按住键盘“ctrl 加 / ” 就能注释，注释的内容不会在网页上显示出来

3.3 HTML标签格式

3.3.1 标签说明

HTML标签是由尖括号包围的关键字，如<html>、<div>等
HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线
也有一部分标签是单独呈现的，比如：<br/>、<hr/>、<img src="1.jpg" />等
标签里面可以有若干属性，也可以不带属性

3.3.2 标签语法

<标签名属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名属性1=“属性值1” 属性2=“属性值2”…… />

有些属性是没有特殊的效果的，而有些属性是有效果的，如下：

<p><a s='name'><h3>这是名字</h3></a></p>，其中s='name'是没什么效果的，不可点击
<p><a href="https://Baidu.com"><h3>这是链接</h3></a></p>，你会看到一些效果，可以点击，有下划线，有颜色

3.3.3 重要属性

① id：定义标签的唯一ID，HTML文档树中唯一，将来页面上的标签有很多，例如：来几个a标签，然后怎么区分这些标签呢，可以通过<a id='a1'>这是id为a1的标签</a>，id不能重复，将来我们想找这个标签的时候，可以通过这个id的值来找到这个标签
② class：为HTML元素定义一个或多个类名（classname）(CSS样式类名)
③ style：规定元素的行内样式（CSS样式）简单来个示例：<h3 style="color:red;">它会变红</h3>你会发现变成红色了，如下图：

4. HTML常用标签

4.1 head内常用标签

标签	意义
<title></title>	定义网页标题
<style></style>	定义内部样式表
<script></script>	定义JS代码或引入外部JS文件
<link/>	引入外部样式表文件
<meta/>	定义网页原信息

4.2 Meta标签

<meta>元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词
<meta>标签位于文档的头部，不包含任何内容
<meta>提供的信息是用户不可见的

meta标签的组成：meta标签共有两个属性，它们分别是 http-equiv 属性和 name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能

4.2.1 http-equiv属性

相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值

<!-- 2秒后跳转到对应的网址，注意引号 -->
# 如果把URL和后面的内容去掉，就是2秒钟刷新一次
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com"> 

<!-- 指定文档的编码类型 --> 
<meta http-equiv="content-Type" charset=UTF8">

<!-- 告诉IE以最高级模式渲染文档 -->
# 告诉IE浏览器，按照最高标准来渲染此页面
<meta http-equiv="x-ua-compatible" content="IE=edge">

4.2.2 name属性

主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的

# 关键字，别人可以通过这些关键字搜索到我的这个文章的
# 搜索引擎能够通过content内容来帮别人搜索到此文档
<meta name="keywords" content="meta总结, html meta, meta属性, meta跳转"> 

# 是对这个文档的描述
<meta name="description" content="这里是文档的一些描述内容">

PS：「浏览器内核」也就是浏览器所采用的「渲染引擎」，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。渲染引擎是兼容性问题出现的根本原因

常见的浏览器及内核如下：

浏览器	内核
IE	trident
Chrome	blink
火狐	gecko
Safar	webkit

4.3 bod内常用标签

4.3.1 基本标签（块级标签和内联标签）

# 不加标签的纯文字也是可以在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>

特殊字符（还有好多其他的，可以直接百度搜HTML特殊符号对照表）

内容	对应代码
空格
>	>
<	<
&	&
¥	¥
版权标识（写公司网站的时候会用到）	©
注册商标（一个圆圈里面有个R）	®

特别注意：HTML中默认是不显示空格的，也就是说通过空格键加了空格也没有多个空格的效果，加多少个都是显示一个空格效果，需要这些特殊字符才能显示出空格效果

4.3.2 div标签和span标签（常用）

div标签：用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现
span标签：用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现

块级元素与行内元素的区别：

块级元素（块级标签/行外标签），是以另起一行开始渲染的元素
行内元素（内联标签）则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的

刚学的标签：

块级标签：p、h1 - h6、hr、div
内联标签：b、i、u、s

注意：
① 关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。div是可以包含div的
② p标签比较特殊，不能包含块级标签，p标签也不能包含p标签。可以试一下p标签套p标签，f12你会发现三个p标签

4.3.3 img标签（内联标签）

<img src="图片的路径" alt="图片未加载成功时的提示" 
title="鼠标悬浮时提示信息" width="宽" height="高">

注意：
① src的路径分为两种：网上的一个图片路径和本地的一个相对图片路径
② alt后的提示内容，在图片未显示前会提示，图片显示出来后则不提示
③ title后的提示内容，当鼠标悬浮在图片上，会显示提示
④ 宽高两个属性只用一个会自动等比缩放

4.3.4 a标签（内联标签）

超链接标签：是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序

<a href="http://www.baidu.com" target="_blank" >点我就可以跳转到百度啦</a>

target：

_blank：表示在新标签页中打开目标网页
_self：表示在当前标签页中打开目标网页（默认效果）

注意：
① 没有写href属性，只显示普通文本

② 写了href属性但没有值，有特殊效果（文字有颜色、有下划线），点击会刷新当前页面

拓展：

① 什么是URL

URL是统一资源定位器（Uniform Resource Locator）的缩写，也被称为网页地址，是因特网上标准的资源的地址

② URL举例

http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html

③ URL地址由4部分组成，各部分之间用“/”符号隔开

第1部分：为协议，http://、ftp://等
第2部分：为站点地址，可以是域名或IP地址
第3部分：为页面在站点中的目录，stu
第4部分：为页面名称，例如 index.html

href属性指定目标网页地址，该地址可以有几种类型：
① 绝对URL - 指向另一个站点（比如 href="http://www.baidu.com）
② 相对URL - 指当前站点中确切的路径（href="index.htm"），学django的时候会用的比较多
③ 锚URL - 指向页面中的锚（href="#top"），博客的目录经常用到，还可以跳转到 name属性为p1的a标签上，<a name='top'>xxx</a>

例1：如下代码体现了URL跳转的作用

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="#p1" >点我就可以跳转到id为p1的p标签啦</a>

<div style="height:1000px"></div>
<p id="p1">哈哈，我就是id为p1的p标签</p>
<div style="height:1000px"></div>
</body>
</html>

我们一运行，会出现以下界面，当我们再次点击这个超链接时

就会直接跳转到目标的URL，如下图

例2：如下代码体现了锚点跳转的作用

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{height: 1000px;width: 200px;background-color: black;}
    </style>
</head>
<body>
<!-- 设置锚点 -->
<a name="top">这是顶部</a>
<div class="c1"></div>
<!-- 跳转锚点,写的是a标签name属性对应的值,写法 href='#值' -->
<a href="#top">回到顶部</a>
</body>
</html>

注：在设置锚点时，可写name=''值''，或者写成id=''值''都可以

4.3.5 列表标签

4.3.5.1 无序列表

<ul type="disc">
  <li>第一项</li>
  <li>第二项</li>
</ul>

type属性：

（1）disc（实心圆点，默认值）

（2）circle（空心圆圈）

（3）square（实心方块）

（4）none（无样式）

4.3.5.2 有序列表

<ol type="1" start="1">
  <li>第一项</li>
  <li>第二项</li>
</ol>

type属性：

（1）1 数字列表，start是从数字几开始（默认值）

（2）A 大写字母

（3）a 小写字母

（4）Ⅰ 大写罗马

（5）ⅰ 小写罗马

4.3.5.3 标题列表

就像大纲一样，有一个层级效果，代码及效果如下

<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

4.3.6 表格标签

表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据

表格的基本结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border='1'>
  <thead>
  <tr>
    <th>序号</th>
    <th>姓名</th>
    <th>特点</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>雨落</td>
    <td>贼帅</td>
  </tr>
  <tr>
    <td>2</td>
    <td>庆言</td>
    <td>美女</td>
  </tr>
  </tbody>
</table>
</body>
</html>

其中：

<thead>：表示的是标题部分 </thead>
<tbody>：表示的是内容部分 </tbody>
<tr>：表示的是一行 </tr>
<th>：表示的是一个单元格，文字是加粗效果 <th>
<td>：表示的是一个单元格，文字是常规字体 <td>

注释-常用属性：

border：表格边框
cellpadding：内边距（内边框和内容的距离）
cellspacing：外边距（内外边框的距离）
width：像素百分比（最好通过css来设置长宽）
rowspan：单元格竖跨多少行（即合并单元格）
colspan：单元格横跨多少列（即合并单元格）

上面这几个属性基本上用不到，其实标签又可以分为两类：
1、展示给用户看的
2、获取用户输入内容的标签
刚才前面的这些标签都是展示内容用的，下面要学的标签是捕获用户输入的标签。基本上HTML中常用的就这些标签

4.3.7 input标签

<input> 元素会根据不同的 type 属性，变化为多种形态

type属性值	表现形式	对应代码
text	单行输入文本	<input type="text" />
password	密码输入框（不显示明文）	<input type="password" />
date	日期输入框	<input type="date" />
checkbox	复选框	<input type="checkbox" checked="checked" name='x' />
radio	单选框	<input type="radio" name='x' />
submit	提交按钮	<input type="submit" value="提交" />
reset	重置按钮	<input type="reset" value="重置" />
button	普通按钮	<input type="button" value="普通按钮" />
hidden	隐藏输入框	<input type="hidden" />
file	文本选择框	<input type="file" />

属性说明：
① name：表单提交时的“键”，注意和id的区别
② value：表单提交时对应项的值

type="button", "reset", "submit"时，为按钮上显示的文本内容
type="text","password","hidden"时，为输入框的初始值
type="checkbox", "radio", "file"，为输入相关联的值

③ checked：radio和checkbox默认被选中的项
④ readonly：text和password设置只读
⑤ disabled：将当前标签作废，对于所有input均适用

1、输入框与单多选

2、日期输入框

3、提交与重置按钮

submit：发送浏览器上输入标签中的内容，配合form表单使用，页面会刷新
reset：页面不会刷新，将所有输入的内容清空

4、文本选择框

5、设置为只读

4.3.8 form标签

功能：

① 表单用于向服务器传输数据，从而实现用户与Web服务器的交互
② 表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等
③ 表单还可以包含textarea、select、fieldset和 label标签

表单元素

基本概念：HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。表单一般用来收集用户的输入信息

表单工作原理：访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上，服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息

表单属性

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）
action	规定向何处提交表单的地址（URL）（提交页面）
autocomplete	规定浏览器应该自动完成表单（默认：开启）
enctype	规定被提交数据的编码（默认：url-encoded）
method	规定在提交表单时所用的 HTTP 方法（默认：GET）
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）
novalidate	规定浏览器不验证表单
target	规定 action 属性中地址的目标（默认：_self）