从零开始学前端 - 3. HTML 常用标签_2

作者: 她不美却常驻我心
博客地址: https://blog.csdn.net/qq_39506551
微信公众号:老王的前端分享
每篇文章纯属个人经验观点,如有错误疏漏欢迎指正。转载请附带作者信息及出处。


六 超链接

  <a>标签定义超链接,用于从一张页面链接到另一张页面或添加锚点,下载文件等作用,元素最重要的属性是 " href " 属性,它指示链接的目标。

	<a href="www.baidu.com/" title="百度首页">百度首页</a>

常用属性:

属性效果
hrefURL跳转到指定连接地址
target_blank / _parent / _top / _self如何打开指定连接
downloadstringH5新增属性,下载链接的文件

在具体讲解之前,我们需要先明白在页面中,路径的问题。网站中,路径的表达方式主要分为三种:
    ./ 表示当前目录
    ../ 表示父级目录
    / 表示根目录
示例目录结构
例如上图,如果我们想在 index.html 中引入其他几个文件,我们在 html 中的写法

<link rel="stylesheet" href="./../css/index.css">
<!-- 从index.html所在目录开始,返回上一级目录,进入 CSS 文件夹 ,找到文件 index.css -->
<link rel="stylesheet" href="../css/common/common.css">
<!-- 从index.html所在目录开始,返回上一级目录,进入 CSS 文件夹,进入 common 文件夹,找到文件 index.css -->
<img src="/test/images/index.jpg">
<!-- 从根目录下找到 text 文件夹,进入 images 文件夹 ,找到文件 index.jpg -->

在网站内,一般情况下,./ 可以省略,起始路径默认从当前文件开始。/ 的根目录一般都是由 web服务器进行设置的。例如说在 Nginx 中设置如下规则:

location / {
	root    E:/workSpace/;
	autoindex on;
}

  这个时候,只要是在 Nginx 下监管的网页,在路径开头输入 / 时,都会从 E 盘下的 workSpace 文件夹开始。例如上方的 index.jpg 在电脑中的实际位置应该是 E:\workSpace\test\images\index.jpg,但通过 Nginx 设置根目录之后,即可通过 / 直接访问到 workSpace 文件夹下。

  路径主要分为绝对路径相对路径两种:
  绝对路径:绝对路径就是文件或目录在硬盘上真正的路径,
例如:E:\workSpace\test\images\index.jpg 代表了 index.jpg 的物理绝对路径。而http://localhost:7020/test/images/index.jpg 也代表了一个 URL 的绝对路径。
  相对路径:相对与某个目录或文件的路径。例如:"./../images/index.jpg">中,"./" 代表当前目录,"../" 代表上级目录。

1. URL

1.1 绝对 URL

  指向另一个站点,例:<a href="http://www.baidu.com/">百度首页</a>

1.2 相对 URL

  指向站点内的某个文件,例:<a href="./index.html">网站首页</a>

1.3 锚点 URL

  指向页面中的锚点位置,例:<a href="#title">网站标题</a>
  锚点链接需要配合 id 一起使用,通过 " # " + " id " 来跳转到页面的指定位置。

<a href="#title">跳转到标题位置</a>
...  ...
<div id="title"></div>

2. target

  target 属性规定在何处打开链接文档。具有四种情况:

效果
_self (默认值)在当前标签页打开目标网址
_blank在新标签页中打开目标网址
_parent在当前文档的父窗口打开网址
_top无视框架在当前标签页打开网址
frameName (iframe等框架的 name)在相应的框架内打开目标网址

2.1 _self

   _self 为默认值,在当前浏览器窗口中打开连接。
例:

<a href="./index.html">首页</a>
<a href="./index.html" target="_self">首页</a>

  两者的效果完全一致。

2.2 _blank

   在一个新的浏览器窗口中打开连接。

2.3 _parent

   如果当前页是通过框架标签 <iframe></iframe><frame></frame> 引入的,那框架标签所在页面则被称为当前文档的父文档,父文档所在窗口,被称为父窗口。"_parent "的目标,就是在父窗口中打开目标链接,若无父文档,则在当前浏览器窗口中打开目标网址。

2.4 _top

   框架标签 <iframe></iframe>内嵌套的是一个新的 HTML 文档,在这个新的文档中,还可以继续嵌套 <iframe>,"_parent"只能在当父窗口中打开目标网址,"_top"则可以在最上层的,也就是浏览器窗口中打开目标网址。

3. download

   H5 新增属性,当 <a>标签具有这个属性时,浏览器会直接尝试下载目标文件。

七、图片

  • src 属性用于指定图片的路径。
  • alt  属性用于描述图片,有利于搜索引擎的抓取。当图片加载失败时,也会显示 alt 中的文字。
  • title 属性是 HTML 所有标签共同具有的属性,当用户的鼠标移动到具有该属性的元素上时,会显示 title 中的文字。
    例:
	<img src="./images/browser_chrome.png.jpg" title="Chrome浏览器" alt="Chrome浏览器">
	<img src="./browser_chrome.png.jpg" title="Chrome浏览器" alt="Chrome浏览器">

浏览器显示结果:
Chrome浏览器

八、框架

1. iframe

  我们可以通过<iframe>标签来实现一个内嵌框架,就是在当前页面通过该标签再嵌入一个页面。通过 src 属性指向链接地址。
例:

<div>
	<span>我是父页面</span>
	<iframe src="./children.html" frameborder="0"></iframe>
</div>

浏览器效果:
浏览器效果

2. frameset + frame

  我们通常使用<iframe>来实现插入网页的功能,因为它更加的灵活。自作者从事相关工作以来,没有看到任何网站使用了该标签。如想了解更多,请自行百度。

九、表格

   在过去,页面布局常常用表格来完成,但随着浏览器的发展,这种布局方式已经被放弃了,现在的网页均为 DIV + CSS 的方式进行布局。但这不意味着表格已经一无是处了,在实际开发中,表格依然是最好的数据显示方式。

1. table 标签

   <table> 标签用来定义 HTML 表格。一个简单的 HTML 表格由 table 元素以及一个或多个 <tr><th><td> 元素组成。一个完整的 HTML 表格也应该包括 <caption><col><colgroup><thead><tfoot> 以及 <tbody> 元素。
   <table> 常用属性:

属性效果
borderNumber设置表格边框宽度
colspanNumber横向合并单元格
rowspanNumber纵向合并单元格
cellpaddingNumber单元格内容与单元格边框之间的距离
cellspacingNumber单元格与单元格之间的距离
bgcolorcolor设置背景颜色
backgroundurl设置背景图片
alignleft / center / right设置单元格内文本对齐方式

  重点在于加粗的两个属性,样式的事情我们通常都交给 CSS 来做,实现结构层与表现层进行分离。

2. caption 标签

   <caption> 标签定义表格标题。每个表格只能定义一个标题。文字会默认居中,并放在表格的上方。

3. thead 标签

   <thead> 标签定义表格的表头 <thead> 标签应该与 <tbody><tfoot> 标签组合使用。

4. tbody 标签

   <tbody> 标签定义表格主体。

5. tfoot 标签

   <tfoot> 标签定义表格的页脚。

6. tr 标签

   <tr> 标签定义表格行,也就是说有一个表格有多少行,就有多少个 <tr></tr>

7. th 标签

   <th> 标签定义表格的表头,<th> 默认带有加粗和居中的效果。

8. td 标签

    <td> 标签定义表格单元格,一个 td 标签,就代表着一个标准的单元格。

9. col & colgroup 标签

   <col><colgroup> 均是为了方便对 表格的列进行格式设置的标签,我们一般不会使用这两个标签,而是使用 CSS 或者表格自带的数据对表格样式进行约束。
例:

<table border="1" cellpadding="5" cellspacing="10">
	<caption> HTML 表格的标签及作用 </caption>
	<thead>
		<tr>
			<th>标签</th>
			<th>作用</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td> table </td>
			<td> 定义一个 HTML 表格</td>
		</tr>
		<tr>
			<td> caption </td>
			<td> 定义表格的标题 </td>
		</tr>
		<tr>
			<td> thead </td>
			<td> 定义表格的表头 </td>
		</tr>
		<tr>
			<td> tbody </td>
			<td> 定义表格的正文主题 </td>
		</tr>
		<tr>
			<td> tfoot </td>
			<td> 定义表格的页脚 </td>
		</tr>
		<tr>
			<td> tr </td>
			<td> 定义表格的行</td>
		</tr>
		<tr>
			<td> th </td>
			<td> 定义表格表头</td>
		</tr>
		<tr>
			<td> td </td>
			<td> 定义表格中的标准单元格</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td colspan="2">从零开始学前端</td>
		</tr>
		<tr>
			<td rowspan="2">发布地址</td>
			<td>CSDN</td>
		</tr>
		<tr>
			<td>微信公众号</td>
		</tr>
	</tfoot>
</table>

浏览器预览如下:
表格预览

十、 块级元素、行内元素、行内块级元素

  块级元素和行内元素是 HTML 标签的重要区别,也是 CSS 的基础。在之前的各种示例中,我们发现有些标签在浏览器中是独占一行的,其他的标签不能和它处于同一行,这种标签,我们称之为块级元素,与之相反的标签,又分为行内块级元素和行内元素。

块级元素的主要特点:

  1. 独占一行,不与其他任何元素并列。
  2. 可以设置宽高,宽度默认为父级元素的宽度。‘’

行内元素的主要特点:

  1. 不独占一行,可以与其他行内元素或行内块级元素并列。
  2. 不可以设置宽高,标签的宽高完全由内容决定。

行内块级元素的主要特点:

  1. 不独占一行,可以与其他行内元素或行内块级元素并列。
  2. 可以设置宽高,宽高默认由内容决定。
  • 常见的块级元素: div / h1-h6 / p / ul / ol / dl / li / hr 等等。
  • 常见的行内元素:span / a / em / i 等等。
  • 常见的行内块级元素:input / button / img 等等。

十一、 特殊符号

  我们可以发现,自己写的代码在浏览器中显示的时候,会忽略掉我们手动输入的多个空格和换行符。如果想要让段落的首行缩进两个字节,我们发现敲多个空格是一个无效的办法,实际上,空格也是需要用代码来表示的。我们需要输入4个 &nbsp;(半角空格)或者 2 个&emsp;(全角空格)来实现效果。
  这是因为在 HTML 中有一些预留字符,想要在浏览器中显示的话必须被替换为字符实体。例如说上面提到的空格,还有不能使用小于号(<)和大于号(>),因为浏览器会误认为它们是标签。
  一般我们记住&nbsp;&emsp;,和版权符号© &copy;这几个常用的特殊符号即可,其他的可以现用现查。想要了解更多的特殊符号应该如何表示,请 点击这里查看更多


  至此,我们的 HTML 部分已经大体说完了,接下来的部分就是 CSS 了。总而言之, HTML 是相当简单易学的,翻来覆去就是几个标签和常用属性的记忆。针对初学者,稍微困难的部分是如何用语义化标签来搭建一个网站。
  百看不如一练。想要熟练的掌握 HTML 和 CSS ,只是多加练习的事情。多去练习,多记,多敲。慢慢的你就会记住他们,熟能生巧,千万不要手懒。学习任何事情最重要的都是练习,只有不断的练习,才能真正的掌握它们。


种一棵树,最好的时间是十年前,其次是现在。人的一生,总的来时就是不断学习的一生。
蚕吐丝,蜂酿蜜。人不学,不如物。与其纠结学不学,学了有没有用,不如学了再说。
等你学会了之后,你才拥有资格说“啊,这个东西学了没用。”


每篇文章纯属个人经验观点,如有错误疏漏欢迎指正。转载请附带作者信息及出处。您的评论和关注是我更新的动力!
在这里插入图片描述
请大家关注我的微信公众号,我会定期更新前端的相关技术文章,欢迎大家前来讨论学习。
都看到这里了,三连一下呗~~~。点个收藏,少个 Bug 。

  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论 1

打赏作者

她不美却常驻我心

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值