HTML5基础语言中的常用标签

开心消消乐.HTML

已于 2022-09-24 19:51:24 修改

阅读量1.8k

点赞数 4

文章标签：前端 html

于 2022-09-24 13:47:39 首次发布

本文链接：https://blog.csdn.net/m0_65358564/article/details/127009053

版权

学习笔记——HTML5基础语言中的常用标签

1.HTML5的基本结构
- - 什么是< !DOCTYPE html >
  - 什么是< html lang="en" >
2.HTML5的头部标签
- 标签与属性
3.HTML的块级标签
- 3.1基本块级标签
- - 3.1.1< h1 >~< h6 >标题标签
3.2段落标签
3.3各有关文本编辑的标签

1.HTML5的基本结构

HTMTL5的基础结构分头部（head）和主体（body）。
其结构如下所示

<!DOCTYPE html>
<html lang="en">
      <head>
         <meta charset="UTF-8"/>
         <title>标题内容</title>
      </head>
         <body>
              正文内容     <!--这是注释！在运行时并不显示-->
         </body>
</html>

在记事本编辑好，保存
改为html格式（在保存的时候，保存类型改成“所有文件”，下方还有个编码下拉列表框，选择“UTF-8"）
双击文件在浏览器中运行：

运行效果如图所示

建议：
HTML语言标签常常以“<”开头，并以“>”结尾，所以各种标签排版应尽量整齐，养成写法习惯，能够迅速看出所写的内容归属于哪个标签，提高行事效率。。

什么是< !DOCTYPE html >

说简单是，是向浏览器说明当前文档的HTML的版本
HTML5之前版本文档解析的格式是：
< !DOCTYPE HTMLPUBLIC “-//W3C//DTDHTML4.01 Transitonal//EN” >

声明文档的解析类型(document.compatMode)，避免浏览器用怪异模式来解析渲染页面。
如果我们再页面添加了这个声明，浏览器就会用W3C标准去解析和渲染页面
document.compatMode：
BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。—》这样会导致不同浏览器渲染的效果不一样
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

什么是< html lang=“en” >

此句话在初期学习中影响不大，往后可以更深入学习

< html lang=“en” >一种网站编码格式，
向搜索引擎表示该页面是html语言，并且语言为英文网站(english)
其"lang"的意思就是“language”，
你的页面如果是中文页面，可将其改为
< html lang=“zh”>
值得注意的是：
其一：主要是给搜索引擎看的，搜索引擎不会去判断该站点是中文站还是英文站，所以这句话就是让搜索引擎知道，你的站点是中文站，对html页面本身不会有影响。
其二：主要是发送给服务器的页头等信息保函语言元素。如果不匹配会将导致服务器解析异常。

2.HTML5的头部标签

标签	描述
< head >	定义关于文档的信息
< title >	定义文档标题
< meta >	定义关于HTML文档的元数据
< link >	定义关于文档与外部资源之间的关系
< style >	定义文档的样式
< script >	定义客户端脚本

标签与属性

在html5基础语言中，以"< >"符号标记的单词常常是称为标签，每个标签都有一定的功能，而在标签内部也常常包含各种属性以及与属性相关的参数，例如:
< a href= " http://baidu.com ">首页< /a >
其中"a"为超链接标签，href为a标签里的属性， " http://baidu.com "为其对应属性里的参数。
标签的格式也比较多，不同的标签的格式是固定的，以下举几个例子：
1.< a href=" http://baidu.com ">超链接</a>
2.< meta charset= " UTF-8 "/>
3.< input type= "submit " value= " 登录 " >

2.1< title >标签

<head>
          <title>标题内容</title>
</head>

在浏览运行时，< title >标签的内容会在浏览器标题栏中显示

2.2< meta >标签

< meta >标签属性众多，本人学习较浅，自己也是参考学习他人资料，想要了解可以参照这位大佬的资料：

原文链接：https://blog.csdn.net/zhangank/article/details/94014629

但在初期学习阶段常用到的有：
< meta >里的 charset属性：描述文档类型和字符编码信息

<meta charset="UTF-8"/>

其他属性有：
（1）gb2312：简体中文，包含中文和英文的页面
（2）ISO-885901：出英文，一般用于只包含英文的页面
（3）big5：繁体，一般用于带有繁体字的页面
（4）UTF-8：国际通用的字符通码，适用于中文和英文页面

2.3< link >标签

用于链接一个外部样式表，可以使用任意次。
之后学习CCS样式表可以了解更多

<head>
   <link rel="stylesheet" type="text/css" href="mystyle.css"/>
</head>

属性	描述
rel	必填，说明文档与被链接的样式表的链接关系
type	指明被链接样式表的类型
href	指明被链接对象的地址

更详细的可以参考以下链接：
https://blog.csdn.net/jyb123/article/details/108704337

2.4< style >标签

指明HTML5的文档样式信息，如设置字体颜色，大小，网页背景颜色，网页背景图片

<head>
   <style type="text/css">
   body {background-color:red}
   p{color:yellow}
   </style>
</head>

3.HTML的块级标签

3.1基本块级标签

基本块级标签包括标题标签< h1 >~< h6 >、段落标签< p >、水平线标签< hr/ >、换行标签< br/ >

3.1.1< h1 >~< h6 >标题标签

标题标签实例如下：

    <html>
       <head>
          <title>标题标签使用实例</title>
       </head>
       <body>
          <h1>一级标签</h1>
          <h2>二级标签</h2>
          <h3>三级标签</h3>
      </body>
     </html>

在浏览器运行结果如下：
一级标题、二级标题、三级标题字体大小是自行设定的

HTML5提供了< h1 >~< h6 >六个级别的标题标签，所有标题标签字体都加粗
标签< h1 >与< /h1 >尽量配套使用，如果缺失</ h1 >那么从< h1 >标签之后的内容全部会是一级标题字体，直到碰到下一个标题标签。其他标签情况相似。
标题标签中的内容的字体大小和字体颜色都还可以通过其他标签改变。
标签在一个网页上最好只有一个在搜索引擎优化中占比重比较大
< h2 >标签在一个页面不能超过12个，< h3 >之后的标签就不做要求了

3.2段落标签

< p >到< /p >标签的内容被认为是一个段落，会与下文的内容隔开一行的距离。
几种对齐属性及参数：
align=＂right＂　　右对齐内容
align＝＂left＂　　　左对齐内容
align＝＂center＂居中左对齐内容
align＝＂justify＂对行进行伸展，这样每行都可以有相等的长度

3.3各有关文本编辑的标签

水平线标签< hr/ > 表示一条水平线
换行标签< br/ >相当于记事本中的“换行键”
字体粗体标签< strong > ……</ strong >或< b >……< /b >
字体斜体标签< em >……< em >或< i >……< /i >
字体颜色大小< font color=" " size=" " >……< /font >
下划线< u >……< /u >
删除线< s >……< /s >
上标< sub >……< /sub >
下标< sup >……< /sup >
空格 & nbsp;
大于号 & gt
小于号 & lt
引号 & quot
版权符号 &copy