当前位置：首页 > news >正文

HTML-常见标签、HTML5新特性

news 文章来源：https://blog.csdn.net/weixin_53903929/article/details/132448367 2024/11/19 2:43:15

HTML

软件架构

1.C/S架构

(1) C/S架构即Client/Server（客户机/服务器）结构。

在这里插入图片描述

(2) C/S 架构特点

C/S结构在技术上很成熟，它的主要特点是交互性强、具有安全的存取模式、网络通信量低、响应速度快、利于处理大量数据。但是该结构的程序是针对性开发，变更不够灵活，维护和管理的难度较大。通常只局限于小型局域网，不利于扩展。并且，由于该结构的每台客户机都需要安装相应的客户端程序，分布功能弱且兼容性差，不能实现快速部署安装和配置，因此缺少通用性，具有较大的局限性。

2.B/S 架构

（1）B/S即Browser/Server（浏览器/服务器）结构

在这里插入图片描述

（2）B/S 特点

B/S结构应用程序相对于传统的C/S结构应用程序是一个非常大的进步。 B/S结构的主要特点是分布性强、维护方便、开发简单且共享性强、总体拥有成本低。但数据安全性问题、对服务器要求过高、数据传输速度慢、软件的个性化特点明显降低，这些缺点是有目共睹的，难以实现传统模式下的特殊功能需求。

3.C/S与B/S对比

*对象*	*硬件环境*	*客户端要求*	*软件安装*	*升级维护*	*安全性*
*C/S*	用户群体固定，一般用于小型局域网范围，要求拥有相同的操作系统。	客户端计算机配置要求较高。	每一个客户端都必须安装和配置软件。	每一个客户机都要升级程序。可以采用自动升级。	安全性好
*B/S*	要有操作系统和浏览器，与操作系统平台无关。	客户端计算机配置要求较低。	可以随时随地进行操作而不用安装任何专门的软件，只要有浏览器即可。	客户机不必安装及维护，要需要对服务器进行统一升级维护。	相比C/S架构安全性弱

一般面向相对固定的用户群，程序更加注重流程，可以对权限进行多层次校验，提供更安全的存取模式，对信息安全的控制能力很强，高度机密的信息系统采用C/S结构适宜。
一般对用户群体没有特殊要求，客户端基本做到零维护，只需要通过浏览器就可以随时随地进行业务处理，并且方便功能扩展，开发简单，共享性强，对安全性没有更好的要求时采用B/S结构更合适。

HTML简介

HTML：HyperText Markup Language，超文本标记语言
文本：能够记录文字，标点符号。
超文本：能够记录文字，标点符号，输入内容，图片，视频，音频，超链接……
标记（标签）：将需要的功能封装成对应的标签，要使用哪种功能，就去找到对应的标签即可。

HTML入门

1.HTML用于编写网页，按下F12打开开发者模式

在这里插入图片描述

2.第一个HTML文件

(1) 创建html文件

在桌面上创建两个文件（文件名最好是英文），扩展名是.html或者.htm

在这里插入图片描述

(2) 编写html代码

使用记事本打开其中任意一个文件，写HTML代码

<html><head><title>这是第一个HTML文件</title></head><body>Hello World!</body>
</html>

(3) 打开html文件

使用浏览器打开该文件

在这里插入图片描述

3.HTML的特征

文件扩展名为.html或者.htm
根标签是，里面通常是
HTML的标签全是预定义好的
标签名不区分大小写，推介使用小写
大部分标签是成对出现的，有小部分是自动结束的
HTML标签必须正确嵌套

HTML编辑工具

1.常见的开发工具

HBuilder
WebStrom
DW
VSCode……

2.使用VSCode开发第一个页面

(1) 创建工作空间

先创建一个文件夹当做项目的工作空间, 然后使用VSCode引入文件夹路径

(2) 创建项目目录

在这里插入图片描述

（3）创建HTML文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>来了来了</title>
</head>
<body>他这真的来了
</body>
</html>

(4) 运行HTML文件

在这里插入图片描述

HTML常见标签

1.标题标签

<h1>……<h6>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础标签</title>
</head>
<body><h1>一级标题</h1><h3>三级标题</h3><h6>六级标题</h6>
</body>
</html>

2.分割线标签

<hr>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础标签</title>
</head>
<body><hr color="red">
</body>
</html>

3.文字标签

<font>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础标签</title>
</head>
<body>这是对比<font color="red">文本</font>
</body>
</html>

4.加粗标签

<strong>，<b>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础标签</title>
</head>
<body>床前<strong>明月光</strong>,疑是<b>地上霜</b>
</body>
</html>

5.换行标签

<br>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础标签</title>
</head>
<body>床前<em>明月光</em>,<br>疑是<i>地上霜</i>
</body>
</html>

6.斜体标签

<em>，<i>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础标签</title>
</head>
<body>床前<em>明月光</em>,疑是<i>地上霜</i>
</body>
</html>

7.段落标签

<p>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础标签</title>
</head>
<body>床前<em>明月光</em>,<br>疑是<i>地上霜</i><p>举头望明月</p>
</body>
</html>

8.居中标签

<center>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础标签</title>
</head>
<body><center>真的居中了嘛？</center>
</body>
</html>

9.注释

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础标签</title>
</head>
<body><!--center是居中标签--><center>真的居中了嘛？</center>
</body>
</html>

10.div标签

 <div>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础标签</title>
</head>
<body><div>日照香炉生紫烟</div><div>遥看瀑布挂前川</div>
</body>
</html>

11.span标签

<span>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础标签</title>
</head>
<body><span>日照香炉生紫烟</span><span>遥看瀑布挂前川</span>
</body>
</html>

实体字符

空格：&nbsp;
小于号：&lt;
大于号：&gt;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础标签</title>
</head>
<body><!--center是居中标签--><center>真的&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;居中了嘛？</center>&lt;strong&gt;
</body>
</html>

HTML多媒体标签

1.图片

(1) 语法

<img  src="图片的路径"  width="宽度"  height="高度"  title="标题"  alt="图片加载失败时显示的提示文本"/>

(2) 属性解读

src：图片路径
- 绝对路径：从电脑盘符中找，或者从项目根目录找
- 相对路径：相对于当前文件去找目标文件
- 注意：同级直接找，返回上一级：…/，下一级：/
width：设置图片的宽度，只设置宽度，不设置高度，高度会随着宽度等比变化
height：设置图片高度，只设置高度，不设置宽度，宽度会随着高度等比变化
title：设置图片标题，鼠标放到图片上时才出现
alt：图片加载失败时显示的提示文本

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础标签</title>
</head>
<body><img src="img/gouza.png" width="500" height="100" title="狗砸" alt="网络抛锚了">
</body>
</html>

2.音频

(1)语法

<audio  src="音频路径"  loop  controls  autoplay></audio>

(2) 属性解读

src：音频路径，路径同图片
loop：循环播放
controls：显示播放工具栏
autoplay：自动播放

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础标签</title>
</head>
<body><audio src="../img/你不是真正的快乐.mp3" autoplay controls loop></audio>
</body>
</html>

3.视频

(1) 语法

<video  src="视频路径"  loop  controls  autoplay></video>

(2) 属性解读

src：视频路径，路径同图片
loop：循环播放
controls：显示播放工具栏
autoplay：自动播放

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础标签</title>
</head>
<body><video src="../img/1HTML入门.mp4" autoplay controls loop width="500"></video>
</body>
</html>

HTML超链接标签

1.语法

<a  href="路径"  target="页面打开的位置">要点击的内容</a>

2.target属性

决定页面打开的位置
常用值：_self在本选项卡打开，_blank在新选项卡打开

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础标签</title>
</head>
<body><img src="../img/gouza.png" width="500" height="1000"><a href="http://www.baidu.com">百度一下</a><br><a href="../img/gouza.png">狗砸</a><br><a href="test.html">去其他html</a><br><a href="#">回到顶部</a>
</body>
</html>

HTML列表标签

1.有序列表

(1) 语法

<ol><li>

(2) type属性

改变列表项前面的字符，在
1. 使用type属性，属性值：1（默认值），a，A，i，I

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础标签</title>
</head>
<body><ol type="i"><li>苹果</li><li>香蕉</li><li>橘子</li><li>橘子</li></ol>
</body>
</html>

2.无序列表

（1）语法

<ul><li>

(2) type属性

改变列表项前面的符号，在
- 使用type属性，属性值：disc实心圆（默认值），circle空心圆，square实心方块

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础标签</title>
</head>
<body><ul type="square"><li>苹果</li><li>香蕉</li><li>橘子</li><li>橘子</li></ul>
</body>
</html>

HTML表格标签

1.语法

表格标签：
行标签：，是
的子标签
列标签（单元格）：，是的子标签

<!-- 创建一个3行2列的表格：-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础标签</title>
</head>
<body><table><tr><td></td><td></td></tr><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>
</body>
</html>

2.表格属性

（1）table标签的属性

border：边框，属性值是具体数值
cellspacing：框与框之间的间隙，属性值是具体数值
cellpadding：内容与边框之间的间隙，属性值是具体数值
width：表格宽度，属性值是具体数值
height：表格高度，属性值是具体数值
align：表格的水平位置：align，属性值：left，center，right
bgcolor：表格背景颜色，属性值：颜色的单词，颜色的16进制

（2）属性

height：行的高度，属性值是具体数值
align：行内容水平居中，属性值：left，center，right
bgcolor：行背景颜色，属性值：颜色的单词，颜色的16进制

（3）属性

width：列的宽度，属性值是具体数值，设置宽度以后，该单元格所在的列的宽度会一起变化
align：列内容水平居中：，属性值：left，center，right
bgcolor：列背景颜色，属性值：颜色的单词，颜色的16进制

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础标签</title>
</head>
<body><table border="1" cellspacing="0" cellpadding="0" width="500" height="300" align="center" bgcolor="red"><tr><td>1-1</td><td>1-2</td></tr><tr height="150" align="right" bgcolor="green"><td>2-1</td><td width="450" align="left" bgcolor="pink">2-2</td></tr><tr><td>3-1</td><td>3-2</td></tr></table>
</body>
</html>

3.合并单元格

被合并的单元格要删除掉
合并行：rowspan，属性值是具体数值
合并列：colspan，属性值是具体数值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础标签</title>
</head>
<body><table border="1" cellspacing="0" cellpadding="0" width="500" height="500" align="center"><tr><td colspan="3"></td></tr><tr><td></td><td rowspan="2"></td><td></td></tr><tr><td></td><td></td></tr></table>
</body>
</html>

4.补充标签

：表头
：表内容
：同，内容会自动加粗并水平居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础标签</title>
</head>
<body><table border="1" cellspacing="0" cellpadding="0" width="500" height="300"><thead><tr><th>学号</th><th>姓名</th><th>性别</th></tr></thead><tbody><tr><td>1</td><td>张三</td><td>男</td></tr><tr><td>1</td><td>张三</td><td>男</td></tr><tr><td>1</td><td>张三</td><td>男</td></tr></tbody></table>
</body>
</html>

HTML表单标签

表单：用来收集用户输入的数据并将之发送到指定位置的控件。

1.语法

表单标签：

2.常用属性

action：数据发送的位置
method：发送数据的方式

3.常用的表单域

（1）input />标签

常用属性：type
- 属性值
  - text：文本框
  - password：密码框
  - radio：单选按钮，这一组单选按钮的name属性要一致
  - checkbox：复选框，这一组单选按钮的name属性要一致
  - file：文件框
  - hidden：隐藏框
  - submit：提交按钮，将表单中数据按照method指定的方式发送到action指定的位置
  - reset：重置按钮
  - button：普通按钮
  - image：图片按钮，和submit效果一致
常用属性2：
- checked：设置单选按钮或复选框自动选中，只需要写属性名即可，不需要写属性值
- name：给标签取名字，提交数据时数据的名字，通常在一个表单中不会重复
- value：标签的值
- size：调整输入框的大小
- maxlength：输入内容的最大长度
- readonly：设置输入框只能读不能写，类似于checked的使用
- disabled：禁用，类似于checked的使用

(2) 下拉列表

语法：
```
<select><option></option>
</select>
```
常用属性（)：
- name：给标签取名字，提交数据时数据的名字，通常在一个表单中不会重复
常用属性
- value：标签的值
- selected：设置默认选中的option，类似于checked的使用

(3) 文本域

语法
```
<textarea>
</textarea>
```
常用属性：
- rows：可见行数，一旦超过该数据，就会出现下拉滚动条（高度）
- cols：可见列数，一旦超过该数据，就会自动换行（宽度）

HTML框架标签

1.框架标签

<frameset><<frame>></<frame>>
</frameset>

2.标签

（1）作用

将页面划分成n个模块，每一个模块都能显示指定的内容。注意：不能和同时使用。

（2）常用属性

rows：上下划分
cols：左右划分
noresize：设置不能拖动改变大小，类似checked的使用方式
border：设置边框

3.标签

（1）作用

将指定的HTML文件放入对应的模块并显示出来

（2）常用属性

src：HTML文件的路径
name：设置模块的名字

点击后，要将对应的HTML文件显示到指定模块，需要设定a标签的target属性值是指定模块的name属性的值。

示例代码：

frameset.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<frameset rows="20%,*"  noresize><frame src="head.html"></frame><frameset cols="20%,*"><frame src="left.html"></frame><frame name="right"></frame></frameset>
</frameset>
</html>

left.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><p><a href="day01.html" target="right">第一天</a></p><p><a href="day02.html" target="right">第二天</a></p><p><a href="">第三天</a></p><p><a href="">第四天</a></p>
</body>
</html>

HTML5

1.HTML5新特性

HTML5 是最新的 HTML 标准。
HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。
HTML5 拥有新的语义、图形以及多媒体元素。
HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。
为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 语义标签，多媒体内容，更好的页面结构，更好的形式处理等

2.常见语义标签

（1）header标签

描述了文档的头部区域，于定义内容的介绍展示区域

（2）article标签

定义元素规定独立的自包含内容。

（3）footer标签

述了文档的底部区域，一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><header>网页头部</header><article>网页主体</article><footer>网页底部</footer>
</body>
</html>

harset=“UTF-8”>
Document

第一天

第二天

第三天

第四天

~~~

HTML5

1.HTML5新特性

HTML5 是最新的 HTML 标准。
HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。
HTML5 拥有新的语义、图形以及多媒体元素。
HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。
为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 语义标签，多媒体内容，更好的页面结构，更好的形式处理等

2.常见语义标签

（1）header标签

描述了文档的头部区域，于定义内容的介绍展示区域

（2）article标签

定义元素规定独立的自包含内容。

（3）footer标签

述了文档的底部区域，一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><header>网页头部</header><article>网页主体</article><footer>网页底部</footer>
</body>
</html>

HTML

软件架构

1.C/S架构

(1) C/S架构即Client/Server（客户机/服务器）结构。

(2) C/S 架构特点

2.B/S 架构

（1）B/S即Browser/Server（浏览器/服务器）结构

（2）B/S 特点

3.C/S与B/S对比

HTML简介

HTML入门

1.HTML用于编写网页，按下F12打开开发者模式

2.第一个HTML文件

(1) 创建html文件

(2) 编写html代码

(3) 打开html文件

3.HTML的特征

HTML编辑工具

1.常见的开发工具

2.使用VSCode开发第一个页面

(1) 创建工作空间

(2) 创建项目目录

（3） 创建HTML文件

(4) 运行HTML文件

HTML常见标签

1.标题标签

2.分割线标签

3.文字标签

4.加粗标签

5.换行标签

6.斜体标签

7.段落标签

8.居中标签

9.注释

10.div标签

11.span标签

实体字符

HTML多媒体标签

1.图片

(1) 语法

(2) 属性解读

2.音频

(1)语法

(2) 属性解读

3.视频

(1) 语法

(2) 属性解读

HTML超链接标签

1.语法

2.target属性

HTML列表标签

1.有序列表

(1) 语法

(2) type属性

2.无序列表

（1）语法

(2) type属性

HTML表格标签

1.语法

2.表格属性

（1）table标签的属性

（2）属性

（3）属性

3.合并单元格

4.补充标签

HTML表单标签

1.语法

2.常用属性

3.常用的表单域

（1）input />标签

(2) 下拉列表

(3) 文本域

HTML框架标签

1.框架标签

2.标签

（1）作用

（2）常用属性

3.标签

（1）作用

（2）常用属性

（3）创建HTML文件