当先锋百科网

首页 1 2 3 4 5 6 7

HTML-常见标签、HTML5新特性 Document

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.标题标签

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

2.分割线标签

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

3.文字标签

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

4.加粗标签

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

5.换行标签

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

6.斜体标签

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

7.段落标签

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

8.居中标签

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

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

11.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) 语法

(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)语法

(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) 语法

(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.语法

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) 语法

(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）语法

(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.语法