基本结构
基本骨架
HTML文件最基本的四个标签，组成了网页的基本骨架，包括：<html>、<head>、<title>、<body>四组标签。
- <head>
- 作用： 用于存放<title>,<meta>,<base>,<style>,<script>,<link>。内部用于对网页的设置，除了<title>内内部的文字，其他的标签都不显示在浏览器上。
- 注意在<head>标签中我们必须要设置的标签是title
- <title>
- 作用1：让页面拥有一个属于自己的标题
- 作用2：title中的关键字可以作为搜索引擎抓取时的关键字，提高SEO搜索引擎优化
- 作用3：内部的内容会显示在搜索结果的标题部分
- 作用4: 作为浏览器收藏夹默认的网页标题
- 建议网页必须添加title标签内部内容，内容尽量精简，提取网页的关键字
- <body>
- 作用：定义网页的主体部分，用于存放所以的HTML显示内容的标签<p>、<h1>、<a>、<div>等
- <body>内部的元素内容会显示在浏览器的窗口中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
DTD
- 完整的HTML文件的第一行内容叫做文档定义类型，英文DocType Definition,简称DTD。也称作文档声明类型，Doctype Declaration
- 作用：告知浏览器该网页使用的是哪个版本的HTML规范，让浏览器按照对应版本的HTML语法进行解析页面
<!DOCTYPE html> //HTML5版本
命名空间
- <html>元素表示整个网页文档，在开始标签上设置了命名空间xmlns属性
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> //XHTML1.0版本
<html lang="en"> //HTML5版本
- xml:可扩展标记语言，使用在传输过程中的规范。被设计用来传输和存储数据，是html的补充
- xmlns:全称叫做XML NameSpace,NameSpace叫做命名空间，浏览器会将此命名空间用于该属性所在元素内的所有内容
- <html>元素的命名空间规定了在不同用户的浏览器中标签语义遵循的统一标准，避免出现标签名冲突，这个标准使用的就是一个固定的网址http://www.w3.org/1999/xhtml中的规范
- xml:lang=“en” 和 lang=“en” 表示所有的标签元素内容的语言都是英语，对搜索引擎和浏览器是有帮助的
- lang=“zh-cn” 表示中文（中国）
字符集
- <head>标签内部的<meta>标签通过http-equiv属性定义了当前的网页所使用的字符编码。
- char：character,字符。set：集合
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> //XHTML1.0版本
<meta charset="UTF-8"> //HTML5版本
-
常用字符集编码
- 国际通用字库
- UTF-8:以字节为单位对Unicode万国码进行编码，涵盖了所有人类的语言文字，一个汉字为3个字节大小
- 中文国际字库
- gb2312：共收入汉字6763个和包括拉丁字母、希腊字母、日文平假名及片假名字母、俄语西里尔字母在内的682个
- gbk：是gb2312的扩展，增加了繁体字，共收入21886个汉字和图形字符，其中汉字（包括部首和构件）21003个，图形符号883个，一个汉字为2个字节大小
- 国际通用字库
-
字符集常见问题 (使用情况建议)
- 1.如果没有网页加载速度要求，或者制作的是外文网站，使用utf-8
- 2.如果含有大量中文汉字的网站，而且要求网页加载速度快，使用gbk
- 注意：meta标签声明的字库，必须和编辑器软件默认编译字库相同，否则会出现两个字库不匹配，浏览器加载时出现乱码（Vs Code 右下角的UTF-8字样）
常用标签
注释
- HTML注释语法：
<!-- 书写注释内容 -->
- vscode 快捷键 ： ctrl+/
- 注释只在源代码中可见，在浏览器窗口是不显示的
- 用途
- 在源代码中添加描述性的提示信息，便于我们阅读代码
- 对应HTML纠错也大有帮助，可以通过注释某一行HTML代码，以便检索错误的位置
- 暂时注释掉一部分不用的代码，便于后期恢复代码
标题
- 标题（Heading），是通过<h1>-<h6>六个标签分别来对六个级别的标题进行定义的
- <h1>定义最大的标题 ，<h6>定义最小的标题
- <h1>-<h6>标签都是双标签，且都是容器级标签
- 标题标签的作用是给标签内部的元素内容添加对应级别标题的语义，不负责文字的素体、字号等样式。样式是由css设定的
- 标题标签之间是不能互相嵌套的，下一级标题与上级标题之间通过同级关系书写，下一级标题解释说明的是前面距离最近的上一级标题
- 标题标签对于呈现文档结果非常重要，使用时要根据标签的重要程度进行选择，其中<h1>标签最重要，<h2>标签次重要，以此类推
- <h1>在整个HTML中的权重非常高，内部应该放置HTML中最重要的内容，比如logo
- <h1>由于非常重要，内部的文字对于提高搜索引擎排名也非常重要，为了防止作弊，如果一个页面出现多个<h1> ，反而降低权重。约定俗称的，一个页面只会出现一个<h1>
段落和换行
-
段落（paragraph）是通过<p>标签进行定义的
-
<p>标签是双标签，且为文本级标签。内部只能放置文本、图片、表单元素，或者废弃的<font>标签等
-
<p>标签的作用是给标签内部添加一个完整段落的语义，不负责内容自动换行的样式。换行的效果是由css决定的
-
<br/>(breaking)标签是HTML中一个简单的换行符
-
<br/>标签是一个单标签
-
在需要换行的位置可以使用<br/>标签书写，但是<br/>与<p>不同，<br/>没有建立新的段落的语义，只是简单的进行强制换行
-
每一对<p>标签内部的元素内容为一个完整的段落，如果有多个段落，需要分别使用不同的<p>标签进行定义
文本格式化
-
HTML中有部分标签是用来对文字进行格式化显示设置的，比如粗体和斜体等
-
文本格式化的标签均为双标签，且为文本级标签，内部只能书写文字
标签 描述 b 定义粗体文本，bold i 定义斜体，italic u 定义下划线 em 定义着重文字，自带斜体效果 strong 定义加重语气，自带加粗效果 -
强调部分推荐使用em 和 strong
图像
-
图像（image）由<img>标签进行定义
-
<img>标签是单标签，本身相当于一个特殊的文本
-
<img>标签的作用是在指定的位置插入一张图片
-
在HTML文件，常用的插入图片的类型有：jpg、png、gif
-
由于<img>为单标签，所以它只能通过属性进行相关的图像设置
属性名 描述 src 表示图片的路径 width 表示图片的宽度 height 表示图片的高度 border 边框属性；它的值可以设置边框的厚度 title 设置提示文本 alt 设置图像没有找到时候的替换文本 <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F35%2F34%2F19300001295750130986345801104.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617531114&t=203675359e0023b81bd2cd9388667991" height="360" title="点击查看源网页" alt="这是一张猫猫睡着的图片">- 如果需要插入一张图片到HTMl中，<img>标签必须设置src属性
- src：属性值是图片查找的路径，分为相对和绝对路径
-
相对路径（相对路径查找文件时，需要从HTML文件本身出发，根据相对的位置进行查找）
- 同级查找：指目标文件与HTML文件位于同一级，直接书写文件名+后缀格式
<img src="smile.jpg">- 子级查找：指目标文件在与HTML文件同一级的文件夹的内部，需要先查找文件夹名称，然后通过关闭符号/进入文件查找里面的内容；如果有多层文件夹，需要/进入多层
<img src="images/smile.jpg">- 上级查找：指目标文件在HTML文件所在文件夹的更上一级，需要跳出当前文件夹到上一层，路径写法利用…/表示跳出一级，如果跳出多级书写多次…/，直到找到文件
<img src="../smile.jpg"> -
绝对路径（绝对路径查找文件时，不需要从HTML文件本身出发，而是直接从电脑的盘符出发进行查找，或者使用网址形式查找）
- 盘符出发：例如从c盘或d盘出发查找图片，书写时以c:/开头，后续类似子级查找写法直至找到目标文件
<img src="C:/Users/teacher/smile.jpg">- 网址形式：要查找的文件来自网络资源，路径写法以http://开头
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F35%2F34%2F19300001295750130986345801104.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617531114&t=203675359e0023b81bd2cd9388667991">-
缺点1：盘符出发的路径不可移植，不可移动
-
缺点2：盘符出发的路径容易出现中文字符，中文的路径容易出现错误
-
建议1：多使用相对路径，可以适当使用网址形式的绝对路径
-
建议2：使用相对路径必须将图片或文件与HTML同时上传，而且需要保持相对位置不变
-
其他属性
- 宽度和高度
- width height 以px为单位的数值，或者省略px不写
- 如果不设置两个属性，会以图片的原始尺寸加载
- 如果设置属性：只设置了其中一个，另一个会等比例变换；如果两个都设置，按照设置值加载
- 宽边框border
- 设置图片的边框，属性值为数值，数值是几表示边框宽度为几像素 （css也可设置）
- 提示文本title
- 设置的是鼠标悬停时的提示文本
- 替换文本alt
- 设置的是图片查找错误时，出现的替换文本。如果能正常找到图片，替换文本是不显示的
- 宽度和高度
-
总结
- <img>标签最为重要的属性为src，尽量使用alt对图片进行说明，添加相对关键词可以有利于SEO搜索引擎优化。其他属性可以根据需求进行设置
847
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
