html基础标签

最新推荐文章于 2022-11-14 10:24:41 发布

没有感情的代码机器人

最新推荐文章于 2022-11-14 10:24:41 发布

阅读量751

点赞数

本文链接：https://blog.csdn.net/chenhj153/article/details/100664751

版权

本文介绍了HTML的基础知识，包括Web标准的结构、样式和行为，HTML标签的分类和语义化。强调了标签语义化的重要性，如方便代码阅读、提高搜索引擎优化，并详细讲解了标题、段落、图像、链接、列表等常见标签的使用方法。

摘要由CSDN通过智能技术生成

HTML基础标签

Web标准构成

结构标准：结构用于对网页元素进行整理和分类，主要包括XML和XHTML两个部分。

结构标准决定你是否有个好天然身体
样式标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。

样式标准决定你是否打扮的美丽外观
行为标准：行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分

行为标准决定你是否有吸引人的行为

HTML骨架格式

<HTML>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</HTML>

标签分类

在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的 <HTML>、<head>、<body>都是HTML标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素

双标签

<标签名>内容</标签名>

该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>” 表示该标签的作用结束，一般称为“结束标签（end tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。
2. 单标签

<标签名 />

单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。
比如 <br />

HTML标签关系

嵌套关系

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

并列关系

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

HTML标签语义化

含义

首先是关于语义（Semantics）和默认样式的区别，默认样式是浏览器设定的一些常用tag的表现形式，语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用，很明显Hx系列看起来很像标题，因为拥有粗体和较大的字号。<strong>,<em>用来区别于其他文字，起到了强调的作用。至于列表和表格很明显的告诉你他们是做什么的。

标签语义化的好处(为什么要有标签语义化)

方便代码的阅读和维护
同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
使用语义化标签会具有更好地搜索引擎优化

核心：合适的地方给一个最为合理的标签。

语义是否良好：当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。

不管是谁都能看懂这块内容是什么。

遵循的原则：先确定语义的HTML ，再选合适的CSS。

HTML标签

标题标签

h1~h6，其中h1标签字体最大，h6最小
基本语法格式

<hn>	标题文本  	</hn>

段落标签

单词缩写： paragraph 段落

在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是

<p>  文本内容  </p>

水平线标签
单词缩写： horizontal 横线

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，<hr />就是创建横跨网页水平线的标签。其基本语法格式如下：

<hr /> 是单标签

换行标签
单词缩写： break 打断 ,换行

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

<br /> 换行标签

div span标签
div span 是没有语义的是我们网页布局主要的2个盒子
div 就是 division 的缩写分割，分区的意思其实有很多div 来组合网页。
span, 跨度，跨距；范围

<div> 这是div标签</div>    <span>这是span标签</span>

语法格式：

文本格式化标签
在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

<b>字体加粗<b /> 	<strong>字体加粗<strong />
<i>斜体<i /> 		<em>斜体<em />
<s>删除线<s /> 		<del>删除线<del />
<u>下划线<u /> 		<ins>下划线<ins />

图像标签img

单词缩写： image 图像

HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签以及和他相关的属性。其基本语法格式如下：

该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。

<img src="图像URL" />

连接标签

单词缩写： anchor 的缩写。基本解释锚, 铁锚的

在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可，其基本语法格式如下：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用

target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。

注意：

1.外部链接需要添加 http:// www.baidu.com

2.内部链接直接链接内部页面名称即可比如 < a href=“index.html”> 首页

3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

列表标签

容器里面装载着文字或图表的一种形式，叫列表。
列表最大的特点就是整齐、整洁、有序

无序列表 ul
无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

比如下面这些，新闻是没有顺序的，不用排队，先到先得，后发布先显示。

脚下留心：

<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
<li>与</li>之间相当于一个容器，可以容纳所有元素。
无序列表会带有自己样式属性，放下那个样式，一会让CSS来！

有序列表 ol
有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

所有特性基本与ul 一致。

定义列表
定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

标签属性
属性就是特性比如手机的颜色手机的尺寸，总结就是手机的。。

使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>

在上面的语法中，

1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。

2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

3.任何标签的属性都有默认值，省略该属性则取默认值。

采取键值对的格式 key=“value” 的格式

比如:

<hr width="400" />

属性是宽度
值是 400
提倡：尽量不使用样式属性。

路径

相对路径

图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如<img src=“logo.gif” />。
图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src=“img/img01/logo.gif” />。
图像文件位于HTML文件的上一级文件夹：在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推，如<img src="…/logo.gif" />。