HTML-常见标签、HTML5新特性

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 />标签

  1. 常用属性：type

    • 属性值

      • text：文本框

      • password：密码框

      • radio：单选按钮，这一组单选按钮的name属性要一致

      • checkbox：复选框，这一组单选按钮的name属性要一致

      • file：文件框

      • hidden：隐藏框

      • submit：提交按钮，将表单中数据按照method指定的方式发送到action指定的位置

      • reset：重置按钮

      • button：普通按钮

      • image：图片按钮，和submit效果一致

  2. 常用属性2：

    • checked：设置单选按钮或复选框自动选中，只需要写属性名即可，不需要写属性值

    • name：给标签取名字，提交数据时数据的名字，通常在一个表单中不会重复

    • value：标签的值

    • size：调整输入框的大小

    • maxlength：输入内容的最大长度

    • readonly：设置输入框只能读不能写，类似于checked的使用

    • disabled：禁用，类似于checked的使用

(2) 下拉列表

  1. 语法：

    <select><option></option>
</select>

  2. 常用属性 （)：

    • name：给标签取名字，提交数据时数据的名字，通常在一个表单中不会重复
  3. 常用属性
    • value：标签的值
    • selected：设置默认选中的option，类似于checked的使用

(3) 文本域

  1. 语法

    <textarea>
</textarea>

  2. 常用属性：

    • 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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/87294.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【javaweb】学习日记Day7 - Mysql 数据库 DQL 多表设计

【javaweb】学习日记Day7 - Mysql 数据库 DQL 多表设计

之前学习过的SQL语句笔记总结戳这里→【数据库原理与应用 - 第六章】T-SQL 在SQL Server的使用_Roye_ack的博客-CSDN博客 目录 一、DQL 数据查询 1、基本查询 2、条件查询 3、分组查询 &#xff08;1&#xff09;聚合函数 ① count函数 ② max min avg sum函数 &…
阅读更多...
浅谈 Linux 下 vim 的使用

浅谈 Linux 下 vim 的使用

Vim 是从 vi 发展出来的一个文本编辑器&#xff0c;其代码补全、编译及错误跳转等方便编程的功能特别丰富&#xff0c;在程序员中被广泛使用。 Vi 是老式的字处理器&#xff0c;功能虽然已经很齐全了&#xff0c;但还有可以进步的地方。Vim 可以说是程序开发者的一项很好用的工…
阅读更多...
Go测试之.golden 文件

Go测试之.golden 文件

Go测试中的.golden 文件是干什么用的&#xff1f;请举例说明 在Go语言中&#xff0c;.golden文件通常用于测试中的黄金文件&#xff08;golden files&#xff09;。黄金文件是在测试期间记录预期输出结果的文件。测试用例运行时&#xff0c;黄金文件用于比较实际输出与预期输出…
阅读更多...
计算机毕设 基于机器视觉的二维码识别检测 - opencv 二维码 识别检测 机器视觉

计算机毕设 基于机器视觉的二维码识别检测 - opencv 二维码 识别检测 机器视觉

文章目录 0 简介1 二维码检测2 算法实现流程3 特征提取4 特征分类5 后处理6 代码实现5 最后 0 简介 今天学长向大家介绍一个机器视觉的毕设项目&#xff0c;二维码 / 条形码检测与识别 基于机器学习的二维码识别检测 - opencv 二维码 识别检测 机器视觉 1 二维码检测 物体检…
阅读更多...
Netty核心源码解析(三)--NioEventLoop

Netty核心源码解析(三)--NioEventLoop

NioEventLoop介绍 NioEventLoop继承SingleThreadEventLoop,核心是一个单例线程池,可以理解为单线程,这也是Netty解决线程并发问题的最根本思路--同一个channel连接上的IO事件只由一个线程来处理,NioEventLoop中的单例线程池轮询事件队列,有新的IO事件或者用户提交的task时便执…
阅读更多...
在kaggle中用GPU使用CGAN生成指定mnist手写数字

在kaggle中用GPU使用CGAN生成指定mnist手写数字

文章目录 1项目介绍2参考文章3代码的实现过程及对代码的详细解析独热编码定义生成器定义判别器打印我们的引导信息模型训练迭代过程中生成的图片损失函数的变化 4总结5 模型相关的文件 1项目介绍 在GAN的基础上进行有条件的引导生成图片cgan 2参考文章 GAN实战之Pytorch 使用…
阅读更多...
基于mysql5.7制作自定义的docker镜像，适用于xxl-job依赖的数据库，自动执行初始化脚本（ddl语句和dml语句）

基于mysql5.7制作自定义的docker镜像，适用于xxl-job依赖的数据库，自动执行初始化脚本（ddl语句和dml语句）

一、背景 xxl-job-admin依赖mysql数据库&#xff0c;且需执行初始化脚本&#xff0c;包括ddl和dml语句。 具体的步骤总结如下&#xff1a; 1、新建数据库xxl_job2、创建mysql表table3、执行dml语句&#xff0c;包括新建admin用户及密码&#xff0c;创建执行器和任务。 毫无疑…
阅读更多...
Android App的设计规范

Android App的设计规范

Android App 设计规范是为开发者和设计师提供的一系列准则和建议&#xff0c;以确保应用在 Android 设备上的外观、交互和用户体验保持一致。以下是一些常见的 Android App 设计规范要点&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开…
阅读更多...
基于SSM+vue框架的个人博客网站源码和论文

基于SSM+vue框架的个人博客网站源码和论文

基于SSMvue框架的个人博客网站源码和论文061 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm &#xff08;设计&#xff09;研究背景与意义 关于博客的未来&#xff1a;在创办了博客中国(blogchina)、被誉为“…
阅读更多...
Python爬虫实战案例——第三例

Python爬虫实战案例——第三例

文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff01;严禁将文中内容用于任何商业与非法用途&#xff0c;由此产生的一切后果与作者无关。若有侵权&#xff0c;请联系删除。 起点中文网月票榜加密字体处理 字体加密的原理&#xff1a;就是将一种特定的…
阅读更多...
通俗理解DDPM到Stable Diffusion原理

通俗理解DDPM到Stable Diffusion原理

代码1&#xff1a;stabel diffusion 代码库代码2&#xff1a;diffusers 代码库论文&#xff1a;High-Resolution Image Synthesis with Latent Diffusion Models模型权重&#xff1a;runwayml/stable-diffusion-v1-5 文章目录 1. DDPM的通俗理解1.1 DDPM的目的1.2 扩散过程1.3 …
阅读更多...
PHPEXCEL 导出excel

PHPEXCEL 导出excel

$styleArray [alignment > [horizontal > Alignment::HORIZONTAL_CENTER,vertical > Alignment::VERTICAL_CENTER],];$border_style [borders > [allborders > [style > \PHPExcel_Style_Border::BORDER_THIN ,//细边框]]];$begin_date $request->beg…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023