前端基础.HTML_设置html标签属性时,标签名能与属性、属性与属性之间均以都好分开-CSDN博客

本文链接：https://blog.csdn.net/wutang_xiaobai/article/details/121726097

HTML的常用标签

首先HTNL和CSS是两种完全不同的语言，我们学的是结构，只要写HTML标签，认识标签就可以了

排版标签

1.标题标签（h）

排版标签主要和CSS搭配使用，显示网页结构的标签，是网页布局最常用的标签

标题标签

单词缩写：head 标题，头部 title文档标签

为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题

标题标签语义;作为标题使用，并且依据重要性递减

其语法格式如下：

<h1>    标题  </h1>
<h2>    标题  </h2>
<h3>    标题  </h3>
<h4>    标题  </h4>
<h5>    标题  </h5>
<h6>    标题  </h6>

加了标题的文字会变的加粗，字号也会依次变大

一行是只能放一个标题的

2.段落标签（p）

单词缩写：paragraph 段落

作用语义：

可以把HYML文档分割为若干段落

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

<p> 文本内容 </p>

是HTML文档中常见的的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行

3.水平线标签（hr）

单词缩写：horizontal 横线

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，

就是创建横跨网页水平线的标签。其基本语法格式如下：

<hr />是单标签

在网页中显示默认样式的水平线

4.换行标签（br）

单词缩写：break 打断，换行

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

<br />

这时如果还像在Word中直接敲回车键换行就不起作用了

5.div和span标签（重点）

div span 是没有语义的是我们网页布局主要的2个盒子

div就是division 的缩写分割，分区的意思其实有很多div来组合网页

span 跨度，跨距，范围

语法格式：

<div> 这是头部 </div>   <span> 今天价格 </span>

他们两个都是盒子，用来装我们的元素的，只不过他们有区别

div标签用来布局的，但是现在一行只能放一个div
span标签用来布局的，一行上可以放好多个span

排版标签总结

标签名	定义	说明
<h1></h1>	标题标签	作为标题使用，并且依据重要性递减
<p></p>	段落标签	可以把HTMl文档分割为若干段落
<hr/>	水平线标签	就是一条线
<br/>	换行标签
<div></div>	div标签	用来布局的，但是现在一行只能放一个div
<span></span>	span标签	用来布局的，一行上可以放好多个span

文本格式化标签

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

标签	显示效果
<b></b> <strong></strong>	文字以粗体方式显示（XHTNL推荐使用strong）
<i></i>和<em></em>	文字以斜体方式显示（XHTNL推荐使用em）
<s></s>和<del></del>	文字以加删除线方式显示（XHTNL推荐使用del）
<u></u>和<ins></ins>	文字以加下划线方式显示（XHTML不赞成使用u）

区别：

b只是加粗 strong除了可以加粗还有强调的意思，语义更强烈

标签属性

所谓属性就是外在特征比如手机的颜色，尺寸

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

格式如下：

<标签名>属性1=“属性值1” 属性2="属性2"...>内容</标签名>
<手机 颜色=“红色” 大小=“5寸”> </手机>

图像标签img(单标签)

单词缩写：image 图像

语法如下：

<img src="图像URL"/>

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

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素（XHTML不支持%页面百分百）	设置图像的宽
height	像素（XHTML不支持%页面百分百）	设置图像的高
border	数字	设置图像边框的宽度

    <h3>正常图像：</h3>
    <img src="images/timg.jpg"/>
    <h3>带有alt 替换文本：</h3>
    <img src="1images/timg.jpg"alt="小猪佩奇"/>
    <h3>带有title 提示文本：</h3>
    <img src="timg.jpg"title="他们是兄妹"/>
    <h3>图像大小更改：</h3>
    <img src="images/timg.jpg"width="300"/>
    <h3>带有border 边框“</h3>
    <img src="images/timg.jpg" border="20"/>

注意点：

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

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

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

链接标签

单词缩写：anchor的缩写，基本解释，锚

在HTNL中创建超链接非常简单，只需用标签把文字包括起来就好

语法格式：

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

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有超链接的功能
targer	用于指定链接页面的打开方式，其取值有sef和blank两种，其中self为默认值，blank为在新窗口中打开方式

注意：

外部链接需要添加 http：//www.baidu.com
外部链接直接链接内部页面名称即可比如首页
如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”（即href=“#”），表示该链接暂时为一个空链接
不仅可以创建文本超链接，在网页中各种网页元素，如图像，表格，音频，视频等都可以添加超链接

注释标签

在HTML中还有一种特殊的标签--注释标签。如果需要如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。

简单解释：注释内容不会显示在浏览器口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到

语法格式：

    <!-- 注释语句 -->   快捷键：Ctrl+/ 或者Ctrl+shift+/

注释是给人看的，目的是为了更好的解释这部分代码是干嘛的，程序是不执行这个代码的

一般用于简单的描述，如某些状态描述，属性描述等

注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行

路径（重难点）

实际工作中，我们的文件不能随意乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们

目录文件夹：

就是普通文件夹，里面只不过存放了我们做网页所需要的相关素材，比如HTML文件，图片，等等。

根目录

页面中的图片会非常多，通常我们再建一个文件夹专门用于存放图像文件（imgages），这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。路径可以分为：相对路径和绝对路径

相对路径

以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。

路径分类	符号	说明
同一级路径		只需输入图像名称即可，如
下一级路径	"/"	图像文件位于HTML文件同级文件夹下（例如文件夹名称为：images）如：<ing src ="images/baldu.gif"/>
上一级路径	“.../”	在文件名之前加入“.../”，如果是上两级，则需要使用".../.../",以此类推，如：<img src=".../baidu.gif />"

相对路径，是从代码所在的这个文件出发，去寻找我们的目标文件的，而我们所说的上一级下一级同一级，

简单说，就是图片位于 HTML页面的位置

绝对路径

绝对路径以Web站点根目录为参考基础的目录路径，之所以称为绝对，意指当所有网页引起同一个文件时，所使用的路径都一样的

"D:\web\img\logo.gif",或完整的网路地址，列如"百度一下，你就知道"。

注意：

绝对路径用的较少，理解就可以了，但是要注意，它的写法特别是符号\并不是相对路径的/

扩展阅读

锚点定位（难点）

通过创建锚点链接，用户能够快速定位到目标内容

创建锚点链接分为两步：

1.使用相应的id名标注跳转目标的位置（找目标）
    <h3 id="two">第二季</h3>
2.使用<a href="#id名"链接文本</a>创建文本（被点击）
    <a href="#two"></a>

快速记忆法：

好比找个人办事，首先找到他，然后拉关系，最后看效果

base 标签(单标签)

语法：

<base target="_biank"/>

base可以设置整体链接的打开状态
base写到<head></head>之间
把所有的链接都默认添加target="_blank"

预格式化文本pre标签

标签可定义预格式化的文本

被包围在<pre>标签元素中的文本通常会保留空格和换位符。而文本也会呈现为等宽字体。

<pre>
    对空格和换位符 
    可以进行控制
</pre>

所谓的预格式化文本就是，按照我们预先写好的文本格式来显示页面，保留空格和换位符等

有了这个标签，里面的文字，会按照我们书写的模式来显示，不需要段落和换行标签了。但是，比较少用，因为不好整体控制

特殊字符

一些特殊的符号，我们再HTML里面很难或者不方便直接使用，我们此时可以使用下面的替代代码

是以运算符&开头，以分号运算符；结尾
他们不是标签，而是符号
HTML中不能使用小于号"<"和大于号">"特殊字符，浏览器会将它们作为标签解析，若要正确显示，在HTML源代码中使用字符实体