完整的HTML结构
- 文档类型声明
- html元素
- head元素
- body元素
文档声明
HTML最上方的一段文本我们称之为文档类型声明，用于声明文档类型
<!DOCTYPE html>
-
告诉浏览器当前页面是HTML5页面；
-
让浏览器用HTML5的标准去解析识别内容；
-
必须放在HTML文档的最前面，不能省略，省略了会出现兼容性问题；
-
防止浏览器在渲染文档时，切换到怪异模式；
html元素
html元素 表示一个 HTML 文档的根，所以它也被称为根元素。
-
所有其他元素必须是此元素的后代；
-
W3C标准建议为html元素增加一个lang属性，作用是
-
帮助语音合成工具确定要使用的发音;
-
帮助翻译工具确定要使用的翻译规则;
-
常用的规则
<html lang="en"> <!-- 表示这个HTML文档的语言是英文 --> <html lang="zh-CN"> <!-- 表示这个HTML文档的语言是中文（简体） -->
head元素
head元素规定文档相关的**配置信息，包括文档的标题，引用的文档样式和脚本等。
-
网页的标题：title元素
-
meta元素：
<head> <!--设置字符编码为UTF-8； --> <meta charset="UTF-8"> <!-- 兼容IE --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 移动端适配 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>标题</title> <style> </style> </head>
link元素
link元素是外部资源链接元素，规范了文档与外部资源的关系。
属性：
- rel：指定链接类型；
- icon：站点图标；
- stylesheet：CSS样式；
- href：此属性指定被链接资源的URL；
<!-- 引入css -->
<link rel="stylesheet" href="./css/style.css">
<!-- 引入站点的图标-->
<link rel="icon" href="./ima/favicon.ico">
img 元素
将一份图像嵌入文档，img是一个可替换元素（ replaced element ）。
可替换元素不用设置display:inline-block元素也可以设置宽高。参考自👉https://developer.mozilla.org/zh-CN/docs/Web/CSS/Replaced_element
img有两个常见的属性：
-
src熟悉：source（源）的缩写，图片的文件路径，必填项。
-
alt属性：
（1）当图片加载不成功（错误的地址或者图片资源不存在），那么会显示这段文本；
（2 屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义；
设置img的src时，需要给图片设置路径：
- 网络图片：一个URL地址；
- 本地图片：本地电脑上的图片，后续会和html一起部署到服务；
- 绝对路径（几乎不用），从电脑的根目录开始一直找到资源的路径；
- 相对路径（常用）；
- . /代表当前文件夹；
- … /代表上级文件夹
img元素支持的图片格式非常多：
.jpeg .png .gif .ico .svg .apng .avif .bmp 等
a元素
a元素（或称锚元素）定义超链接，用于打开新的URL；
a元素有两个常见的属性：
-
href：Hypertext Reference的简称。
- 指定要打开的URL地址；
- 也可以是一个本地地址；
-
target：该属性指定在何处显示链接的资源。
- _self：默认值，在当前窗口打开URL；
- _blank：在一个新的窗口中打开URL；
还可以用来 当作下载链接🔗 或者邮箱链接
<a href="mailto:xxxxxx@qq.com">发送到邮箱</a>
iframe元素
利用iframe元素可以实现：在一个HTML文档中嵌入其他HTML文档。
frameborder属性用于规定是否显示边框。
（1）：1显示；
（2）：0不显示；
<iframe src="http://www.jd.com" frameborder="0"></iframe>
禁止网页被iframe 引用
在请求响应头中设置同源 X-Frame-Options: sameorigin
扫一扫
843
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
