html5常见用法,HTML5 笔记之 HTML5 的常见用法介绍

阅读目录

一、网页标题、文章标题、文章段落

代码：

这是网页标题

这是文章标题

这是文章的标题

这是一个段落

运行结果为：

这是文章标题

这是文章的标题

这是一个段落

注意：这里看不到网页标题，网页标题会显示在浏览器的网页标签上

文章的标题有 h1-h6 一共6种不同的表示，上面只演示了其中的两种

二、字体大小、字体颜色、字体类型、字体位置、背景颜色

代码：

这是网页标题

改变字体的大小

改变字体的颜色

改变字体的类型

改变字体的位置

改变这段文字的背景颜色

改变字体的大小和字体的颜色

运行结果为：

改变字体的大小

改变字体的颜色

改变字体的类型

改变字体的位置

改变这段文字的背景颜色

改变字体的大小和字体的颜色

注意：颜色可以用英文字母表示，也可以用十六进制码表示

style 属性也可以用于标题，例如：< h1 style="color:blue" > 改变文章标题的颜色 < /h1 >

三、插入图片

代码：

这是网页标题

运行结果为：

注意：< img > 是一个空元素，没有关闭标签

title 属性：当你把鼠标放在图片上方时，会出现提示信息

如何获得图片：在网络上找到一张图片，鼠标右键图片，选择复制图片地址，然后粘贴到 src 属性中即可

四、网页内的超链接、网页间的超链接

代码1：

这是网页标题

点击跳转到大标题

点解跳转到小标题

这是网页内的超链接

这是网页内的超链接

运行结果为：

这是网页内的超链接

这是网页内的超链接

注意：注意 href 属性的值和 id 属性的值，除了 # 这个符号外，其他要相匹配

代码2：

这是网页标题

这是文字链接-点击文字跳转到百度

百度

这是图片链接-点击图片跳转到百度

运行结果为：

这是文字链接-点击文字跳转到百度

这是图片链接-点击图片跳转到百度

五、有序列表、无序列表

代码1：

这是网页标题

这是有序列表：

1. 苹果
2. 香蕉
3. 梨

这是无序列表：

• 狗
• 猫
• 老鼠

运行结果为：

这是有序列表：

苹果

香蕉

梨

这是无序列表：

狗

猫

老鼠

代码2：

这是网页标题

这是嵌套列表：

1. 花

   • 玫瑰
   • 百合

2. 树木

   • 柳树
   • 榕树

运行结果为：

这是嵌套列表：

花玫瑰

百合

树木柳树

榕树

注意：ol 的全称为 order list(有序列表)

ul 的全称为 unorder list(无序列表)

li 的全称为 list(列表)

六、表格制作

代码1：

这是网页标题

头部头部头部

内容内容内容内容内容内容内容内容内容脚注脚注脚注

运行结果为：

头部头部头部内容内容内容

内容内容内容

内容内容内容脚注脚注脚注

注意：thead 的全称为 table head(表格头部)

tbody 的全称为 table body(表格内容)

tfoot 的全称为 table foot(表格脚注)

tr 的全称为 table row(表格行)

td 的全称为 table data(表格数据)

table 标签里面有三个部分，头部(thead)、身体(tbody)、脚部(tfoot)，而这三个部分里面都可以有 表格行(tr)，表格行里面有 表格数据(td)

我们可以注意到，table 标签里面只有规定行的元素，没有规定列的元素，列只能由 表格数据(td) 规定

代码2：

这是网页标题

学号性别姓名

101男张三102男李四103男王五

运行结果为：

学号性别姓名101男张三

102男李四

103男王五

注意：width 属性表示表格占比屏幕宽度的 50%

代码3：

这是网页标题

学生档案学号姓名性别

101张三男102李四男103王五男

运行结果为：

学生档案

学号性别姓名101男张三

102男李四

103男王五

注意：colspan 的全称为 column span(跨列)

colspan 的属性表示让表格中 “学生档案” 这一行的内容横跨3列

代码4：

这是网页标题

学号姓名性别

101张三男102李四103王五

运行结果为：

学号姓名性别101张三男

102李四

103王五

注意：rowspan 属性表示让表格中的内容跨3行

七、其他一些常用元素

代码：

这是网页标题

这里显示粗体

这里显示斜体

这里显示下划线

这里可以
换行

这里是水平线

---

运行结果为：

这里显示粗体

这里显示斜体

这里显示下划线

这里可以

换行

这里是水平线

End~