HTML——文本制作

显示效果如图:

一:概念

使用 标签定义超链接,其中,href属性指定了超链接的目标,本例中即跳转到百度,如:

百度搜索

二:href 属性

href 属性是超链接最重要的属性,它用于指定超链接目标的 URL,典型的超链接格式如下:

 

其中,目标URL有三种类型:

  1. URL (anchor URL):指向同一页面内某一位置;

  2. 相对 URL (relative URL):指向同一网站的不同文件;

  3. 绝对 URL (absolute URL):指向另一个网站。

提示:

  • URLUniform Resource Locator,统一资源定位器

  • 简介
  • 定义了一个指向#toc1目标的锚链接。所以,点击之后会定位到相应行数

  • 简介

    ​​​​id属性值为toc1的位置。所以,完整的一对页面内导航的写法为:

  • 简介
    <开始标签 id="id值内容">内容<结束标签>

    此外,当href="#"时,默认回到网页顶部位置。

三:发送电子邮件

href属性值设置为mailto:邮箱地址,这样做可以调起邮箱应用,发送邮件到对应地址。

例如:

HTML

指定了 target="_blank",所以在点击之后,将在新标签中打开链接

四:分级标题

使用p元素定义段落。p元素是HTML中最常用的元素之一

例 :

超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的标记语言。

使用
标签在段落中换行,例:

超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的标记语言。
在级联样式表单(CSS)和JavaScript的帮助下,HTML已经成功构建了一整套面向Web的开发与应用平台

五:列表

HTML中,我们可以创建无序列表、有序列表和描述列表,而且一个列表中可以嵌套另一个列表。

通常,列表都是由父元素和子元素构成的,父元素用于指定要创建的列表的类型,子元素用于指定要创建的列表项目类型。

三种列表类型组成元素如下:

| 类型 | 父元素 | 子元素|
| ------------ | ------------ |
| 有序列表 | ol | li|
| 无序列表 | ul | li|
| 描述列表 | dl| dt, dd|

  • ol: order list

  • ul: unorder list

例如:

  
    

HTML里程碑

1995年11月24日
HTML2.0发布,对应的IETF文档为RFC 1866
1997年1月14日
HTML 3.2以W3C推荐标准的形式发布。 随后的HTML标准都由W3C组织发布。
1997年12月18日
HTML 4.0发布。
2014年10月28日
HTML5 发布。
2016年11月1日
HTML 5.1发布。

六:最基本的表格

HTML表中,一个表格(table)由行(tr)组成,每一行由单元格组成,单元格有标题单元格(th)和数据单元格(td)

  
    
第一行第一个单元格数据 第一行第二个单元格数据
第二行第一个单元格数据 第二行第二个单元格数据

显示效果如图:

HTML——文本制作_第1张图片

这是一个22列的表格,可以看到

元素中包含了两行,即两个元素;每行有两列,即每个中包含两个
元素。

提示:

- tr: table row

- th: table head

- td: table data

七:带边框的表格

指定

元素的border属性值

八:带表头的表格

可以使用

标题单元格进行定义

举例如下:

  
    
通讯录
姓名 电话 备注
李雯 18012311234 家人
王谦 17812311234 同事
周佳 17413511234 高中同学

显示效果如下:

HTML——文本制作_第2张图片

设定了

元素的width属性,改变了表格的宽度

我们使用

元素中,使用元素来定义表格。

举例如下:

  
    
元素设置了表格的标题

数据第一行

元素指定了表头。本例中有三列信息,所以包含了三个元素

并且,我们设置了

元素的属性scope的值为col

九:scope 属性

元素的scope属性用于定义表头数据与单元数据关联的方法。本例中值为col,表示规定的是列的表头。其他的一些值含义如下:

含义
col 单元格是列的表头
row 规定单元格是行的表头
colgroup 单元格是列组的表头
rowgroup 单元格是行组的表头

十:结构更清晰的表格

为了使表格的整体结构更加的清晰,我们还能够使用

运动会跑步成绩
长度 李雯 王谦 周佳
100米 14s 16s 13s
200米 26s 23s 25s
400米 70s 73s 69s
总用时 110s 112s 107s

显示效果如图:

HTML——文本制作_第3张图片

十一:单元格跨越多行或多列的表格

可以设定colspanrowspan 属性让

单元格跨越多行或多列。

表格代码如下:

  
    
彩排安排
时间 周一 周二 周三
上午8点 开场舞 歌曲串烧
上午9点 小品 相声 大型魔术
上午10点 杂艺表演 乐队歌曲

显示效果如图:

HTML——文本制作_第4张图片

在此例中,表格头部第7行,scope="rowgroup"指定了该单元格是行组的表头。表格中,第3行的第3列和第4列为合并单元格,我们设置第18colspan="2",表示该单元格跨越两列;同理,第24行设置rowspan="2"表示该单元格跨越两行。

所以,要设置单元格跨越多行,只需设置属性rowspan="n"; 设置单元格跨越多列,只需设置属性colspan="n"n是单元格要跨越的行数或列数。

你可能感兴趣的:(html,web)