从零开始学前端 - 3. HTML 常用标签_2
作者: 她不美却常驻我心
博客地址: https://blog.csdn.net/qq_39506551
微信公众号：老王的前端分享
每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。
从零开始学前端 - 2. HTML 常用标签_2
- 六 超链接
- 1. URL
- 1.1 绝对 URL
- 1.2 相对 URL
- 1.3 锚点 URL
- 2. target
- 2.1 _self
- 2.2 _blank
- 2.3 _parent
- 2.4 _top
- 3. download
- 七、图片
- 八、框架
- 1. iframe
- 2. frameset + frame
- 九、表格
- 1. table 标签
- 2. caption 标签
- 3. thead 标签
- 4. tbody 标签
- 5. tfoot 标签
- 6. tr 标签
- 7. th 标签
- 8. td 标签
- 9. col & colgroup 标签
- 十、 块级元素、行内元素、行内块级元素
- 十一、 特殊符号
六 超链接
<a>标签定义超链接，用于从一张页面链接到另一张页面或添加锚点，下载文件等作用，元素最重要的属性是 " href " 属性，它指示链接的目标。
<a href="www.baidu.com/" title="百度首页">百度首页</a>
常用属性：
| 属性 | 值 | 效果 |
|---|---|---|
| href | URL | 跳转到指定连接地址 |
| target | _blank / _parent / _top / _self | 如何打开指定连接 |
| download | string | H5新增属性，下载链接的文件 |
在具体讲解之前，我们需要先明白在页面中，路径的问题。网站中，路径的表达方式主要分为三种：
./ 表示当前目录
../ 表示父级目录
/ 表示根目录
例如上图，如果我们想在 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浏览器">
浏览器显示结果：
八、框架
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> 常用属性：
| 属性 | 值 | 效果 |
|---|---|---|
| border | Number | 设置表格边框宽度 |
| colspan | Number | 横向合并单元格 |
| rowspan | Number | 纵向合并单元格 |
| cellpadding | Number | 单元格内容与单元格边框之间的距离 |
| cellspacing | Number | 单元格与单元格之间的距离 |
| bgcolor | color | 设置背景颜色 |
| background | url | 设置背景图片 |
| align | left / 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 的基础。在之前的各种示例中，我们发现有些标签在浏览器中是独占一行的，其他的标签不能和它处于同一行，这种标签，我们称之为块级元素，与之相反的标签，又分为行内块级元素和行内元素。
块级元素的主要特点：
- 独占一行，不与其他任何元素并列。
- 可以设置宽高，宽度默认为父级元素的宽度。‘’
行内元素的主要特点：
- 不独占一行，可以与其他行内元素或行内块级元素并列。
- 不可以设置宽高，标签的宽高完全由内容决定。
行内块级元素的主要特点：
- 不独占一行，可以与其他行内元素或行内块级元素并列。
- 可以设置宽高，宽高默认由内容决定。
- 常见的块级元素： div / h1-h6 / p / ul / ol / dl / li / hr 等等。
- 常见的行内元素：span / a / em / i 等等。
- 常见的行内块级元素：input / button / img 等等。
十一、 特殊符号
我们可以发现，自己写的代码在浏览器中显示的时候，会忽略掉我们手动输入的多个空格和换行符。如果想要让段落的首行缩进两个字节，我们发现敲多个空格是一个无效的办法，实际上，空格也是需要用代码来表示的。我们需要输入4个 （半角空格）或者 2 个 （全角空格）来实现效果。
这是因为在 HTML 中有一些预留字符，想要在浏览器中显示的话必须被替换为字符实体。例如说上面提到的空格，还有不能使用小于号（<）和大于号（>），因为浏览器会误认为它们是标签。
一般我们记住 ， ，和版权符号© ©这几个常用的特殊符号即可，其他的可以现用现查。想要了解更多的特殊符号应该如何表示，请 点击这里查看更多
至此，我们的 HTML 部分已经大体说完了，接下来的部分就是 CSS 了。总而言之， HTML 是相当简单易学的，翻来覆去就是几个标签和常用属性的记忆。针对初学者，稍微困难的部分是如何用语义化标签来搭建一个网站。
百看不如一练。想要熟练的掌握 HTML 和 CSS ，只是多加练习的事情。多去练习，多记，多敲。慢慢的你就会记住他们，熟能生巧，千万不要手懒。学习任何事情最重要的都是练习，只有不断的练习，才能真正的掌握它们。
种一棵树，最好的时间是十年前，其次是现在。人的一生，总的来时就是不断学习的一生。
蚕吐丝，蜂酿蜜。人不学，不如物。与其纠结学不学，学了有没有用，不如学了再说。
等你学会了之后，你才拥有资格说“啊，这个东西学了没用。”
每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。您的评论和关注是我更新的动力!
请大家关注我的微信公众号，我会定期更新前端的相关技术文章，欢迎大家前来讨论学习。
都看到这里了，三连一下呗~~~。点个收藏，少个 Bug 。
从零开始学前端 - 3. HTML 常用标签_2相关推荐
- 从零开始学前端 - 2. HTML常用标签_1
作者: 她不美却常驻我心 博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享 每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
- 从零开始学前端 - 5. CSS常用属性
作者: 她不美却常驻我心 博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享 每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
- 从零开始学前端：HTML的一些文本格式化标签、快捷键、和特殊符号 --- 今天你学习了吗？（CSS：Day02）
从零开始学前端:程序猿小白也可以完全掌握!- 今天你学习了吗?(CSS) 复习:从零开始学前端: HTML框架和VS Code安装 - 今天你学习了吗?(CSS:Day01) 文章目录 从零开始学前端 ...
- 从零开始学前端：中括号代替点操作，获取对象，自定义标签属性 --- 今天你学习了吗？（JS：Day3）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:初识函数,合法属性与自定义属性 - 今天你学习了吗?(JS:Day2) 文章目录 从零开始学前端:程序猿小白 ...
- 从零开始学前端：标签渐变和媒体查询 --- 今天你学习了吗？（CSS：Day25）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS:Day25) 复习:从零开始学前端:grid布局和音频和媒体查询 - 今天你学习了吗?(CSS:Day24) 文章目录 从零开始学 ...
- 从零开始学前端：列表标签 --- 今天你学习了吗？（CSS：Day06）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:表单制作 - 今天你学习了吗?(CSS:Day05) 文章目录 从零开始学前端:程序猿小白也可以完全掌握! ...
- 从零开始学前端：grid布局和音频 --- 今天你学习了吗？（CSS：Day24）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:OPPO商城轮播图 - 今天你学习了吗?(CSS:Day23) 文章目录 从零开始学前端:程序猿小白也可以 ...
- 从零开始学前端：浮动 --- 今天你学习了吗？（CSS：Day15）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS盒子模型属性 - 今天你学习了吗?(CSS:Day14) 文章目录 从零开始学前端:程序猿小白也可以 ...
- 从零开始学前端：伪元素和盒子模型 --- 今天你学习了吗？（CSS：Day13）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS元素模式的转换和CSS三大特性 - 今天你学习了吗?(CSS:Day12) 文章目录 从零开始学前端 ...
最新文章
- 赵方庆 北京生科院Computational strategies in exploring circular RNAs 探索环状rna的计算策略
- tensorflow兼容问题
- 继承：深度优先和广度优先
- 【华为】华为模拟器模拟静态、动态NAT、PAT技术
- 使用Docker打包发布Django应用
- textarea样式
- java后台http请求完成之后怎么setcookie_关于HTTP的那些事和cookie
- 信息学奥赛一本通（1261：【例9.5】城市交通路网）
- 比特币一种点对点的电子现金系统是哪一年诞生的_驭凡学堂 中本聪创造比特币的原因是为了解决技术难题...
- mysql gtid模式主键主突_Mysql基于GTID主从复制
- n1 linux wifi,【教程】N1在EMMC安装LINUX和HASSIO实现智能家居中枢
- linux进程号转换成16进制,linux-shell 脚本转换 十六进制 十进制 八进制 二进制
- dcp-9020cdn复印位置有_兄弟DCP-9020CDN打印机驱动下载
- 3种方式教你怎样显示手机wifi密码，不再愁密码忘记了
- python 合并内容相同单元格
- Zigbee入门指导（二）mdash;mdash;运行Zigbee例程
- 12对胸椎对应体表标志_腰椎的体表标志_第一至第五腰椎怎么定位相应体表标志怎么对应_中国武警总医院...
- 华为p10和p10plus区别_华为P10和华为P10Plus怎么样？哪个更值得买？华为P10与P10Plus区别对比...
- PMP证书真的烂大街了？
- NO.74——《人工智能·一种现代方法》通过搜索进行问题求解 学习笔记