HTML基本结构
基本骨架
- HTML文件最基本的四个标签组成了网页的基本骨架<html>、<head>、<title>、<body>。
<!-- html是网页中最大的标签，内部有两个字标签，一个是head头部，与头部同级的是body身体，在head里还有个title标题 -->
<html>
<head>
<title>标题</title>
</head>
<body>
<p>你好，我是body内的p标签</p>
</body>
</html>
页面效果
<html>标签
- 定义HTML文件的根元素，表示整个HTML文档，所有的标签都书写在<html>标签内部
<head>标签
- 配置一些内容，比如<title>、<meta>、<base>、<style>、<script>、<link>。内部对于网页的设置，除了title之外的内容不会显示
<title>标签
1.用做标题
2.title的关键字可以作为搜索引擎的关键字，可以提高SEO搜索引擎优化
3.内部的内容会显示在搜索结果的标题部分。
4.作为浏览器收藏夹的默认标题。
- 建议网页必须添加title标签内部的内容，尽量精简，提取网页关键字。
<body>标签
- 存放所有显示内容的标签<p>、<h1>、<hr />、<a>、<div>等等
- <body>标签内容会显示在网页上。
DTD
了解DTD
- 完整的HTML文件的第一行内容叫做文档定义类型，英文DocType Definition， 简称DTD。也称作文档声明类型，DocType Declaration。
- 作用：告知浏览器该网页使用的是哪个版本的HTML规范，让浏览器按照对应版本的HTML语法进行解析页面。
eg：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
- 其中，<!DOCTYPE html>就是HTML5的DTD。
命名空间
- <html>元素表示整个网页文档，在开始标签上设置了命名空间xmlns属性
- XHTML1.0版本
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> </html>
- HTML5版本
<html lang="en"> </html>
lang="en"表示所有的标签元素内容的语言都是英语，对搜索引擎和浏览器是有帮助的
lang="zh-cn"表示中文（中国）
字符集
<head>标签内部的<meta>标签通过http-equiv属性定义了当前的网页所使用的字符编码。
- char：character，字符。set：集合。
- XHTML1.0版本
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
- HTML5版本
<meta charset="UTF-8">
常用的字符集编码
国际通用字库
- UTF-8：以字节为单位对Unicode万国码进行编码，一个汉字为3个字节大小。
中文国标字库
- gb2312：共收入汉字6763个和包括拉丁字母、希腊字母、日文平假名及片假名字母、俄语西里尔字母在内的682个。
- gbk：是gb2312的扩展，增加了繁体字，一个汉字为2个字节大小。
字符集常见问题
使用情况建议：
1.如果没有网页加载速度要求，或者制作的是外文网站，使用utf-8。
2.如果含有大量中文汉字的网站，而且要求网页加载速度快，使用gbk。
注意：meta标签声明的字库，必须和编辑器软件默认编译字库相同，否则会出现两个字库不匹配，浏览器加载时出现乱码
例如：
VS code右下角有编码格式，若换成gbk，但是html文件编码是utf-8则会出现乱码问题，注意。
HTML常用标签
注释
- vs code快捷键：ctrl+/
<!-- 注释内容 -->
用途
①在源代码中添加描述性的提示信息，便于我们阅读代码。
②对于 HTML 纠错也大有帮助，可以通过注释某一行 HTML 代码，以便检索错误的位置。
③暂时注释掉一部分不用的代码，便于后期恢复代码。
标题
- 容器级标签，双标签。
- 从<h1>到<h6>，逐渐变小，从一级标签到六级标签。
- 样式通过css设定，标签本身的作用是添加对应级别的语义，不负责样式
-
标题标签不能相互嵌套，下一级和上一级要同级关系书写。
效果
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
权重
- 标题标签对于呈现文档结构非常重要，使用时要根据标签的重要程度进行选择，其中<h1> 标签最重要，<h2>标签次重要，以此类推。
- <h1>在整个HTML中的权重非常高，内部应该放置HTML中最重要的内容，比如logo。
- <h1>由于非常重要，内部的文字对于提高搜索引擎排名也非常重要，为了防止作弊，如果一个页面出现多个<h1>，反而降低权重。约定俗成的，一个页面中只会出现一个<h1>。
段落和换行
- 段落<p>进行定义
- <p>标签是双标签，文本级标签，内部放置的是文本，图片，表单，或者<font>（已废弃），以及文本格式化标签。
<p>我是段落</p>
<p><font>字体A</font></p>
<p>标签的作用是给标签内部的内容添加一个完整段落的语义，不负责内容自动换行的样式。 换行的效果是由css决定的。
- <br />标签是HTML中一个简单的换行符。
- <br />标签是一个单标签。
- 在需要换行的位置可以使用<br />标签书写，但是<br />与<p>不同，<br />没有建立新的 段落的语义，只是简单的进行强制换行。
<p>我是段<br /><!-- 我是换行 -->落</p>
换行
注意：
每一对<p>标签内部的元素内容为一个完整的段落，如果有多个段落，需要分别使用不同的<p>标签进行定义。
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
要是只有一个段落需要换行，那么就这么写
<p>我是一个需要换行的段落，我在这里换行<br />换行成功</p>
文本格式化（了解一下）
- HTML中有部分标签是用来对文字进行格式化显示设置的，比如粗体和斜体等。
- 但是在HTML4.0版本规范后，结构和样式进行了分离，HTML只负责搭建结构，css负责格式化样式，所以大部分文本格式化标签被废弃，但是在HTML4.01和XHTML1.0 transitional版本中依旧可以使用。
-
文本格式化标签均为双标签，文本级，只能书写文字
文本格式化的标签
图像
图像标签
- 图像（image）由<img>标签进行定义。
- <img>标签是单标签，本身相当于一个特殊的文本。
- <img>标签的作用是在指定的位置插入一张图片。
- 在HTML文件，常用的插入图片的类型有：jpg、png、gif。
标签属性
- 由于<img>为单标签，所以它只能通过属性进行相关的图像设置。
<img>常用属性展示：
img标签属性
src属性和路径
- 如果需要插入一张图片到HTML中，<img>标签必须设置src属性。 路径：指的是寻找文件时所历经的线路，在HTML中有特殊的书写语法。 路径分为相对路径和绝对路径，不同的方式出发点和参考位置不同。
绝对路径
- 绝对路径查找文件时，不需要从HTML文件出发，而是直接从电脑的盘符出发进行查找，或者使用网址形式查找。
- 盘符出发：例如从c盘或者d盘出发查找图片，书写时以c:/开头，后续类似子级查找写法直至找到 目标文件。
<img src="C:/Users/teacher/Documents/html/case/images/smile02.png" />
- 网址形式：要查找的文件是来自网络资源，路径写法以http://开头。
<img src="http://img3.imgtn.bdimg.com/it/u=1084243323,278941980&fm=26&gp=0.jpg" />
从盘符出发的绝对路径的缺点：
a.盘符出发的路径不可移植，不可移动。
b.盘符出发的路径容易出现中文字符，中文的路径容易出现错误。
相对路径
- 相对路径查找文件时，需要从HTML文件本身出发，根据相对的位置进行查找，包含三种方向。
- 同级查找：指目标文件与HTML文件位于同一级，直接书写文件名+后缀格式；
<img src="smile01.jpg">
- 子级查找：指目标文件在与HTML文件同一级的文件夹的内部，需要先查找文件夹名称，然后通过关闭 符号/进入文件夹查找里面的文件；如果有多层文件夹，需要/进入多层。
<img src="images/smile02.png"> <img src="images/tupian/smile03.jpg">
- 上级查找：指目标文件在HTML文件所在文件夹的更上一级，需要跳出当前文件夹到上一层，路径写法 利用../表示跳出一级，如果跳出多级书写多次../，直到找到文件。
<img src="../../smile04.jpg" /> <img src="../images/smile01.jpg" />
a.建议多使用相对路径，可以适当使用网址形式的绝对路径。
b.使用相对路径必须将图片或文件与HTML同时上传，而且需要保持相对位置不变。
图像其他属性
宽带和高度
width：图片的宽度
height：图片的高度属性值：以px为单位的数值，或者省略px不写。
如果不设置两个属性，会以图片的原始尺寸加载。
如果设置属性：只设置了其中一个，另一个会等比例变换；如果两个都设置，按照设置值加载。
<img src="smile01.jpg" width="200px">
<img src="smile01.jpg" height="100px">
<img src="smile01.jpg" width="200" height="100">
边框border
border:设置图片的边框
属性值：数值，数值是几表示边框宽度为几像素。
<img src="smile01.jpg" border="20">
后续的样式使用CSS设置
提示文档title
- 就是悬停鼠标时，显示的提示文本
<img src="smile01.jpg" title="点击查看原网站">
替换文档alt
- 图片没有加载出来的时候，替换的文本
<img src="smile01.png" alt="这是一张微笑的表情">
尽量使用alt属性对图片进行说明，可以提高SEO搜索引擎优化
音频和视频
- <audio>标签，双标签，需要src属性设置路径。支持的格式有.mp3,、.ogg、.wav
<audio src="music.mp3"></audio>
添加属性controls可以设置播放器的进度条，属性值也是controls
<audio src="music.mp3" controls="controls"></audio>
-<video>标签，双标签，需要src属性设置路径。支持的格式有.mp4、.ogg、.webm
进度条与<audio>一致
<video src="comic.mp4" controls="controls"></video>
超链接
超链接标签
- <a>标签，anchor，锚的意思。双标签，在指定的位置添加超链接，提供用户进行点击和跳转。
跳转方式有
1.页面内跳转。
2.跨页面跳转
href和target属性
- href是地址，可以使用绝对路径（网址形式），相对路径
- target有两种值
1._self：当前窗口打开
2._blank：新窗口打开
<a href="http://www.bilibili.com" target="_blank">跳转到bilibili</a>
<!-- 打开新窗口跳转到B站 -->
title属性与img的title属性功能基本类似。
效果
<a href="http://www.bilibili.com" target="_blank" title="B站">点我跳转到bilibili网</a>
两种特殊的锚点跳转方法
- 超链接的跳转还可以进行锚点跳转
页面内锚点跳转
- 这种跳转方法实现的是从某个位置跳转到同页面的另一个位置
- 设置锚点、添加链接
设置锚点
设置跳转目标锚点：
1.在目标位置找到任意一个标签，添加id属性，id的属性值必须是唯一的。id的属性值自定义规则：必须以字母开头，后面可以有字母，数字，下划线，横线，区分大小写
eg：
<h2 id="flag">flag位置</h2>
2.在目标位置添加一个空的<a>标签，只设置一个name属性，name属性值设置方法和id相同，必须是唯一的
<a name="flag"></a>
添加链接
- 链接到锚点，在需要点击的位置设置<a>标签，给a的href属性设置属性值为#id属性值或者#加a的name属性值
<a href="#flag">点击文本</a>
跨页面锚点跳转
- 这种跳转方法综合了跨页面跳转和锚点跳转。 制作方法也分为两个步骤，分别是设置锚点、添加链接。
第一步：设置锚点，方式与页面内锚点跳转一致，在目标网页的指定位置设置使用id或name 属性。
第二步：链接到锚点，添加超级链接时href属性需要更改，属性值写为页面的路径#id 。
<a href="new.html#flag">点击文本</a>
网友评论