HTML5 笔记之 HTML5 的常见用法介绍
阅读目录
- 介绍 网页标题、文章标题、文章段落
- 介绍 字体大小、字体颜色、字体类型、字体位置、背景颜色
- 介绍 插入图片
- 介绍 网页内的超链接、网页间的超链接
- 介绍 有序列表、无序列表
- 介绍 表格制作
- 介绍 其他一些常用元素
一、网页标题、文章标题、文章段落
代码：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<h1>这是文章标题</h1>
<h3>这是文章的标题</h3>
<p>这是一个段落</p>
</body>
</html>
运行结果为：
这是文章标题
这是文章的标题
这是一个段落
注意：
- 这里看不到网页标题，网页标题会显示在浏览器的网页标签上
- 文章的标题有 h1-h6 一共6种不同的表示，上面只演示了其中的两种
二、字体大小、字体颜色、字体类型、字体位置、背景颜色
代码：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<p style="font-size:50px">改变字体的大小</p>
<p style="color:green">改变字体的颜色</p>
<p style="font-family:楷体">改变字体的类型</p>
<p style="text-align:right">改变字体的位置</p>
<p style="background-color:yellow">改变这段文字的背景颜色</p>
<p style="font-size:30px; color:#008000">改变字体的大小和字体的颜色</p>
</body>
</html>
运行结果为：
改变字体的大小
改变字体的颜色
改变字体的类型
改变字体的位置
改变这段文字的背景颜色
改变字体的大小和字体的颜色
注意：
- 颜色可以用英文字母表示，也可以用十六进制码表示
- style 属性也可以用于标题，例如：< h1 style="color:blue" > 改变文章标题的颜色 < /h1 >
三、插入图片
代码：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<img src="http://p1.s.hjfile.cn/thread/201201/2012011451648781_800_o.jpg" width="245px" height="185px"/>
</body>
</html>
运行结果为：
注意：
- < img > 是一个空元素，没有关闭标签
- title 属性：当你把鼠标放在图片上方时，会出现提示信息
- 如何获得图片：在网络上找到一张图片，鼠标右键图片，选择复制图片地址，然后粘贴到 src 属性中即可
四、网页内的超链接、网页间的超链接
代码1：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<a href="#head1">点击跳转到大标题</a>
<a href="#head3">点解跳转到小标题</a>
<h1 id="head1">这是网页内的超链接</h1>
<h3 id="head3">这是网页内的超链接</h3>
</body>
</html>
运行结果为：
这是网页内的超链接
这是网页内的超链接
注意：
- 注意 href 属性的值和 id 属性的值，除了 # 这个符号外，其他要相匹配
代码2：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<h3>这是文字链接-点击文字跳转到百度</h3>
<a href="http://www.baidu.com">百度</a>
<h3>这是图片链接-点击图片跳转到百度</h3>
<a href="http://www.baidu.com"><img src="http://p1.s.hjfile.cn/thread/201201/2012011451648781_800_o.jpg" width="245" height="185"/></a>
</body>
</html>
运行结果为：
这是文字链接-点击文字跳转到百度
这是图片链接-点击图片跳转到百度
五、有序列表、无序列表
代码1：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<p>这是有序列表：</p>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>梨</li>
</ol>
<p>这是无序列表：</p>
<ul>
<li>狗</li>
<li>猫</li>
<li>老鼠</li>
</ul>
</body>
</html>
运行结果为：
这是有序列表：
- 苹果
- 香蕉
- 梨
这是无序列表：
- 狗
- 猫
- 老鼠
代码2：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<p>这是嵌套列表：</p>
<ol>
<li>
<p>花</P>
<ul>
<li>玫瑰</li>
<li>百合</li>
</ul>
</li>
<li>
<p>树木</p>
<ul>
<li>柳树</li>
<li>榕树</li>
</ul>
</li>
</ol>
</body>
</html>
运行结果为：
这是嵌套列表：
花
- 玫瑰
- 百合
树木
- 柳树
- 榕树
注意：
- ol 的全称为 order list(有序列表)
- ul 的全称为 unorder list(无序列表)
- li 的全称为 list(列表)
六、表格制作
代码1：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<table border="1px" width="50%">
<thead style="color:red">
<tr>
<td>头部</td>
<td>头部</td>
<td>头部</td>
</tr>
</thead>
<tbody style="color:blue">
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
<tfoot style="color:green">
<tr>
<td>脚注</td>
<td>脚注</td>
<td>脚注</td>
</tr>
</tfoot>
</table>
</body>
</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：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<table border="1px" width="50%">
<thead>
<tr>
<td>学号</td>
<td>性别</td>
<td>姓名</td>
</tr>
</thead>
<tbody>
<tr>
<td>101</td>
<td>男</td>
<td>张三</td>
</tr>
<tr>
<td>102</td>
<td>男</td>
<td>李四</td>
</tr>
<tr>
<td>103</td>
<td>男</td>
<td>王五</td>
</tr>
</tbody>
</table>
</body>
</html>
运行结果为：
| 学号 | 性别 | 姓名 |
| 101 | 男 | 张三 |
| 102 | 男 | 李四 |
| 103 | 男 | 王五 |
注意：
- width 属性表示表格占比屏幕宽度的 50%
代码3：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<table border="1px" width="50%">
<thead>
<!--这里是新添加的代码-->
<tr>
<td colspan="3" style="text-align:center">学生档案</td>
</tr>
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
</tr>
</thead>
<tbody>
<tr>
<td>101</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>102</td>
<td>李四</td>
<td>男</td>
</tr>
<tr>
<td>103</td>
<td>王五</td>
<td>男</td>
</tr>
</tbody>
</table>
</body>
</html>
运行结果为：
| 学生档案 | ||
| 学号 | 性别 | 姓名 |
| 101 | 男 | 张三 |
| 102 | 男 | 李四 |
| 103 | 男 | 王五 |
注意：
- colspan 的全称为 column span(跨列)
- colspan 的属性表示让表格中 “学生档案” 这一行的内容横跨3列
代码4：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<table border="1px" width="50%">
<thead>
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
</tr>
</thead>
<tbody>
<tr>
<td>101</td>
<td>张三</td>
<td rowspan="3">男</td>
</tr>
<tr>
<td>102</td>
<td>李四</td>
</tr>
<tr>
<td>103</td>
<td>王五</td>
</tr>
</tbody>
</table>
</body>
</html>
运行结果为：
| 学号 | 姓名 | 性别 |
| 101 | 张三 | 男 |
| 102 | 李四 | |
| 103 | 王五 |
注意：
- rowspan 属性表示让表格中的内容跨3行
七、其他一些常用元素
代码：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<!--这里是注释，不会显示在文章中-->
<p><b>这里显示粗体</b></p>
<p><i>这里显示斜体</i></p>
<p><u>这里显示下划线</u></p>
<p>这里可以<br/>换行</p>
<p>这里是水平线</p>
<hr/>
</body>
</html>
运行结果为：
这里显示粗体
这里显示斜体
这里显示下划线
这里可以
换行
这里是水平线
End~
HTML5 笔记之 HTML5 的常见用法介绍的更多相关文章
- git常见用法介绍
1. git help:帮助 git help xxx git xxx --help 2. git init:初始化 git init 3. git config:配置 常见用法 git config ...
- HTML5笔记2——HTML5音/视频标签详解
音视频的发展史 早期:<embed>+<object>+文件 问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Quick ...
- HTML5笔记1——HTML5的发展史及标签的改变
记得第一次接触HTML5还是在<联信永益>实习那会儿(2011),当时一个项目技术选型的时候面临两种选择,分别是Silverlight和HTML5,那是用的最新的IE浏览器版本还是IE9, ...
- numpy学习笔记 - numpy数组的常见用法
# -*- coding: utf-8 -*- """ 主要记录代码,相关说明采用注释形势,供日常总结.查阅使用,不定时更新. Created on Mon Aug 20 ...
- stringstream常见用法介绍
1 概述 <sstream> 定义了三个类:istringstream.ostringstream 和 stringstream,分别用来进行流的输入.输出和输入输出操作.本文以 stri ...
- HTML5笔记3——Web Storage和本地数据库
上一篇:HTML5笔记2——HTML5音/视频标签详解 Web Storage概述 在HTML5中,除了Canvas元素之外,另一个新增的非常重要的功能是可以再客户端本地保存数据的Web Storag ...
- HTML5 Audio标签方法和函数API介绍
问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍 Audio APIHTML5HTML5 Audio预加载 HTML5 Audio标签方法和函数 ...
- HTML5 学习笔记--------》HTML5概要与新增标签！
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...
- Oracle学习笔记_06_CASE WHEN 用法介绍
1. CASE WHEN 表达式有两种形式 --简单Case函数 CASE sex ' THEN '男' ' THEN '女' ELSE '其他' END --Case搜索函数 CASE ' THEN ...
随机推荐
- EOS 配置mongodb
本文实现方案:在虚拟机ubuntu上运行单节点的EOS,把数据存储到mongodb中,然后通过本地的windows查看mongodb的数据. 配置如下: 虚拟机: ubuntu 16.04 EOS ...
- git学习--clone和pull
clone:从远程服务器克隆一个一模一样的版本库到本地,复制的是整个版本库.(clone是将一个库复制到你的本地,是一个本地从无到有的过程) pull:从远程服务器获取到一个branch分支的更新到本 ...
- poj2823滑动窗口（单调队列）
题目传送门 题意:给你一个长度为n的数列,然后用一个长度为k的窗口去框(k<n)每次保存k这个窗口中的最大值和最小值,输出. 思路:这道题最朴素的on2的做法铁定超时,然后我想过一个nlogn的 ...
- [CF1051F]The Shortest Statement （LCA+最短路）（给定一张n个点m条有权边的无向联通图，q次询问两点间的最短路）
题目:给定一张n个点m条有权边的无向联通图,q次询问两点间的最短路 n≤100000,m≤100000,m-n≤20. 首先看到m-n≤20这条限制,我们可以想到是围绕这个20来做这道题. 即如果我们 ...
- Go语言基础之9--指针类型详解
一. 变量和内存地址 每个变量都有内存地址,可以说通过变量来操作对应大小的内存 注意:通过&符号可以获取变量的内存地址 通过下面例子来理解下: 实例1-1 package main impor ...
- ADO执行事务
在工作中遇到,需要批量提交的.在sql2008以后有表变量定义,可以实现.但个人比较习惯用C#,就有下面代码,直接上代码... using (SqlConnection conn = new SqlC ...
- my19_mysql 多线程备份恢复工具mydumper
mydumper适合库中有大表且CPU个数较多的场景,多用于恢复从库或单个实例 推荐用法**************************** mydumper -u automng -p root ...
- windows 7 下安装VMWARE 和 red-hat 7 64bit
按F2 进入BIOS: 在inter virtualization technology 选择YES 就可以安装linux 64bit 操作系统了 https://blog.csdn.net/coco ...
- SQL Server覆盖索引--有无包含列对数据库查询性能的影响分析
“覆盖索引使您能够避免返回到表中以满足请求的所有列,因为所有请求的列都已经存在于非聚集索引中.这意味着您还可以避免返回到表中进行任何逻辑或物理的信息读取.” 然而,以上这不是我想要传达的全部意思,因为 ...
- MapReduce的主要的六个类讲解
a.InputFormat类.该类的作用是将输入的文件和数据分割成许多小的split文件, 并将split的每个行通过LineRecorderReader解析成<Key,Value>,通过 ...