HTML学习总结01- html标签

2020-08-13  本文已影响0人  释梦石

HTML简介

首先，HTML 指的是超文本标记语言 (Hyper Text Markup Language)，它 不是一种编程语言，而是一种标记语言 (markup language)；编程语言是有编译过程的，而标记语言没有编译过程，HTML标签是直接由浏览器解析执行。标记语言也就是用一套标记标签 (markup tag)的描述方式。HTML 作用就是用标记标签来描述网页，把网页内容在浏览器中展示出来。

HTML骨架

我们来看一下一个html页面的骨架，如下图

html骨架

这里详细介绍一下以下几个标签

  1. HTML标签

作用所有HTML中标签的一个根节点。 最大的标签 ，也叫做根标签

  1. head标签

头标签，文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
注意在head标签中我们必须要设置的标签是title

  1. title标签

文档的标题，每一个网页都拥有一个属于自己的标题。

  1. body标签

标记文档的主体 ，我们的网页基本都是放到body里面的

HTML标签

在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的 <HTML>、<head>、<body>都是HTML骨架结构标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素； HTML标签通常是成对出现的，比如 <div> 和 </div>；也有少部分单标签，如：<br />、<hr />等

标签语义化

标签语义化指的是标签最好具有一定的语义作用，标签语义化的作用如下：

  1. 方便代码的阅读和维护

  2. 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容

  3. 使用语义化标签会具有更好地搜索引擎优化

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

标签属性

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

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

  1. 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。采取 键值对 的格式 key="value" 的格式

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

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

排版标签

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

  1. 标题标签
    为了使网页更具有语义化，我们经常会在页面中用到标题标签；标题使用<h1>至<h6>标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题。具有align属性，属性值可以是：left、center、right。
    <h1>这是一个标题</h1>
    <h2>这是一个标题</h2>
    ...
    <h6>这是一个标题</h6>

标题具有align属性，属性值可以是：left、center、right。标题标签作为标题使用，并且依据重要性递减。h1 标签因为重要，尽量少用，不要动不动就向你扔了一个h1。 一般h1 都是给logo使用，或者页面中最重要标题信息。

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

段落标签具有align属性，属性值可以是：left、center、right。

  1. 水平线标签
    水平线标签水平线可将段落与段落之间隔开，使得文档结构清晰，层次分明。水平线标签是一个单标签，基本语法格式如下：
<hr />是单标签

水平线标签的具有的属性介绍：
1）align：设定线条置放位置。属性值可选择：left right center。
2）size：设定线条粗细。以像素为单位，内定为2。
3）width：设定线条长度。可以是绝对值（单位是像素）或相对值。如果设置为相对值的话，内定为100%。
4）color：设置线条颜色。
5）noshade：不要阴影，即设定线条为平面显示。若没有这个属性则表明线条具阴影或立体。

  1. 换行标签
    HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，就会自动换行。但若希望某段文本强制换行显示，就需要使用换行标签，换行标签也是单标签，其基本语法如下：
<br />
  1. div span标签(html排版标签中的重点标签)

首先，div 和 span是没有语义的，他们是我们网页布局主要的2个标签，用法相似，盒子div 就是 division 的缩写，也就是分割，分区的意思。span, 是跨度，范围的意思。 但div使用是必须独占一行，span则不换行。

基本语法格式：

<div> 这是一个div </div>  
<span>这是一个span</span>
  1. 文本格式化标签
    在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
标签 显示效果
<b></b>和<strong></strong> 文字以粗体方式显示(XHTML推荐使用strong)
<i></i>和<em></em> 文字以斜体方式显示(XHTML推荐使用em)
<s></s>和<del></del> 文字以加删除线方式显示(XHTML推荐使用del)
<u></u>和<ins></ins> 文字以加下划线方式显示(XHTML推荐使用ins)
  1. 内容居中标签
    只要是在这个标签里面的内容，都会居于浏览器的中间，其语法格式如下：
<center> 该内容在浏览器的中间位置显示 </center>

超链接

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

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

href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用。
target：用于指定链接页面的打开方式，其取值常用的有_self和_blank两种，其中_self为默认值，在同一个网页中显示; _blank为在新窗口中打开方式。以及_parent：在父窗口中显示，_top：在顶级窗口中显示。

创建超链接的三种方式

  1. 外部链接：可链接到外部文件或者链接到外部地址，如
<a href="http://www.baidu.com" target="_blank">百度</a>
  1. 内部链接：可链接到内部文件(直接链接内部页面名称即可 )
< a href="index.html"> 首页 </a >
  1. 如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
< a href="#"> 首页 </a >
  1. a标签不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

锚点定位

给超链接定义一个名字，让他在本页面或者其他页面的的不同位置进行跳转。如点击回到顶部，让其回到页面最顶端。

  1. 创建一个锚点，即超链接要跳转到的那个特定位置，可以使用name或者id属性来标识。效果如下：
<h3 id="name1">这是页面最顶端</h3>
  1. 使用超链接跳转
<a href="#name1">回到锚点</a>

值得注意的是：a标签是文本级的标签，a就是可以当做文本来处理，所以a标签尽量不要包含其他块级元素，如div和p，当然你可以这么写，不会报错，但是这样并不利于seo优化。

图片标签

img标签，是image的缩写；要想在网页中显示图像就需要使用图像标签

其基本语法格式如下：

<img src="图像URL" />

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

我们总结一下img标签的相关属性如下，

属性 属性值 显示说明
src 图片路径 相对路径或者绝对路径
alt 替换文本 图片显示不出来时的替换文本
title 悬停文本 鼠标悬停时显示的内容
width 像素（XHTML不支持使用页面百分比） 图像的宽度
height 像素（XHTML不支持使用页面百分比） 图像的高度
border 数字 设置图像边框

我们来解释一下相对路径和绝对路径：
相对路径从文件本身出发，使用 . /或者省略./和 ../ 分表代表当前目录和上一层目录来找到所用资源路径

<!-- 当前目录中的图片 -->
<img src="当前目录下的.jpg">
<img src="./当前目录下的.jpg">
<!-- 上一级目录中的图片 -->
<img src="../上级目录.jpg">

对于相对路径来说，不管项目放到哪里，文件和图片的相对路径关系都是不变的。相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。

绝对路径之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的，直接引入盘符或者网络资源路径，如下：

<!-- 盘符 -->
<img src="F:/前端案例/day12/images/1.jpg">
<!-- 网络资源-->
<img src="http://seopic.699pic.com/photo/50046/5562.jpg_wh1200.jpg">

特殊字符标签

 ：空格 （non-breaking spacing，不断打空格）
<：小于号（less than）
>：大于号（greater than）
&：符号&
"：双引号
'：单引号
©：版权©
™：商标™

特殊字符 描述 字符代码
空格  
< 小于号 <
> 大于号 &gt；
& 与 &amp；
￥ 人民币 ¥
© 版权 &copy；

...
若，我们想把某个会被浏览器解析的标签显示在页面上，就要使用转义字符来代替，如，把<p>显示在网页中

p标签显示：&lt;p&gt;
上一篇下一篇

猜你喜欢

热点阅读