HTML常用标签及路径
文章目录
- 先选择一个编辑器吧
- 一、HTML基本骨架
- 二、DTD
-
- 1.DTD
- 2.命名空间xmlns
- 3.字符集
- 三、HTML常用标签
-
- 1.注释语法
- 2.标题标签
- 3.段落和换行
- 4.文本格式化
- 5.图像标签
- 四、路径
-
- 1.相对路径
- 2.绝对路径
- 总结
先选择一个编辑器吧
在这里呢，我选择VS code（Visual Studio Code） 用这个来写代码，当然也可以选择其他编辑器，例如Editplus、Notepad、HBulider、WebStorm等，以前用过Editplus，适用于初学者哦（全部自己敲，多敲夺多会），HBulider 也用过的，也很不错。VS code是微软公司研发，对开发者来说更加友好，拥有超级大丰富的插件扩展，可以用它更快捷的工作。
先安装几个插件，如下：（英语好就不用安装第一个插件了哦）
接下来看看VS code吧
一、HTML基本骨架
HTML文件最基本的四个标签，组成了网页的基本骨架，包括：html 、head、title、body。
代码如下（示例）：
<html>
<head>
<title>
网页的标题
</title>
</head>
<body>
网页的主体
</body>
</html>
注：
（1）head标签中必须要设置的是title。
（2）title中的关键字可以作为搜索引擎抓取时的关键字，提高SEO搜索引擎优化。
（3）body内部元素会显示在浏览器窗口中，用于存放所有的HTML显示内容标签。
二、DTD
1.DTD
DocType Definition,完整的HTML文件第一行内容叫做文档定义类型，简称DTD，也称文档声明类型。
作用：告知浏览器该网页使用的是哪个版本的HTML规范，让浏览器按照对应版本的HTML语法进行解析页面。
2.命名空间xmlns
xml:可扩展标记语言，使用在传输过程中的规范，被设计用来传输和存储文件。是html的补充。
xmlns：XML NameSpace(命名空间),浏览器会将命名空间用于该属性所在元素内的所有内容。
xml.lang="en"和lang=“en” 表示所有标签元素内容语言都是英语，对搜索引擎和浏览器是有帮助的。
3.字符集
meta标签通过http-equiv属性定义了当前网页所使用的字符编码，charset字符集合。
常用的字符集编码：
（1）国际通用字库UTF-8，涵盖了所有人类的语言。
（2）中文国标字库gb2312、gbk
三、HTML常用标签
1.注释语法
代码如下（示例）：
<!--注释内容-->
作用：
（1）代码中添加描述性信息，便于我们阅读代码。
（2）对于纠错有帮助，可通过注释某一行代码，以便检索错误位置。
（3）暂时注释，以便后期代码恢复。
2.标题标签
标题 h1到h6 标题级别逐渐减小。
代码如下（示例）：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
作用：
给标签内部的元素添加对应级别标题的语义，不负责文字的粗体等样式。
注意：
标题标签之间不能相互嵌套的，可以有同级即兄弟级关系。
正确写法：
<h1>一级标题</h1>
<h2>二级标题</h2>
错误写法：
<h1>
<h2>二级标题</h2>
</h1>
< h1 >在HTML中权重非常高,对于提高搜索引擎排名非常重要，为了防止作弊，一个页面中出现多个h1反而会降低权重。（所以工作中，一个页面中只会出现一个h1哦！）
3.段落和换行
段落：< p >内容只能放文本、图片、表单元素，或者废弃的< font >标签等。（文本级标签）
作用：给标签内部的内容添加一个完整段落的语义，不负责内容自动换行的样式。
代码如下（示例）：
<h2>这是一个二级标题</h2>
<p>这是用来解释说明二级标题的内容</p>
换行：< br />一个简单地换行，单标签。
代码如下（示例）：
<p>这是用来解释说明二级标题的内容，<br/>需要换行，不需要换段落</p>
4.文本格式化
b：加粗文本
i：定义文字斜体效果
u：下划线
代码如下（示例）：
<p><b>这是b标签</b></p>
<p><u>这是u标签</u></p>
<p><i>这是i标签</i></p>
效果展示：
big：定义大号字
em：加重文字，自带斜体效果哦
small：小号字体
strong：加粗效果
sub：定一下标
sup：定义上标
代码如下（示例）：
<p><big>这是big标签</big></p>
<p><small>这是small标签</small></p>
<p><strong>这是strong标签</strong></p>
<p><em>这是em标签</em></p>
<p>这是一个上标的计算式2<sup>3</sup></p>
<p>这是一个下标的化学分子式H<sub>2</sub>O</p>
效果展示：
ins：定义插入字，自带加粗效果
del：定义删除字
s:删除字（不建议使用）del可代替
strike：是s的全称，不建议使用 del可代替
代码如下（示例）：
<p><ins>这是ins标签</ins></p>
<p><del>这是del标签</del></p>
<p><s>这是s标签</s></p>
<p><strike>这是strike标签</strike></p>
效果展示：
5.图像标签
img，单标签，在指定的位置插入一张图片。类型有：jpg、png、gif（其他类型不太常用）。
src：必须设置的属性，图片查找的路径。
代码如下（示例）：
<img src="" alt="">
width：图片的宽度
height：图片的高度
属性值：以px为单位的数值，或者省略px不写。
代码如下（示例）：
<img src="images/gai.jpg" width="200px" height="300px">
border：设置图片边框
代码如下（示例）：
<img src="images/gai.jpg" width="200px" height="300px" border="20">
title：鼠标悬停时的提示文本，自定义文字内容。（可提高用户体验）
代码如下（示例）：
<img src="images/gai.jpg" width="200px" title="点击查看图片">
alt：图片查找错误时，出现的替换文本。自定义替换内容，如果能正常找到图片，替换文本时不显示的。
代码如下（示例）：
<img src="images/gai.jpg" width="200px" alt="这是一张盖盖的自拍照">
四、路径
路径：相对路径查找，绝对路径查找。（不同出发点，参考位置不同）
1.相对路径
从HTML文件本身出发，根据相对的位置进行查找，包含三种方法。
（1）同级查找：直接书写文件名+后缀格式
代码如下（示例）：
<img src="gai.jpg" />
（2）子级查找：目标文件在HTML文件同一级的文件夹内部，需要先查找文件夹名称，通过关闭/符号进入文件夹查找。多层文件夹需要多个/
代码如下（示例）：
<img src="images/gai1.jpg" />
<img src="images/tupian/gai2.jpg" />
（3）上级查找：指目标文件在HTML文件所在文件夹的更上一级，需要跳出当前文件夹到上一层，利用…/表示跳出一级，若跳出多级书写多次…/，知道找到文件。
代码如下（示例）：
<img src="../images/gai3.jpg" >
<img src="../../gai4.jpg" >
综合使用：
<!-- 综合上级和子集查找 -->
<img src="../img/gai5.jpg" >
2.绝对路径
不从HTML文件出发，而是从电脑里面的盘符查找，或者使用网址形式查找。
（1）盘符出发：从c盘或者d盘查找，以c:/开头，后续类似子集查找方法直到查找到目标文件。
代码如下（示例）：
<img src="D:/code/Html/images/gai.jpg" >
（2）网址形式：要查找的是网络资源，以http：//开头。
代码如下（示例）：
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Ff%2F54a0f7661aa7c.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617456179&t=218de5f23698ce41399370c8bb84c4b6" >
从盘符出发的缺点：
1.路径不可移植，在本人电脑中可以，其他人电脑将会失效。
2.出现中文字符，中文路径容易出现错误。
路径实际应用：
1.建议使用相对路径，适当使用网址形式的绝对路径。
2.使用相对路径时，必须将图片和HTML文件同时上传，且保持相对位置不变。
总结
今天就学到这里啦，今天学习了许多HTML常用的标签，以及标签的属性。没有看会的，只有敲会的，多敲代码勤写笔记。加油~
