Web 前端学习笔记之 HTML 入门(2)
来源:互联网 发布:linux wget https 404 编辑:程序博客网 时间:2024/05/01 03:29
HTML 链接(超链接)
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
可以通过使用<a>
标签在 HTML 中创建链接,有两种使用<a>
标签的方式:
- 通过使用 href 属性 - 创建指向另一个文档的链接
- 通过使用 name 属性 - 创建文档内的书签
URL 格式
格式说明:
- 协议(protocol):指定使用的传输协议,如https、http、file等
- 主机名(host):指存放资源的服务器的域名系统(DNS)主机名或IP地址
- 端口号(port):整数,可选,省略时使用方案的默认端口,各种传输协议都有默认的端口号,如http的默认端口为80
- 路径(path):由零或多个“/”符号隔开的字符串,一般用来表示主机上的一个目录或文件地址
- 查询(query):可选,用于给动态网页(如使用CGI、ISAPI、PHP/JSP/ASP/ASP。NET等技术制作的网页)传递参数,可有多个参数,用“&”符号隔开,每个参数的名和值用“=”符号隔开
- 信息片段(fragment):字符串,用于指定网络资源中的片断。例如一个网页中有多个名词解释,可使用fragment直接定位到某一名词解释
HTML 链接语法
<a href="http://www.w3.org">W3C</a>
说明 :
href
属性规定链接的目标- “链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
页面内链接(锚点)
name
属性规定锚点的名称。当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接。
<h1>锚点</h1><p><a href="#test">到test</a></p><p>0</p> <p>0</p> <p>0</p><p>0</p> <p>0</p> <p>0</p><p>0</p> <p>0</p> <p>0</p><p>0</p> <p>0</p> <p>0</p><p>0</p> <p>0</p> <p>0</p><p>0</p> <p>0</p> <p>0</p><p>0</p> <p>0</p> <p>0</p><p>0</p> <p>0</p> <p>0</p><p>0</p> <p>0</p> <p>0</p><p id="test">test</p><p><a href="#">回顶部</a></p><p>0</p> <p>0</p> <p>0</p><p>0</p> <p>0</p> <p>0</p><p>0</p> <p>0</p> <p>0</p><p>0</p> <p>0</p> <p>0</p><p>0</p> <p>0</p> <p>0</p><p>0</p> <p>0</p> <p>0</p><p>0</p> <p>0</p> <p>0</p><p>0</p> <p>0</p> <p>0</p><p>0</p> <p>0</p> <p>0</p>
说明:可以使用
id
属性来代替name
属性,命名锚同样有效
链接目标
通过target
属性,可以定义被链接的文档在何处显示。
<a href="http://www.w3.org" target="_self">W3C(当前窗口)</a><a href="http://www.w3.org" target="_blank">W3C(新窗口)</a><a href="http://www.w3.org" target="abc">W3C(abc)</a><a href="http://www.example.com" target="abc">Example(abc)</a>
相对路径和绝对路径
链接中的特殊符号及其代表的意义
.
代表目前所在目录,相对路径 ..
代表上一级目录,相对路径 ../../
代表上一级目录的上一级目录,相对路径 /
代表根目录,绝对路径在使用相对路径时,使用
.
来表示当前目录,使用..
来表示当前目录的父目录。
HTML 图像
在 HTML 中,图像由 <img>
标签定义,<img>
标签是空标签,只包含属性,没有闭合标签。
定义图像的语法:<img src="url" />
,src
属性的值为图像的URL地址。
<img src="/path/to/img.jpg" alt="替代文字" width="300" height="200">
说明:
alt
属性规定了图像的替代文本。width
和height
属性设置了图像的大小,其值可以为pixels或%。
<img>
标签通常配合<figure>
标签一起使用来表示图像。 <figure>
标签规定了独立的流内容,如图像、图表、照片、代码等等。
<figure> <img src="/path/to/img.png" alt="替代文字"> <figcaption>图片说明</figcaption></figure>
说明:
<figcaption>
元素为figure
添加标题(caption)
HTML 表格
表格由 <table>
标签来定义。每个表格均有若干行(由 <tr>
标签定义),每行被分割为若干单元格(由 <td>
标签定义)。字母 td
指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格标签
<table>
定义表格 <caption>
定义表格标题 <th>
定义表格的表头 <tr>
定义表格的行 <td>
定义表格单元 <thead>
定义表格的页眉 <tbody>
定义表格的主体 <tfoot>
定义表格的页脚 <col>
定义用于表格列的属性 <colgroup>
定义表格列的组实例
<table border="1"> <thead> <tr> <th>浏览器</th> <th>渲染引擎</th> <th>JavaScript 引擎</th> </tr> </thead> <tbody> <tr> <th>Chrome</th> <td>Blink</td> <td>V8</td> </tr> <tr> <th>Opera</th> <td>Blink</td> <td>V8</td> </tr> <tr> <th>Firefox</th> <td>Gecko</td> <td>SpiderMonkey</td> </tr> <tr> <th>Edge</th> <td>EdgeHTML</td> <td>Chakra</td> </tr> </tbody></table>
效果
说明:
- 合并行:在
<td>
标签中设置rowspan
属性可以规定单元格可横跨的行数- 合并列:在
<td>
标签中设置colspan
属性可以规定单元格可横跨的列数- 若要设置
<caption>
,其必须是<table>
的第一个元素- 若需要对全部列应用样式,
<colgroup>
标签将会很有用
参考资料
- w3school
- Web 前端学习笔记之 HTML 入门(2)
- Web 前端学习笔记之 HTML 入门(1)
- Web 前端学习笔记之 HTML 入门(3)
- Web前端HTML5开发入门之HTML
- WEB前端(HTML、XML、CSS、JS)学习笔记
- 前端入门学习笔记(1)--html部分
- WEB前端学习笔记-HTML(上)
- WEB前端学习笔记-HTML(中)
- WEB前端学习笔记-HTML(下)
- 前端入门学习笔记—HTML
- 从零开始,学习web前端之HTML基础
- 从零开始,学习web前端之HTML基础
- web学习笔记之html
- web前端学习--html
- Web前端之HTML
- 前端面试学习笔记之HTML
- 前端学习笔记之HTML DOM操作
- web前端入门知识笔记——html基础(传智播客)
- 字体设计:拉丁字母字体书写方法分类
- 国内有基于GamePlay3D的游戏
- xml与Java对象的转换
- 高性能基础知识
- RandomAccessFile小节
- Web 前端学习笔记之 HTML 入门(2)
- Android学习之activity用法举例
- Pynlpir词性标记集
- 三分钟看懂一致性哈希算法
- Hamming Distance
- 复杂HTML代码深度解析
- golang编译arm平台程序
- Leetcode 159. Longest Substring with At Most Two Distinct Characters (Hard) (cpp)
- Ajax中的eval函数的用法