前端那点事02[pink老师]-HTML标签（上）

最新推荐文章于 2023-08-20 10:38:02 发布

codingDreamDay

最新推荐文章于 2023-08-20 10:38:02 发布

阅读量487

点赞数 2

文章标签： html

本文链接：https://blog.csdn.net/daydreamqun/article/details/105632847

版权

目标

1. 标签的书写规范
2. HTML骨架标签
3. 超链接标签
4. 写出图片标签并说出alt和title的区别
5. 说出相对路径的三种形式

本节博客：

HTML语法规范
HTML基本结构标签
开发工具
HTML常用标签
HTML中注释和特殊字符

1、HTML语法规范

标签分为单标签和双标签

1.1 基本语法概述

1.HTML标签是由尖括号包围的关键词，如 < html > 。
2.HTML标签通常是成对出现的，例如< html>和，我们称为双标签。标签中的第一个标签是开始标签，第二个标签是结束标签。
3.有些特殊的标签必须是单个标签（极少情况），例如
，我们称为单标签。

1.2 标签关系

双标签关系可以分为两类：包含关系和并列关系。
包含关系：

<head>
	<title></title>
</head>

在这里插入图片描述
并列关系：

<head></head>
<body></body>

在这里插入图片描述

2、HTML基本结构标签

2.1 第一个HTML网页

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。
HTML页面也称为HTML文档。

<html>
	<head>
		<title>我的第一个页面</title>
	</head>
	<body>
		欢迎您的到来
	</body>
</html>

标签名	定义	说明
< html >< /html >	HTML标签	页面中最大的标签，我们称为根标签
< head >< /head >	文档的头部	注意head标签中我们必须要设置的标签是title
< title >< /title >	文档的标题	让页面拥有一个属于自己的网页标题
< body >< /body >	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面的

HTML文档的后缀名必须是.html 或 .htm，浏览器的作用是读取HTML文档，并以网页的形式显示出它们。
此时，用浏览器打开这个网页，我们就可以预览我们写的第一个HTML文件了。

2.2 基本结构标签总结

在这里插入图片描述

3、网页开发工具

在这里插入图片描述推荐下载VS code
下载地址：https://code.visualstudio.com/
推荐插件下载：

注：JS-CSS-HTML Formatter这个插件不要安装，非常不好用

3.1 文档类型声明标签

< !DOCTYPE >文档类型声明，作用就是告诉浏览器采用哪种HTML版本来显示网页。

< !DOCTYPE html >

这句代码的意思是：当前页面采用的是HTML5版本来显示网页
注意：
1.< !DOCTYPE >声明位于文档中的最前面的位置，处于< html >标签之前。
2.< !DOCTYPE >不是一个HTML标签，它就是文档类型的声明标签。

3.2 lang语言种类

用来定义当前文档显示的语言。

< html lang="en" >

告诉浏览器或者搜索引擎这是一个英文网站，本页面采取英文来显示。
1.en定义语言为英语
2.zh-CN定义语言为中文
简单来说定义为en就是英文网页，zh-CN就是中文网页
其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档可以显示英文
这个属性对浏览器和搜索引擎（百度，谷歌等）有作用。

3.3字符集

字符集是多个字符的集合。以便计算机能够识别和存储各种文字。
在< head >标签内，可以通过==< meta >标签的charest==属性来规定HTML文档应该使用哪种字符编码。

< meta charest = "UTF-8">

charest常用的值有：GB2312、BIG5、GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。
注：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用 “UTF-8” 编码，尽量统一写成标准的"UTF-8"，不要写成“utf8 或 UTF8”。

4、HTML常用标签

4.1 标签语义

记住每个标签的语义。简单理解即记住标签的含义，即这个标签是用来干嘛的。
根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。
如：标题标签、段落标签等……

4.2 标题标签< h1 > - < h6 >

	<h1>标题标签</h1>
    <h1>标题一共六级选</h1>123
    <h2>文字加粗一行显</h2>
    <h3>由大到小依次减</h3>
    <h4>从重到轻随之变</h4>
    <h5>语法规范书写后</h5>
    <h6>具体效果刷新见</h6>

4.3 段落标签和换行标签

< p >标签用于定义段落标签，它可以将整个网页分为若干段落。

<p> 我是一个段落标签 <p>

单词 paragraph的缩写，意为段落。
标签语义：可以把HTML文档分割为若干段落。

特点：
1、文本在一个段落中会根据浏览器窗口的大小自动换行。
2、段落与段落之间保有空隙。

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文字强制换行显示，就需要使用换行标签< br / >。

< br / >

单词break的缩写，意为打断。
标签语义：强制换行。

特点：
1、< br / >是个单标签。
2、< br / >标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的距离。

4.4文本格式化标签

标签语义：突出重要性，比普通文字更重要

语义	标签
加粗	< strong >< /strong >或 < b >< /b >
倾斜	< em >< /em >或< i >< /i >
删除线	< del >< /del >或< s >< /s >
下划线	< ins >< /ins >或< u >< /u >

**说明：**推荐使用前一种，语义更强烈。

< strong >我是加粗< /strong >

4.5 < div >和< span >标签

< div >和< span >是没有语义的，它们就是一个盒子，用来装内容的。
div是division的缩写，表示分割、分区。span意为跨度、跨距。
特点：
1、< div >标签用来布局，但是现在一行只能放一个< div >。大盒子。
2、< span >标签用来布局，一行上可以多个< span >。小盒子

4.6图像标签和路径

1.图像标签

在HTML标签中，< img >标签用于定义HTML页面中的图像。

< img src = "图像URL">

单词image的缩写，意为图像。
src是< img >标签的必须属性，它用于指定图像文件的路径和文件名。
所谓属性：简单理解就是属于这个图像标签的特性。

图像标签的其他属性：
在这里插入图片描述注意：
1、图像标签可以拥有多个属性，必须写在标签名的后面。
2、属性之间不分先后顺序，标签名与属性、属性与属性之间均已空格分开。
3、属性采取键值对的格式，即key = "value"的格式，属性 = “属性值”。

2.路径

目录文件夹
根目录：打开目录文件夹的第一层就是根目录。

1、相对路径
以引用文件所在位置为参考基础，而建立出的目录路径。

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级，如< img src=“baidu.gif”>
下一级路径	/	图像文件位于HTML文件下一级，如< img src=“images/baidu.gif”>
下一级路径	…/	图像文件位于HTML文件上一级，如< img src="…/baidu.gif">

多层嵌套：…/…/…/

2、绝对路径
例如：C:\Users\123\Desktop\HTML

注：通常使用相对路径，绝对路径不用。

codingDreamDay

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端那点事02[pink老师]-HTML标签（上）

目标1. 标签的书写规范2. HTML骨架标签3. 超链接标签4. 写出图片标签并说出alt和title的区别5. 说出相对路径的三种形式本节博客：HTML语法规范HTML基本结构标签开发工具HTML常用标签HTML中注释和特殊字符1、HTML语法规范标签分为单标签和双标签1.1 基本语法概述1.HTML标签是由尖括号包围的关键词，如 < html &gt...
复制链接

扫一扫