html5如何添加图片菜鸟教程,菜鸟入门教程 HTML5的常见用法

本篇教程探讨了菜鸟入门教程 HTML5的常见用法，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

<

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

代码：

HTML>

这是网页标题

这是文章标题

这是文章的标题

这是一个段落

运行结果为：

这是文章标题

这是文章的标题

这是一个段落

注意：

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

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

返回顶部

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

代码：

HTML>

这是网页标题

改变字体的大小

改变字体的颜色

改变字体的类型

改变字体的位置

改变这段文字的背景颜色

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

运行结果为：

改变字体的大小

改变字体的颜色

改变字体的类型

改变字体的位置

改变这段文字的背景颜色

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

注意：

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

style 属性也可以用于标题，例如： 改变文章标题的颜色 

返回顶部

三、插入图片

代码：

HTML>

这是网页标题

        

运行结果为：

注意：

 是一个空元素，没有关闭标签

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

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

返回顶部

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

代码1：

HTML>

这是网页标题

点击跳转到大标题

点解跳转到小标题

这是网页内的超链接

这是网页内的超链接

运行结果为：

点击跳转到大标题

点解跳转到小标题

这是网页内的超链接

这是网页内的超链接

注意：

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

代码2：

HTML>

这是网页标题

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

百度

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

        

运行结果为：

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

百度

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

返回顶部

五、有序列表、无序列表

代码1：

HTML>

这是网页标题

这是有序列表：

1. 苹果
2. 香蕉
3. 梨

这是无序列表：

• 狗
• 猫
• 老鼠

运行结果为：

这是有序列表：

苹果香蕉梨

这是无序列表：

狗猫老鼠

代码2：

HTML>

这是网页标题

这是嵌套列表：

1. 花

   • 玫瑰
   • 百合

2. 树木

   • 柳树
   • 榕树

运行结果为：

这是嵌套列表：

花玫瑰百合

树木柳树榕树

注意：

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

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

li 的全称为 list(列表)

返回顶部

六、表格制作

代码1：

HTML>

这是网页标题

头部头部头部

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

运行结果为：

头部头部头部

内容内容内容内容内容内容

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

注意：

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

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

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

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

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

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

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

代码2：

HTML>

这是网页标题

学号性别姓名

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

运行结果为：

学号性别姓名101男张三

102男李四103男王五

注意：

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

代码3：

HTML>

这是网页标题

学生档案学号姓名性别

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

运行结果为：

学生档案学号性别姓名101男张三

102男李四103男王五

注意：

colspan 的全称为 column span(跨列)

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

代码4：

HTML>

这是网页标题

学号姓名性别

101张三男102李四103王五

运行结果为：

学号姓名性别

101张三男102李四103王五

注意：

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

返回顶部

七、其他一些常用元素

代码：

HTML>

这是网页标题

这里显示粗体

这里显示斜体

这里显示下划线

这里可以
换行

这里是水平线

---

运行结果为：

这里显示粗体

这里显示斜体

这里显示下划线

这里可以换行

这里是水平线

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！