HTML笔记记录

#

# HTML概念

HTML(Hyper Text Markup Language/超文本标记语言)是一种用于创建网页的标记语言

# 什么是超文本标记语言

由无数个标记（标签、tag）组成
是对某些内容进行特殊的标记，以提供其他解释器识别处理
比如<h1><h2> 标记的文本会被识别为"标题"并进行加粗放大显示
由标签和内容组成的部分称为元素(element)

# HTML文件的扩展名

.htm/.html
现在统一使用.html

# 完整的HTML结构包含的内容

文档声明
html元素
- head元素
- body元素

# `HTML`文档类型声明

HTML最上方的文本称之为文档类型声明，用于声明文档类型

<!DOCTYPE html>

HTML文档声明告诉浏览器当前是HTML5页面
让浏览器以HTML5的标准解析识别文档内容
必须放在HTML文档的最前面，不能省略，否则会有兼容性问题

# HTML5的文档声明对比旧版本的文档声明

# `HTML`元素

<html>元素表示整个文档的根元素（顶级元素）其它元素都是该元素的后代

# W3C标准建议为html元素添加一个`lang`属性

属性的作用

帮助语音合成工具确定使用的发音
帮助翻译工具确定要使用的翻译规则

# lang属性常用的设置规则

lang='en' 表示文档文档语言使用的是引文
lang='zh-CN' 表示文档使用的是简体中文

# head元素

html中 head元素规定了文档的相关的配置信息,也称之为元数据,包括文档的标题,文档的引用样式和脚本等

元数据: 描述数据的数据
可以理解为整个页面的配置

# `title`标签

title表示的是网页的标题 <title>网页标题</title>

# meta标签

设置网页的字符编码,让浏览器精准的显示每一个文字,不设置或者设置错误会导致乱码
一般使用 utf-8 编码, 涵盖世界上几乎所有的文字

# body元素

body元素中的内容是具体呈现在网页中的内容,是网页具体内容和解构

# img元素

img元素是一个可替换元素

img有两个常见的属性

src 表示源, 是必须的,包含了嵌入的图片的文件路径
alt 属性,非强制属性,有两个作用
当图片不加载成功会显示该文本内容
屏幕阅读器会将这些描述读给需要使用阅读器的使用者听,方便了解图像的含义

# a标签

a元素又称之为锚(anchor)元素,其作用是打开一个新的URL地址,也可以将链接指向文本地址,下载指定文件
也可以指向当前页面元素的id属性值,实现在当前页面的锚点链接跳转

target属性该属性指定在何处显示链接的资源

_self 默认值,默认在当前窗口打开URL
_blank 在一个新的窗口打开URL
其它不常用

# 锚点链接

作用: 跳转到网页中具体的位置
步骤:

跳转的目标元素设置id属性
a 标签的href属性指向对应的id

<a href='#theme1'>书签一</a>

<h1 id='theme1'>标签内容</h1>

1
2
3

# url指向其他地址

指向链接: ZIP文件地址

<a href='http://www.github.com/master.zip'>下载ZIP文件</a>

指向其他协议地址

<a href="mailto:123@22.com">发送邮件</a>

# iframe标签

<iframe src="www.baidu.com"></iframe>

利用iframe元素可以实现在一个HTML文档中嵌入其它的HTML文档

frameborder属性用于规定是否显示边框,只有两个取值

1: 显示
0: 不显示

a元素中target属性的其他值

_parent: 在父窗口中打开URL
_top: 在顶层窗口中打开URL

# div元素和span元素

div: division 分开, 分配
span: 跨域, 涵盖
div和span都是纯粹的容器，都属于盒子用来包裹内容

# div元素

多个div元素包裹的内容在不同的行显示
一般是作为其他元素的父容器，把其他元素包裹住，代表一个整体
用于把网页分割为多个独立部分

# span元素

多个span元素包裹的内容会在同一行显示
默认情况下和普通文本没有差别
用于区分特殊文本和普通文本，比如用来显示一些关键字

# 不常用的元素

# strong

通常加粗会使用css样式实现

# i元素

内容斜体
通常用来绘制字体图标

# code元素

显示等宽字体

# HTML全局属性

所用HTML都可以设置和拥有的属性称之为全局属性

常见的全局属性

id
class
style
title

#HTML

上次更新: 2022/07/04, 08:35:01

← 浏览器概念 HTML文档中的部分元素说明→