【HTML基础篇001】超详细认识HTML标签种类

  • 【HTML基础篇001】超详细认识HTML标签种类已关闭评论
  • 20 次浏览
  • A+
所属分类:Web前端
摘要

HTML是一种标记语言(markup language),它不是一种编程语言。HTML使用标签来描述网页。


🏆一、HTML是什么又不是什么?

👤1.1、HTML是什么

  • 超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言。
  • 本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页。对于不同的浏览器,对同一个标签可能会有不同的解释。(兼容性问题)
  • 网页文件的扩展名:.html或.htm

👤1.2、HTML不是什么

HTML是一种标记语言(markup language),它不是一种编程语言。HTML使用标签来描述网页。

🏆二、HTML文档基本结构

<!DOCTYPE html> <html lang="zh-CN"> <head>   <meta charset="UTF-8">   <title>css样式优先级</title> </head> <body>  </body> </html>

【HTML基础篇001】超详细认识HTML标签种类

对HTML基本格式的说明

  1. <!DOCTYPE html>声明为HTML5文档。
  2. <html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)不会显示在网页上。
  3. <head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据。
  4. <title>、</title>定义了网页标题,在浏览器标题栏显示。
  5. <body>、</body>之间的文本是可见的网页主体内容。

 

注意:对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码。有些浏览器会设置 GBK 为默认编码,则你需要设置为 <meta charset="gbk">。

 

 

👤2.1、head内部常用标签

head内常用标签

标签 意义
<title></title> 定义网页标题
<style></style> 定义内部样式表
<script></script> 定义JS代码或引入外部JS文件
<link/> 引入外部样式表文件
<meta/> 定义网页原信息
<!--标签的分类<h1></h1>--> <!DOCTYPE html> <!--lang="en" 表示网页的主要语言是英语--> <html lang="zh-CN"> <head> <!--定义网页原信息-->     <meta charset="UTF-8"> <!--方便搜索引擎查找的,一个是keywords搜索关键字可以引导到到该网页,description相当于摘要-->     <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">     <meta name="description" content="老男孩教育Python学院"> <!--标签页上显示的内容-->     <title>My First HTML</title> <!--定义a标签的样式-->     <style>         a{             color:darkred;         }     </style> <!--     定义JS代码或引入外部JS文件     <script>alert("Hello World")</script> --> <!--引入外部样式表文件text.css将a标签的颜色变为绿色-->     <link rel="stylesheet" href="text.css"> <!--     2秒后跳转到对应的网址,注意引号     <meta http-equiv="refresh" content="2;URL=https://www.cnblogs.com/zaixiazhouzhou/default.html?page=1"> --> <!--告诉IE以最高级模式渲染文档-->     <meta http-equiv="x-ua-compatible" content="IE=edge"> </head>

【HTML基础篇001】超详细认识HTML标签种类

👥2.1.1、对Meta标签的再补充

  • <meta>元素可提供有关页面的元信息(mata-information),针对搜索引擎和更新频度的描述和关键词。
  • <meta>标签位于文档的头部,不包含任何内容。
  • <meta>提供的信息是用户不可见的。

meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name 属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。

1.http-equiv属性:相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。

<!--2秒后跳转到对应的网址,注意引号--> <meta http-equiv="refresh" content="2;URL=https://baidu.com"> <!--指定文档的编码类型--> <meta http-equiv="content-Type" charset=UTF8"> <!--告诉IE以最高级模式渲染文档--> <meta http-equiv="x-ua-compatible" content="IE=edge">

【HTML基础篇001】超详细认识HTML标签种类

2.name属性: 主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="老男孩教育Python学院">

【HTML基础篇001】超详细认识HTML标签种类

 

🏆三、Body内部常用的标签

👤3.1、基本标签

<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s>  <p>段落标签</p>  <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6>  <!--换行--> <br>  <!--水平线--> <hr>

【HTML基础篇001】超详细认识HTML标签种类

 

👤3.2、img标签

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

【HTML基础篇001】超详细认识HTML标签种类

img标签中除了自带的属性,我们还可以给它添加一些自定义的属性

如以下的代码:

<img format="jpg" sx="自定义的属性" src="图片的路径" >

【HTML基础篇001】超详细认识HTML标签种类

 

👤3.3、a标签

👥3.3.1、a标签的介绍

a标签也就是我们常见的超链接标签,所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。

默认情况下,链接将以以下形式出现在浏览器中:

  • 一个未访问过的链接显示为蓝色字体并带有下划线。
  • 访问过的链接显示为紫色并带有下划线。
  • 点击链接时,链接显示为红色并带有下划线。
  • 注意:如果为这些超链接设置了 CSS 样式,展示样式会根据 CSS 的设定而显示。

👥3.3.2、a标签的语法格式

 

<a href="http://www.oldboyedu.com" target="_blank" id="自定义的ID值">点我</a>

【HTML基础篇001】超详细认识HTML标签种类

href属性指定目标网页地址。该地址可以有几种类型:

  • 绝对URL - 指向另一个站点(比如 href="http://www.jd.com)
  • 相对URL - 指当前站点中确切的路径(href="index.htm")
  • 锚URL - 指向页面中的锚(href="#top")

target 属性:

  • _blank表示在新标签页中打开目标网页
  • _self表示在当前标签页中打开目标网页

id 属性:

id 属性可用于创建一个 HTML 文档书签。

提示: 书签不会以任何特殊方式显示,即在 HTML 页面中是不显示的,所以对于读者来说是隐藏的。

值得注意:

在HTML文档中插入ID:

<a id="ID为1">现在是ID为1的位置</a>

【HTML基础篇001】超详细认识HTML标签种类

在HTML文档中创建一个链接,点击此链接就可以调到相对应id的位置

<a href="#ID为1">点我跳到ID为1的位置</a>

【HTML基础篇001】超详细认识HTML标签种类

 

👤3.4、HTML中特殊字符

显示结果 描述 实体名称 实体编号
  空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
" 引号 &quot; &#34;
' 撇号 &apos; (IE不支持) &#39;
&cent; &#162;
£ &pound; &#163;
¥ 人民币/日元 &yen; &#165;
欧元 &euro; &#8364;
§ 小节 &sect; &#167;
© 版权 &copy; &#169;
® 注册商标 &reg; &#174;
商标 &trade; &#8482;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;

值得注意的是:虽然 html 不区分大小写,但实体字符对大小写敏感。

下面来看一个实际的例子

<h1>海      燕</h1>

【HTML基础篇001】超详细认识HTML标签种类

上面不论两个字之间空的有多宽,都会默认是看做只有一个空格,如果想在两个字之间显示多个空格,就可以使用以下的方式

<h1>海&nbsp;&nbsp;&nbsp;燕</h1>

【HTML基础篇001】超详细认识HTML标签种类

 

👤3.5、div和span标签

span和div区别在于,div是一个块级元素,它包含的元素会自动换行。而span是行内元素,在它的前后不会换行。

span没有结构上的意义,只是单纯的应用样式,其他元素不适合时,就可以使用span元素。span可以作为div的子元素,但div不能是span的子元素,如果出现span中出现div不符合ws3c的页面标准。

👤3.6、重点:标签的分类

👥3.6.1、第一种:块级标签

特点:标签独占一行,可指定宽、高。

特性:

  • 能够识别宽高

  • margin和padding的上下左右均对其有效

  • 可以自动换行

  • 多个块状元素标签写在一起,默认排列方式为从上至下

  • 可以使用margin:0 auto居中对齐

常用的块状元素有:

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>

👥3.6.2、第二种: 内敛标签(行内标签)

特点:标签在一行内,宽度与高度由内容决定,只有在内容超过HTML的宽度时,才会换行。

特性:

  • 无法设置宽高

  • margin上下无效,只有左右有效果,padding都有效果,会撑大空间;box-sizing:border-box;无效,因为该属性针对盒模型。

  • 不会自动换行

常用的内联元素有:

<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

👤3.7、列表标签

列表标签的属性大概有以下几种

标签 描述
<ol> 定义有序列表
<ul> 定义无序列表,可以指定id、style、class等属性,还可以指定onclick等事件属性。
<li> 定义列表项
<dl> 用于定义术语列表。自定义列表不仅仅是一列项目,而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始
<dt> 定义标题列表项。可以指定id、style、class等属性,还可以指定onclick等事件属性。该元素只能包含文本、图像、超链接、文本格式化元素和表单控件元素等
<dd> 定义普通列表项。该元素可以包含与<div../>完全类似的内容

👥3.7.1、无序列表 ul 的相关属性

type属性:

  • disc(实心圆点,默认值)
  • circle(空心圆圈)
  • square(实心方块)
  • none(无样式)

栗子:

<ul type="disc">     <li>实心圆点-默认值</li> </ul> <ul type="circle">     <li>实心圆圈</li> </ul> <ul type="square">     <li>实心方块</li> </ul> <ul type="none">     <li>无样式</li> </ul>

【HTML基础篇001】超详细认识HTML标签种类

输出示例:

【HTML基础篇001】超详细认识HTML标签种类【HTML基础篇001】超详细认识HTML标签种类

 

👥3.7.2、有序列表 ol 的相关属性

有序列表type属性值

并不是有序列表只能用1、2、3 ……来表示序列。也可以使用下面的方式:

type属性值 列表项的序号类型
1 数字1、2、3……
a 小写英文字母a、b、c……
A 大写英文字母A、B、C……
i 小写罗马数字i、ii、iii……
I 大写罗马数字I、II、III……

有序列表的其他属性

属性 描述
reversed reversed 指定列表倒序(9,8,7...)
start
number
一个整数值属性,指定了列表编号的起始值。这个属性在 HTML4中弃用,但是在 HTML5 中被重新引入。

👥3.7.3、标题列表的相关属性

栗子:

<dl>     <dt>标题一</dt>     <dd>标题一下的内容1</dd>     <dt>标题二</dt>     <dd>标题二下的内容1</dd>     <dd>标题二下的内容2</dd> </dl>

【HTML基础篇001】超详细认识HTML标签种类

输出示例:

【HTML基础篇001】超详细认识HTML标签种类

 

👤3.8、文本格式化标签

名称 标签
粗体标签 strong(定义加重语气)、b(定义粗体文本)
斜体标签 em(推荐)、i、cite
中划线标签 del(推荐,定义删除字)、s
下划线标签 ins(推荐)、u
上标标签 sup
下标标签 sub
大字号标签 big
小子号标签 small

【HTML基础篇001】超详细认识HTML标签种类