简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > HTML视频教程,第3章 HTML超文本(上)
Blogger Information
Blog 11
fans 0
comment 1
visits 7835
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML视频教程,第3章 HTML超文本(上)
鬼牛阿飞
Original
628 people have browsed it

课程目录：
1 HTML链接
2 HTML超链接打开方式
3 HTML超链接提示文字
4 HTML超链接书签
5 HTML表格
6 HTML图像

1 HTML链接

1.给文字添加超链接;2.给图像添加超链接

2 HTML超链接打开方式

打开方式分为本页打开和新浏览器窗口打开,其中_self为默认当前窗口打开，_blank创建新窗口打开访问

  1. <a href="#" target="_self"></a>
  2. <a href="#" target="_blank"></a>

3 HTML超链接提示文字

<a href="#" target="_self" title="提示文本"></a>
释义：有时候超链接文字不足以说明点击后要链接的内容，所以这个时候，我们需要给超链接添加提示文字，进行描述；

4 HTML超链接书签

  1. <a href="#ceshi">跳转文本一</a>
  2. <p id="ceshi">文本一</p>

锚文本？锚（书签）用于在某个页面内不同位置的跳转，锚文本a标签，链接标签的name属性，一个页面可以定义多个锚，通过超链接的href属性跳转到对应的锚点

  1. <a href="#ceshi">跳转文本二</a>
  2. <a name="ceshi">文本二</a>

5 HTML表格

表格均有若干行(tr标签定义),每行被分为若干个单元格(td标签定义)，单元格cell可以包含文本、图片、列表、段落、表单、表格等

  1. <table>
  2.     <tbody>
  3.         <tr>
  4.             <th>一行一列</th>
  5.             <th>一行二列</th>
  6.         </tr>
  7.         <tr>
  8.             <td>二行二列</td>
  9.             <td>二行二列</td>
  10.         </tr>
  11.     </tbody>
  12. </table>

其中border=”1”，定义的是表格最外面的边框粗细，当border=0，不显示边框

  1. <table width="850" border="1" bordercolor="red" cellspacing="0" cellpadding="10">
  2.     <tbody>
  3.         <tr>
  4.             <th rowspan="2">跨行合并</th>
  5.             <th colspan="2">跨列合并</th>
  6.             <th>表头</th>
  7.         </tr>
  8.         <tr>
  9.             <td>二行二列</td>
  10.             <th>二行三列</th>
  11.             <th>二行四列</th>
  12.         </tr>
  13.     </tbody>
  14. </table>

小结:colspan为跨列合并，rowspan为跨行合并，其他如表头可以通过标签th，标题通过标签caption,单元格边距为cellpadding，表格背景颜色标签bgcolor，标签thead定义头部，标签tbody定义表格主体，标签tfoot定义…

6 HTML图像

a.插入背景图像/设置一张图片为网页背景色
<body background="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587218922930&di=6d3b3554789d7c01fa748f6fcd172088&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fa%2F559e3cb5ceb30.jpg"></body>
b.img插入图像/定义图片的width宽与height高属性,对齐方式align=”center”或bottom,top,left与right
<img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1589034782&di=ecd57e9b20732cf9c482f26448bd41bb&src=http://dpic.tiankong.com/dd/uj/QJ6345888966.jpg" width="200px" height="200px" alt="天空之城">

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！