本篇教程探讨了菜鸟入门教程 HTML5的常见用法,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。
<
一、网页标题、文章标题、文章段落
代码:
HTML>
这是网页标题这是文章标题
这是文章的标题
这是一个段落
运行结果为:
这是文章标题
这是文章的标题
这是一个段落
注意:
这里看不到网页标题,网页标题会显示在浏览器的网页标签上
文章的标题有 h1-h6 一共6种不同的表示,上面只演示了其中的两种
返回顶部
二、字体大小、字体颜色、字体类型、字体位置、背景颜色
代码:
HTML>
这是网页标题改变字体的大小
改变字体的颜色
改变字体的类型
改变字体的位置
改变这段文字的背景颜色
改变字体的大小和字体的颜色
运行结果为:
改变字体的大小
改变字体的颜色
改变字体的类型
改变字体的位置
改变这段文字的背景颜色
改变字体的大小和字体的颜色
注意:
颜色可以用英文字母表示,也可以用十六进制码表示
style 属性也可以用于标题,例如: 改变文章标题的颜色
返回顶部
三、插入图片
代码:
HTML>
这是网页标题
运行结果为:
注意:
是一个空元素,没有关闭标签
title 属性:当你把鼠标放在图片上方时,会出现提示信息
如何获得图片:在网络上找到一张图片,鼠标右键图片,选择复制图片地址,然后粘贴到 src 属性中即可
返回顶部
四、网页内的超链接、网页间的超链接
代码1:
HTML>
这是网页标题点击跳转到大标题
点解跳转到小标题
这是网页内的超链接
这是网页内的超链接
运行结果为:
点击跳转到大标题
点解跳转到小标题
这是网页内的超链接
这是网页内的超链接
注意:
注意 href 属性的值和 id 属性的值,除了 # 这个符号外,其他要相匹配
代码2:
HTML>
这是网页标题这是文字链接-点击文字跳转到百度
百度
这是图片链接-点击图片跳转到百度
运行结果为:
这是文字链接-点击文字跳转到百度
百度
这是图片链接-点击图片跳转到百度
返回顶部
五、有序列表、无序列表
代码1:
HTML>
这是网页标题这是有序列表:
- 苹果
- 香蕉
- 梨
这是无序列表:
- 狗
- 猫
- 老鼠
运行结果为:
这是有序列表:
苹果香蕉梨
这是无序列表:
狗猫老鼠
代码2:
HTML>
这是网页标题这是嵌套列表:
花
- 玫瑰
- 百合
树木
- 柳树
- 榕树
运行结果为:
这是嵌套列表:
花玫瑰百合
树木柳树榕树
注意:
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频道!
更多推荐
html5如何添加图片菜鸟教程,菜鸟入门教程 HTML5的常见用法
发布评论