HTML5的基础及简单操作
我们都知道，HTML5是超文本标记语言(HTML)的第五次重大修改，即最新版本;它比原来的标准又增加了一些新的标签，实现更多功能，更标准化，更适用于移动互联网。那么HTML5的基础和简单操作是怎么样的呢？接下来深圳网站建设公司万狼科技的小编就为大家介绍一二。
第一章
相关符号的认识： 标题标签：h1~h6 段落标签：<p></p> 换行标签：(br/) 水平线：(hr/) 字体加粗：<strong></strong> 斜体：<em></em> 空格：(  ) 大于：(>)> 小于：(<)< 双引号：(")" 版权符号：(©)© 图像标签：< img src="图像路径"/> 连接标签：< a href=" " target="_parent"></ a>(_parent：本窗口打开连接页面，_blank：创建一个窗口打开页面连接) 锚链接 a : 锚链接 name ： 定义锚点名称 href : #+锚点名称 块元素 无论内容多少，该元素独占一行(p、h1-h6…) 行内元素 内容撑开宽度，左右都是行内元素的可以排在一行(a、strong、em…)
部分符号演示
其中图片需要导入相同的文件夹下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<h1>我是一级标签</h1>
<h2>我是二级标签</h2>
<h3>我是三级标签</h3>
<h4>我是四级标签</h4>
<h5>我是五级标签</h5>
<h6>我是六级标签</h6>
<p>(p)(/p)是段落标签(回车，换行)。
<br/>其中(br/)也是换行，相当于回车。
<hr/>(hr/)是水平线。
<strong>加粗</strong>
<em>倾斜</em>
</p>
<p>
这个是 空格符号。<br/>
这个是>大于号。<br/>
这个是<小于号。<br/>
这个是"双引号。<br/>
这个是©版本符号<br/>
</p>
<img src="../images/1.jpg" alt="核桃" title="提示核桃" width="160px" height="160px"/>
<a href="demo.html" target="_blank">跳转小程序</a>
<a href="#zc">注册</a>
<a href="#dl">登录</a>
<div style="height: 300px;width: 300px" ></div>
<a name ="zc"></a>
<img src="../images/zhuce.jpg " alt=""/>
<div style="height: 300px;width: 300px" ></div>
<a name ="dl"></a>
<img src="../images/denglu.jpg " alt=""/>
</body>
</html>
第一章都很简单，就是各种符号的认识，有点复杂的就是锚链接：
锚链接：锚链接实际上就是链接文本，又叫锚文本。可以理解为：关键词上带超链接的一种链接方式，且这个词本身可以作为对指向目标页面的内容概述。但是单页站锚链接与锚文本有所不同。一般的来讲，网站页面中增加的锚链接都和页面本身的内容有一定的必然联系。例如网站建设的行业网站上会增加一些同行网站的链接或者一些做网站建设的知名设计网站的链接。
<a href="#F1">F1</a>这是一个链接，关键字是F1;点击F1就会跳向其所指的内容。
<img id = "F1"src="../images/F2.png " alt=""/>这个是图片，点击上面的链接，就会跳到id符合的相应图片位置。
其中：
a : 锚链接
href : #+锚点名称
src：src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。src和href之间有区别，可以混着用。src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
实现点击关键字跳向其内容的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
p{position: fixed; right: 5%; top: 50%; font-size: 40px;}
</style>
</head>
<body>
<p>
<a href="#F1">F1</a>
<a href="#F2">F2</a>
<a href="#F3">F3</a>
<a href="#F4">F4</a>
<a href="#返回顶部">返回顶部</a>
</p>
<img id = "返回顶部"src="../images/F1.png " alt=""/>
<img id = "F1"src="../images/F2.png " alt=""/>
<img id = "F2"src="../images/F3.png " alt=""/>
<img id = "F3"src="../images/F4.png " alt=""/>
<img id = "F4"src="../images/F5.png " alt=""/>
</body>
</html>
第二章
相关符号的认识：
无序列表： <ul> <li>...</li> <li>...</li> ... <ul> 特点：每一个li前都有实心小圆点 无序列表的特性： 没有顺序，每个<li>标签独占一行（块元素） 默认<li>标签项前面有个实心小圆点 一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等 有序列表： <ol> <li>...</li> <li>...</li> ... </ol> 有序列表的特性: 有顺序，每个<li>标签独占一行（块元素） 默认<li>标签项前面有顺序标记 一般用于排序类型的列表，如试卷、问卷选项等 定义列表： <dl> <dt></dt> <dd></dd> <dd></dd> .... </dl> 定义列表的特性: 没有顺序，每个<dt>标签、<dd>标签独占一行（块元素） 默认没有标记 一般用于一个标题下有一个或多个列表项的情况 表格： <table> <tr> <td>第1个单元格的内容</td> <td>第2个单元格的内容</td> ... </tr> <tr> <td>第1个单元格的内容</td> <td>第2个单元格的内容</td> ... </tr> </table> 跨列：colspan="n"> 跨行：rowspan="n"
符号演示:
无序列表：
1.
<ul>
<h4>热搜排行榜</h4>
<li>iG夺冠</li>
<li>RNG虽然落败，可是没想到冠军还是LPL</li>
<li>范冰冰凉凉</li>
</ul>
运行，网页显示结果：
2.
<ol>
<h4>热搜排行榜</h4>
<li>iG夺冠</li>
<li>RNG虽然落败，可是没想到冠军还是LPL</li>
<li>范冰冰凉凉</li>
</ol>
运行，网页显示结果：
3.
<dl>
<dt>金庸</dt>
<dd>《天龙八部》</dd>
<dd>《笑傲江湖》</dd>
<dd>《倚天屠龙记》</dd>
<dd>《鹿鼎记》</dd>
</dl>
运行，网页显示结果：
有序列表：
1.
<table border="1" >
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
</tr>
<tr>
<td>80</td>
<td>90</td>
<td>70</td>
</tr>
<tr>
<td>85</td>
<td>96</td>
<td>60</td>
</tr>
</table>
运行，网页显示结果：
2.
<table border="1" >
<tr>
<td rowspan="2" >张三</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
<tr>
<td rowspan="2" >李四</td>
<td>语文</td>
<td>150</td>
</tr>
<tr>
<td>数学</td>
<td>150</td>
</tr>
</table> 运行，网页显示结果：
3.
<table border="1" >
<tr>
<td colspan="2" >学生成绩</td>
</tr>
<tr>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>150</td>
</tr>
</table>
运行，网页显示结果：
可能您还想看