001-初识HTML

一.HTML概述

互联网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用一种标签语言书写的,这种语言称为HTML(Hyper Text Markup Language)

HTML是一种标签语言,而不是一种编程语言,主要用于描述超文本中的内容和结构

HTML是一种标签语言,需要经过浏览器的解释和编译,虽然本身不能显示在浏览器中,但是其标记的内容可以正确地在浏览器中显示出来

HTML最基本的语法是<标签符></标签符>,

html 复制代码
<html>
...
</html>

标签符通常都是成对使用的,有一个开头标签和一个结束标签。结束标签只是在开头标签加了斜杠/

二.HTML5的文档结构

HTML5最基本的结构主要包括文档类型说明、文档开始标签、元信息、主体标签和页面注释标签

1.文档类型说明

在HTML5之前的版本中,创建HTML文本时,文档的头部的类型说明即麻烦又难记。

HTML5对文档类型说明进行了优化,代码如下:

html 复制代码
<!DOCTYPE html>

2.HTML标签

HTML标签以<html>开头,以<\html>结尾,文档的所有内容书写在这对标签之中

语法格式如下:

html 复制代码
<html>
...
</html>

3.头标签

头标签<head>用于说明文档头部的相关信息,一般包括标题信息、元信息、定义CSS样式和脚本代码等

注意:<head>元素的作用范围是整篇文档,定义在HTML文档头部的内容往往不会在网页上直接显示

语法格式如下:

html 复制代码
<head>
...
</head>

1.标题标签<title>

HTML的标题标签一般用来说明页面的用途,显示在浏览器的标题栏中。

语法格式如下:

html 复制代码
<title>
...
</title>

2.元信息标签<meta>

<meta>标签可以提供有关页面的元信息(meta-information)

比如针对搜索引擎和更新频度的描述和关键词

<meta>标签位于文档的头部,不包含任何内容,它的属性定义了与文档相关联的名称/值

它提供的属性和取值如下:

|------------|------------------------------------------------------|----------------------------|
| 属性 | 值 | 描述 |
| charset | character encoding | 定义文档的字符 |
| http-equiv | content-type expires refresh set-cookie | 把content属性关联到HTTP头部 |
| content | some_text | 定义与http-equiv或name属性相关的元信息 |
| name | author description keywords generator revised Others | 把content属性关联到一个名称 |

4.网页的主体标签<body>

网页要显示的内容都放在网页的主体标签中,是HTML文件的重点所在

<body>标签不仅仅是一个形式上的存在,它本身也可以控制网页的背景颜色或背景图像,在后面会进行学习

语法格式如下:

html 复制代码
<body>
...
</body>

5.页面注释标签<!-- -->

注释是在HTML代码中插入的描述性文本,用来解释该代码或提升其他信息。

注释只出现在代码中,浏览器对注释代码不进行解释,并且不在浏览器的页面中进行显示

语法格式:

html 复制代码
<!--注释的内容-->

三.HTML5的语法新变化

为了兼容(compatible)各个不统一的页面代码,HTML5的设计在语法方面做了一下变化

1.标签不在区分大小写

如<body> ... </BODY>,符合HTML5的规范

2.允许属性值不使用引号

如:<input checked="a" type="checkbox">

而<input checked=a type=checkbox>与上面的代码片段效果是一样的,但是仍然建议加上引号,因为如果某个属性的值中包含空格等容易引起混淆的属性值,可能会导致浏览器的误解

3.允许省略部分属性的属性值

相关推荐
float_六七10 小时前
行级与块级元素:核心区别与应用场景
开发语言·前端·javascript
毕设十刻11 小时前
基于Vue的家教预约系统7fisz(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
前端无涯11 小时前
深度解析:fetch 与 Promise 结合实战及面试重点
前端·javascript
风舞红枫11 小时前
node代理vue打包后的文件,实现本地测试
前端·javascript·vue.js·node.js
helloCat11 小时前
记录CI/CD自动化上传AppGallery遇到的坑
android·前端·api
Yanni4Night11 小时前
使用URLPattern API构建自己的路由器 🛣️
前端·javascript
web守墓人11 小时前
【前端】garn:使用go实现一款类似yarn的依赖管理器
前端
全栈陈序员11 小时前
Vue 实例挂载的过程是怎样的?
前端·javascript·vue.js·学习·前端框架
Bruce_Liuxiaowei12 小时前
一键清理Chrome浏览器缓存:批处理与PowerShell双脚本实现
前端·chrome·缓存
怒放的生命199112 小时前
Vue 2 vs Vue 3对比 编译原理不同深度解析
前端·javascript·vue.js