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

HTML5-创建HTML文档

news 2026/3/26 8:55:42

HTML5中的一个主要变化是：将元素的语义与元素对其内容呈现结果的影响分开。从原理上讲这合乎情理。HTML元素负责文档内容的结构和含义，内容的呈现则由应用于元素上的CSS样式控制。下面介绍最基础的HTML元素：文档元素和元数据元素。

一、构建基本的文档结构

文档元素只有4个：DOCTYPE元素、html元素、head元素、body元素。

1. DOCTYPE元素

每个HTML文档必须以DOCTYPE元素开头。其告知浏览器两件事情：第一，它处理的是HTML文档；第二，用来标记文档内容的HTML所属的版本。 注意，在HTML4中要求的DTD已不再HTML5中使用！

  • 如果网页代码含有DOCTYPE元素，浏览器就会按你所声明的标准解析；
  • 如果不添加DOCTYPE元素，将使网页进入怪异模式(quirks mode)，两者会有一定的区别！！
<!-- HTML4 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<!-- HTML5 -->
<!DOCTYPE HTML>

复制

2. 其他元素

<!DOCTYPE HTML>
<html><head><title>title</title></head><body>文档内容</body>
</html>

复制

需要注意的时，head元素中必须有一个title元素！

二、用元数据元素说明文档

元数据元素应该放在head元素中。

1. 设置文档标题：title元素

2. 设置相对URL的解析基准

base元素可用来设置一个基准URL，让HTML文档中的相对链接在此基础上进行解析。base元素还能设定链接在用户点击时的打开方式，以及提交表单时浏览器如何反应（在第12章表单中讲述）。

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Base Test</title><!-- 指定相对URL的基准URL --><base href="http://avatar.csdn.net"><!-- 指定链接打开方式为:当前页面 --><base target="_self">
</head>
<body><!-- 图片地址:http://avatar.csdn.net/1/4/A/1_ligang2585116.jpg --><img src="/1/4/A/1_ligang2585116.jpg" alt="奋飞"><a href="http://blog.csdn.net/ligang2585116">李刚的博客</a>
</body>
</html>

复制

注意：如果不指定基准URL，那么浏览器会将当前文档的URL认定为所有相对URL的解析基准。

3. 用元数据说明文档

meta元素可以用来定义文档的各种元数据；每个meta元素只能用于一种用途。 （1）指定名/值元数据对 需要用到其name和content属性。提供了5个预定义的元数据名称。

元数据名称

说明

application name

当前页所属web应用系统的名称

author

当前页的作者名

description

当前页的说明

generator

用来生成HTML的软件名称

keywords

一批以逗号分开的字符串，用来描述页面的内容

说明：告知浏览器如何对内容分类和分等级，过去主要的手段就是使用keywords元数据。现在由于其被滥用来制造页面内容和相关性的假象，从而降低了对其重视性。 （2）meta广泛用途

<!-- 文档内容的字符编码 -->
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html charset=UTF-8">
<!-- 5s后刷新当前页面 -->
<meta http-equiv="refresh" content="5">
<!-- 5s后跳转到MyBlog -->
<meta http-equiv="refresh" content="5; http://blog.csdn.net/ligang2585116">

复制

4. 定义CSS样式

style元素用来定义HTML文档内嵌的CSS样式，link元素用来导入外部样式表中的样式。 （1）指定样式适用的媒体 media属性可用来表明文档在什么情况下应该使用该元素中定义的样式。

设备

说明

all

所有设备（默认）

aural

语音合成器

braille

盲文设备

handheld

手持设备

projection

投影机

print

打印预览和打印页面

screen

计算机显示器屏幕

tty

电传打字机之类的等宽设备

tv

电视机

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Style Test</title><!-- 显示样式 && 小于500px --><style media="screen and (max-width:500px)">div{background-color: blue;color: white;}</style><!-- 显示样式 && 大于500px --><style media="screen and (min-width:500px)">div{background-color: grey;color: white;}</style><!-- 打印样式 --><style media="print">div{background-color: green;font-weight: bold;}</style>
</head>
<body><div>注意我的背影颜色吼!!!</div>
</body>
</html>

复制

需要注意的是，在使用上述media属性时，需要进行全面测试，并且准备好不可用的备用样式。 （2）指定外部资源 link标签同样支持media属性。其中，ref属性决定浏览器对待link元素的方式。

值

说明

author

文档作者

help

当前文档的说明文档

icon

图标资源

license

当前文档的相关许可证

stylesheet

载入外部样式表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Link Test</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
</body>
</html>

复制

注意：如果网站标志文件位于项目根目录下，就无需使用link元素加载，其会自动请求加载该文件。

三、使用脚本元素

与脚本相关的有两个元素：第一个是script，定义脚本并控制其执行过程；第二个是noscript，规定浏览器不支持脚本或禁用脚本情况的处理方法。 在引入外部资源时，如果使用自闭合标签，浏览器会忽略这个元素，不会加载引用的文件。 其加载资源时，可以使用async（script元素默认行为是在加载和执行脚本同时暂停处理页面，该属性可以让资源异步加载）和defer（告知浏览器等页面载入和解析完毕后才能执行脚本）控制。

<!-- 未启用或不支持脚本 -->
<noscript><!-- 5s后跳转到http://blog.csdn.net/ligang2585116 --><meta http-equiv="refresh" content="5; http://blog.csdn.net/ligang2585116">
</noscript>

 

相关文章：

HTML5-创建HTML文档

HTML5中的一个主要变化是&#xff1a;将元素的语义与元素对其内容呈现结果的影响分开。从原理上讲这合乎情理。HTML元素负责文档内容的结构和含义&#xff0c;内容的呈现则由应用于元素上的CSS样式控制。下面介绍最基础的HTML元素&#xff1a;文档元素和元数据元素。 一、构建…...

编程日记 2023/6/11 12:34:53

Vue中Axios的封装和API接口的管理

一、axios的封装 在vue项目中&#xff0c;和后台交互获取数据这块&#xff0c;我们通常使用的是axios库&#xff0c;它是基于promise的http库&#xff0c;可运行在浏览器端和node.js中。他有很多优秀的特性&#xff0c;例如拦截请求和响应、取消请求、转换json、客户端防御XSR…...

编程日记 2023/6/11 12:29:50

MLIR面试题

1、请简要解释MLIR的概念和用途&#xff0c;并说明MLIR在编译器领域中的重要性。 MLIR(Multi-Level Intermediate Representation)是一种多级中间表示语言&#xff0c;提供灵活、可扩展和可优化的编译器基础设施。MLIR的主要目标是为不同的编程语言、领域专用语言(DSL)和编译器…...

编程日记 2023/6/11 12:24:47

***杨辉三角_yyds_LeetCode_python***

1.题目描述&#xff1a; 给定一个非负整数 numRows&#xff0c;生成「杨辉三角」的前 numRows 行。 在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和。 示例 1: 输入: numRows 5 输出: [[1],[1,1],[1,2,1],[1,3,3,1],[1,4,6,4,1]] 示例 2: 输入: numRows …...

编程日记 2023/6/11 12:19:46

Mac使用DBeaver连接达梦数据库

Mac使用DBeaver连接达梦数据库 下载达梦驱动包 达梦数据库 在下载页面随便选择一个系统并下载下来。 下载下来的是zip的压缩包解压出来就是一个ISO文件&#xff0c;然后我们打开ISO文件进入目录&#xff1a;/dameng/source/drivers/jdbc 进入目录后找到这几个驱动包&#x…...

编程日记 2023/6/11 12:14:45

spring.expression 随笔0 概述

0. 我只是个普通码农&#xff0c;不值得挽留 Spring SpEL表达式的使用 常见的应用场景:分布式锁的切面借助SpEL来构建key 比较另类的的应用场景:动态校验 个人感觉可以用作控制程序的走向&#xff0c;除此之外&#xff0c;spring的一些模块的自动配置类&#xff0c;也会在Cond…...

编程日记 2023/6/11 12:09:44

从Cookie到Session: Servlet API中的会话管理详解

文章目录 一. Cookie与Session1. Cookie与Session2. Servlet会话管理操作 二. 登录逻辑的实现 一. Cookie与Session 1. Cookie与Session 首先, 在学习过 HTTP 协议的基础上, 我们需要知道 Cookie 是 HTTP 请求报头中的一个关键字段, 本质上是浏览器在本地存储数据的一种机制,…...

编程日记 2023/6/11 12:04:43

docker数据管理与网络通信

一、管理docker容器中数据 管理Docker 容器中数据主要有两种方式:数据卷(Data Volumes)和数据卷容器( DataVolumes Containers) 。 1、 数据卷 数据卷是一个供容器使用的特殊目录&#xff0c;位于容器中。可将宿主机的目录挂载到数据卷上&#xff0c;对数据卷的修改操作立刻…...

编程日记 2023/6/11 11:59:42

怎么查询电脑的登录记录及密码更改情况？

源头是办公室公用的电脑莫名其妙打不开了&#xff0c;问别人也都不知道密码是多少 因为本来就没设密码啊&#xff01;&#xff08;躺倒&#xff09; 甚至已经想好了如果是50万想攻破电脑&#xff0c;被po抓住要怎么花这笔钱了 是我想太多 当然最后也没解决&#xff0c;莫名…...

编程日记 2023/6/11 11:54:41

《三》TypeScript 中函数的类型

TypeScript 允许指定函数的参数和返回值的类型。 函数声明的类型定义&#xff1a;function 函数名(形参: 形参类型, 形参: 形参类型, ...): 返回值类型 {} function sum(x: number, y: number): number {return x y } sum(1, 2) // 正确 sum(1, 2, 3) // 错误。输入多余的或者…...

编程日记 2023/6/11 11:49:39

深入学习 Mysql 引擎 InnoDB、MyISAM

tip&#xff1a;作为程序员一定学习编程之道&#xff0c;一定要对代码的编写有追求&#xff0c;不能实现就完事了。我们应该让自己写的代码更加优雅&#xff0c;即使这会费时费力。 &#x1f495;&#x1f495; 推荐&#xff1a;体系化学习Java&#xff08;Java面试专题&#…...

编程日记 2023/6/11 11:44:38

【华为OD统一考试B卷 | 100分】阿里巴巴找黄金宝箱(V)（C++ Java JavaScript Python）

题目描述 一贫如洗的樵夫阿里巴巴在去砍柴的路上，无意中发现了强盗集团的藏宝地，藏宝地有编号从0~N的箱子，每个箱子上面贴有一个数字。 阿里巴巴念出一个咒语数字k(k<N)，找出连续k个宝箱数字和的最大值，并输出该最大值。 输入描述 第一行输入一个数字字串，数字之间…...

编程日记 2023/6/11 11:39:37

六步快速搭建个人网站

目录 第一步、选择搭建平台WordPress 第二步、选域名 1&#xff09;域名在哪买&#xff1f; 2&#xff09;域名怎么选&#xff1f; 3&#xff09;以阿里云为例&#xff0c;讲解怎么买域名 第三步、选择服务器 第四步、申请主机、安装WordPress 第五步、选择WordPress模…...

编程日记 2023/6/11 11:34:36

TypeScript 中的 type 关键字有什么用？

创建类型别名 在 TypeScript 中&#xff0c;type 关键字用于创建类型别名&#xff08;Type Alias&#xff09;。类型别名可以给一个类型起一个新的名字&#xff0c;使代码更具可读性和可维护性。 类型别名可以用于定义各种类型&#xff0c;包括基本类型、复合类型和自定义类型…...

编程日记 2023/6/11 11:29:33

27 getcwd 的调试

前言 同样是一个 很常用的 glibc 库函数 不管是 用户业务代码 还是 很多类库的代码, 基本上都会用到 获取当前路径 不过 我们这里是从 具体的实现 来看一下 测试用例 就是简单的使用了一下 getcwd rootubuntu:~/Desktop/linux/HelloWorld# cat Test04Getcwd.c #inc…...

编程日记 2023/6/11 11:24:32

使用IDEA使用Git：Git使用指北——实际操作篇

Git使用指北——实际操作 &#x1f916;:使用IDEA Git插件实际工作流程 &#x1f4a1; 本文从实际使用的角度出发&#xff0c;以IDEA Git插件为基座讲述了如果使用IDEA的Git插件来解决实际开发中的协作开发问题。本文从 远程仓库中拉取项目&#xff0c;在本地分支进行开发&…...

编程日记 2023/6/11 11:19:31

java boot将一组yml配置信息装配在一个对象中

其实将一组yml数据封进一个对象中才是以后的主流开发方式 我们创建一个springboot项目 找到项目中的启动类所在目录 在同目录下创建一个类 名字你们可以随便取 我这里直接叫 dataManager 然后 在yml中定义这样一组数据信息 然后 我们在类中定义三个和这个配置信息相同的字段…...

编程日记 2023/6/11 11:14:30

【裸机开发】链接脚本（.lds文件）的基本语法

目录 一、什么是链接脚本&#xff1f; 二、链接脚本的基本语法格式 1、常用命令 2、内置变量 三、链接脚本的简单案例 一、什么是链接脚本&#xff1f; 一段程序的编译需要经历四个阶段&#xff08;预处理—编译—汇编—链接&#xff09;&#xff0c;而链接脚本管理的就是…...

编程日记 2023/6/11 11:09:29

Java 进阶 -- 集合（三）

4、实现 实现是用于存储集合的数据对象&#xff0c;它实现了接口部分中描述的接口。本课描述了以下类型的实现: 通用实现是最常用的实现&#xff0c;是为日常使用而设计的。它们在标题为“通用实现”的表格中进行了总结。特殊目的实现是为在特殊情况下使用而设计的&#xff0…...

编程日记 2023/6/11 11:04:28

【华为OD机试真题 C语言】5、TLV解析 | 机试真题+思路参考+代码解析

文章目录 一、题目&#x1f383;题目描述&#x1f383;输入输出&#x1f383;样例1 二、思路参考三、代码参考&#x1f3c6;C语言 作者&#xff1a;KJ.JK &#x1f342;个人博客首页&#xff1a; KJ.JK &#x1f342;专栏介绍&#xff1a; 华为OD机试真题汇总&#xff0c;定期…...

编程日记 2023/6/11 10:59:26

【一键养龙虾】阿里云OpenClaw快速部署方案，两步拥有专属龙虾AI助理！

还在羡慕别人拥有能“动手干活”的AI数字员工吗&#xff1f;还在为复杂的本地环境配置、端口映射和依赖冲突而头疼吗&#xff1f;别急&#xff0c;阿里云推出了OpenClaw快速部署方案&#xff0c;官方镜像一键部署&#xff0c;只需两步&#xff0c;轻松拥有专属“龙虾AI”助理&a…...

编程新知 2026/3/26 8:32:33

NaViL-9B开源镜像免配置教程：无需下载权重，5分钟跑通图文问答

NaViL-9B开源镜像免配置教程&#xff1a;无需下载权重&#xff0c;5分钟跑通图文问答 1. 快速了解NaViL-9B NaViL-9B是由专业研究机构开发的原生多模态大语言模型&#xff0c;它不仅能像普通AI那样进行文字对话&#xff0c;还能看懂图片内容。想象一下&#xff0c;你上传一张…...

编程新知 2026/3/26 7:56:26

Step3-VL-10B-Base模型微调：LSTM时间序列预测实战

Step3-VL-10B-Base模型微调&#xff1a;LSTM时间序列预测实战 用最简单的方式&#xff0c;教你如何用Step3-VL-10B-Base模型做时间序列预测&#xff0c;无需深厚数学背景&#xff0c;跟着做就能上手 1. 前言&#xff1a;为什么选择这个模型做时间序列预测 时间序列预测是个很有…...

编程新知 2026/3/26 7:02:04

s2-pro多场景落地：法律文书语音宣读+重点条款强调音效添加

s2-pro多场景落地&#xff1a;法律文书语音宣读重点条款强调音效添加 1. 场景需求分析 在法律服务领域&#xff0c;文书宣读是一项高频且重要的需求。传统方式存在几个痛点&#xff1a; 人工宣读成本高&#xff1a;需要专业播音员录制&#xff0c;耗时耗力修改不便&#xff…...

编程新知 2026/3/26 6:21:35

别再乱调Filter Mode了！深度解析Unity纹理的Point、Bilinear和Trilinear到底怎么选

纹理过滤模式实战指南&#xff1a;如何为Unity项目选择最佳视觉方案 当你在Unity编辑器中导入一张纹理时&#xff0c;Filter Mode这个下拉菜单可能经常被忽视——毕竟默认的Bilinear看起来"能用"。但当你真正对比过Point、Bilinear和Trilinear三种模式在游戏中的实际…...

编程新知 2026/3/26 3:33:18

ChatTTS在线测试实战：从模型部署到性能调优全解析

最近在折腾一个在线语音合成的测试服务&#xff0c;用到了 ChatTTS 这个模型。想把模型部署上线&#xff0c;提供个 Web 服务给大家测试用&#xff0c;听起来简单&#xff0c;但真做起来&#xff0c;发现坑还真不少。今天就把我这一路从部署、调优到填坑的实战经验整理一下&…...

编程新知 2026/3/26 2:04:59

企业级微信自动化框架：WeChatFerry的技术实现与商业价值分析

企业级微信自动化框架&#xff1a;WeChatFerry的技术实现与商业价值分析 【免费下载链接】WeChatFerry 微信逆向&#xff0c;微信机器人&#xff0c;可接入 ChatGPT、ChatGLM、讯飞星火、Tigerbot等大模型。Hook WeChat. 项目地址: https://gitcode.com/GitHub_Trending/we/W…...

编程新知 2026/3/26 0:50:39

小型团队离线部署大模型指南：别先追参数，先把“能长期跑”的系统搭起来

小型团队离线部署大模型指南&#xff1a;别先追参数&#xff0c;先把“能长期跑”的系统搭起来 在很多人的想象里&#xff0c;离线部署大模型是一件很“硬核”的事&#xff1a;上几张高端 GPU&#xff0c;把一个足够大的模型拉起来&#xff0c;再配个网页聊天界面&#xff0c;似…...

编程新知 2026/3/26 0:02:17

ArcMap属性表连接保姆级教程：从Excel到SHP，5分钟搞定数据挂接

ArcMap属性表连接实战指南&#xff1a;Excel与SHP高效挂接技巧 在地理信息系统&#xff08;GIS&#xff09;工作中&#xff0c;将外部数据与空间要素关联是常见需求。本文将手把手教你如何将Excel表格数据完美挂接到SHP矢量图层&#xff0c;解决实际工作中90%的连接问题。 1. 数…...

编程新知 2026/3/25 21:58:48

foobox-cn深度解析：foobar2000高级定制实战指南

foobox-cn深度解析&#xff1a;foobar2000高级定制实战指南 【免费下载链接】foobox-cn DUI 配置 for foobar2000 项目地址: https://gitcode.com/GitHub_Trending/fo/foobox-cn foobar2000作为专业音乐播放器&#xff0c;其默认界面往往难以满足高级用户的个性化需求。…...

编程新知 2026/3/25 21:34:38