链接:

<a></a>:

网页中的连接是通过<a>元素建立的,<a>元素拥有一个重要的特性——href,href特性的值设定了链接的目标,即网站用户单机连接时所到达的页面地址。

当网站用户单机位于连接起始标签<a>和结束标签</a>之间的内容时,就会打开href特性所设定的页面。

如果链接之前另一个网站,那么href特性的值必须是另一个网站的完整Web地址,也就是所谓的绝对URL(Uniform Resource Locator/统一资源定位器)。

target:如果希望在新窗口中打开连接,就要用到target特性,并把这个特性的值设置为_blank。

如:<a href="https://www.baidu.com/"target="_blank">baidu</a>

mailto:使用mailto元素可以建立email连接,email连接的href特性之以mailto开始,然后添加一个收件人地址。单击email连接会启动网站用户计算机上的email程序,并把这个email作为收件人。

如:<a href="mailto:497093xxx@qq.com">497093xxx</a>

链接到当前网页的某个特定位置:在链接到页面的特定位置之前,需要确定链接所要到达的目标位置。确定目标位置时,需要使用id特性。

如:<a id="123">转到位置</a>

转到————><a href="#123">跳转位置</a>

当然这个方法也可以反向使用,即先定义跳转,在设置转到位置。

图像:

<img>:

需要使用<img>元素来向网页中添加图像,这是一个空元素(即没有结束标签的元素),<img>元素必须包含以下两个特性:

src:这个特性告诉浏览器在何处可以找到所需的图像文件。特性值通常是一个指向网站内某个图像的相对URL。

alt:这个特性对图像进行文本说明,在无法查看图像的时候,这段说明会对图像进行描述。

title:这个特性提供有关图像的附加信息,在大多数浏览器中,鼠标光标悬停在图像上时会以提示的方式显示title特性的内容。

height:这个特性以像素为单位来指定图像的高度。

width:这个特性以像素为单位来指定图像的宽度。

注:图像往往比构成页面中的其余HTML代码耗费更多的加载时间。

所以,一种好的解决办法是事先指定图像的大小,这样浏览器就可以为正在加载的图像留出合适的空间余量,同时继续显示页面上的其余文本。

在代码中插入图像的位置将对如何显示图像产生影响:

1.在段落之前:段落会在图像之后另起一行开始显示。

2.在段落的起始处:段落文本的第一行将于图像的底部对齐。

3.在段落之中:图像将位于它所在段落的文字之中。

<img src = "../images/yxshz.jpg" alt="=隐形守护者——肖途,庄晓曼" title="隐形守护者" height="175" width="250" /><p>庄晓曼天下第一</p><hr /><p><img src = "../images/yxshz.jpg" alt="=隐形守护者——肖途,庄晓曼" title="隐形守护者" height="175" width="250" />庄晓曼天下第一</p><hr /><p>庄晓曼<img src = "../images/yxshz.jpg" alt="=隐形守护者——肖途,庄晓曼" title="隐形守护者" height="175" width="250" />天下第一</p>

创建图像的三条规则:

1.使用正确的格式保存图像:当图片中含有多种不同颜色时,应该将其保存为JPEG文件;当图片的某个区域填充了完全相同的颜色,它就被称为平面彩色,应该将其保存为GIF或PNG格式。

2.以正确的大小保存图像:在保存网站中所使用的图像时,它的宽度和高度应该与你希望它在页面中显示的大小保持一致。

3.以像素来衡量图像:当你设定用于屏幕显示的图像大小时,应该使用像素来设定图像的大小。

表格:

<table></table>:
<table>元素用来创建表格,表格的内容逐行编写。

<tr></tr>(table row):

<tr>标签用来表示每行开始。<tr>之后是一个或多个<td>元素,每个<td>元素代表其所在行的一个单元格。

<td></td>(table data):

表格中的每个单元格用<td>元素来表示。

<table><tr><td>15</td><td>15</td><td>30</td></tr><tr><td>45</td><td>15</td><td>35</td></tr><tr><td>55</td><td>75</td><td>35</td></tr></table>

<th></th>(table heading):
<th>元素和<td>元素的用法是一样的,但它的作用是表示列或行的标题。

即使一个单元格中没有任何内容,仍需使用<td>或<th>元素来表示一个空的单元格存在。

可在<th>元素上使用scope特性来表明此元素是列标题还是行标题:row表明是一个行标题,col表明是一个列标题。

<table><tr><th></th><th scope="col">Saturday</th><th scope="col">Sunday</th></tr><tr><th scope="row">Tickets sold:</th><td>120</td><td>135</td></tr><tr><th scope="row">Total sales:</th><td>$600</td><td>$675</td></tr></table>

跨列/行:

有时候需要让表格的某个单元格跨越多个列/行,我们可以在<th>或<td>元素中使用colspan特性来表明单元格索要跨越的列/行数。

<table><tr><th></th><th>9am</th><th>10am</th>    <th>11am</th><th>12am</th>    </tr><tr><th scope="row">Monday</th><td colspan="2">Geography</td><td>Math</td><td>Art</td></tr><tr><th scope="row">Tuesday</th><td colspan="3">Gym</td><td>Home Ec</td></tr></table>

<table><tr><th></th><th>ABC</th><th>BBC</th><th>CNN</th></tr><tr><th scope="row">6pm~7pm</th><td rowspan="2">Movie</td><td>Comdy</td><td>News</td></tr><tr><th scope="row">7pm~8pm</th><td>Sport</td><td>Current Affairs</td></tr></table>

长表格:

有三种元素有助于区分表格的主体内容,第一行和最后一行。

<thead></thead>:

表格的标题应放在<thead>元素中。

<tbody></tbody>:

表格的主体部分应放在<tbody>元素中。

<tfoot></tfoot>:
表格的脚注部分应放在<tfoot>元素中。

<table><thead><tr><th>Date</th><th>Income</th><th>Expenditure</th></tr></thead><tbody><tr><th>1st January</th><td>250</td><td>36</td></tr><tr><th>2nd January</th><td>285</td><td>48</td></tr><!-- additional rows as above --><tr><th>3rd January</th><td>129</td><td>64</td></tr></tbody><tfoot><tr><th>ALL</th><td>7824</td><td>1241</td></tr></tfoot></table>

转载于:https://www.cnblogs.com/banbianfengxue/p/10523847.html

html的入门——从标签开始(2)相关推荐

  1. 【Educoder】HTML答案 (HTML入门——基础、HTML入门——基本标签、HTML——表单类的标签)

    文章目录 HTML入门--基础 初识HTML:简单的Hello World网页制作 HTML结构:自我简介网页 HTML入门--基本标签 创建第一个 HTML 标签 创建 h2-h6标签 创建 p 标 ...

  2. educoder Git入门之标签

    第1关:创建标签 #创建gitTraining文件夹 mkdir gitTraining#进入gitTraining文件夹 cd gitTraining#将gitTraining初始化为一个本地仓库 ...

  3. html css img标签鼠标事件,HTML+CSS入门 img标签学习

    本篇教程介绍了HTML+CSS入门 img标签学习,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 1.img标签中的img其实是英文image的缩写,所以img标签的作用 ...

  4. marquee标签 html5,HTML+CSS入门 marquee标签详解

    本篇教程介绍了HTML+CSS入门 marquee标签详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 在W3C官方文档中找不到这个标签,也就是说不是官方推荐的标签 但 ...

  5. docker快速入门_Docker标签快速入门

    docker快速入门 by Shubheksha 通过Shubheksha Docker标签快速入门 (A quick introduction to Docker tags) If you've w ...

  6. Qt图形界面编程入门(标签与槽机制习题分享)

    标签对象初始显示0,每次单击标签对象后,其显示内容就加1,依次变为1.2.3等. #ifndef DIALOG_H #define DIALOG_H#include <QDialog> # ...

  7. HTML零基础入门之标签、属性选择器、元素选择器

    这里写目录标题 一.什么是 `HTML5` 二.`HTML5 ` 新增标签 三.多媒体音频标签 四.多媒体视频标签 五.新增 input 标签 六.新增表单属性 七.`CSS3 ` 属性选择器(上) ...

  8. MyBatis入门-association标签使用

    MyBatis高级结果映射 本篇主要介绍 association一对一查询 介绍-一对一映射 一对一映射因为不需要考虑是否存在重复数据,使用简单,可以直接使用MyBatis自动映射. 实践-自动映射 ...

  9. Spring Security入门篇——标签sec:authorize的使用

    Security框架可以精确控制页面的一个按钮.链接,它在页面上权限的控制实际上是通过它提供的标签来做到的 Security共有三类标签authorize  authentication   acce ...

最新文章

  1. Windows 2003 + ISA 2006+单网卡×××配置(4)
  2. 用ASP实现隐藏链接方法
  3. 单例销毁_【PHP设计模式】单例模式
  4. 汇川am600运动指令详解_汇川中型PLC AM400系列产品型号说明及功能介绍
  5. java输出栈的弹出序列_剑指offer:栈的压入、弹出序列(Java)
  6. android elf 加固_APK一键自动化加固脚本
  7. HADOOP高可用机制
  8. 如何提高计算机网络速度,如何提高电脑网速?
  9. S5p4418 启动配制分析
  10. spring security实现注解式权限管理时不成功,注解@Secured 无效
  11. Python爬取、可视化分析B站大司马视频40W+弹幕
  12. 虚拟化操作系统ESXi 6.7安装配置详细步骤图文
  13. 学习笔记之MOOC《计算机程序设计C++》第5周编程作业
  14. 用水浒传来学习OKR
  15. 棋牌游戏网站分析——远航游戏中心
  16. linux gif录制工具,Linux下的GIF录制
  17. 网易云音乐歌单制作词云图
  18. 在调试的时候碰到了Render process gone.问题
  19. Leetcode 1905. Count Sub Islands
  20. 图文翻页-兼容IE8和Chrome浏览器

热门文章

  1. js唤醒facebook与line的分享
  2. Linux-无密码访问、远程拷贝、无密码登录
  3. 华为云“云上先锋”·AI主题赛(垃圾分类)-Top7复盘
  4. Win10蓝牙开关消失解决方法
  5. app接口设计之signature签名的php实现
  6. 【Day2.2】茶卡盐湖
  7. 第七史诗无限显示服务器连接中,第七史诗神器满破是什么意思?神器满破攻略...
  8. Python竟然可以画漫画!漫画版的故宫导游图,来袭!
  9. 中控考勤机连服务器显示1007,中控智慧ZK-S1007动态人脸识别考勤门禁终端
  10. RabbitMQ学习笔记(四)-消息确认机制