首页前端开发HTML【HTML基础篇001】超详细认识HTML标签种类

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

时间2023-07-12 22:48:01发布访客分类HTML浏览1366
导读：🏆一、HTML是什么又不是什么？👤1.1、HTML是什么超文本标记语言（Hypertext 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基本格式的说明

  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>

👥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">

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

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

🏆三、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>

👤3.2、img标签

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

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

如以下的代码：

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

👤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>

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文档中创建一个链接，点击此链接就可以调到相对应id的位置

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

👤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>

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

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

👤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>

输出示例：


👥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……

有序列表的其他属性

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

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

栗子：

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

输出示例：

 👤3.8、文本格式化标签

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！


若转载请注明出处： 【HTML基础篇001】超详细认识HTML标签种类
本文地址： https://pptw.com/jishu/306133.html
Java的包：提高代码可维护性和可扩展性的神器 HTML5新特性

游客 回复需填写必要信息
↑