HTML5（1）

野性酷女 2022-05-21 13:04 188阅读 0赞

## HTML简介 ##

HTML的全称是（Hyper Text Markup Language：超文本编辑语言）他是互联网上应用最广的标记语言。

HTML5增加了许多实用性的功能如下：

（1）解决的跨浏览器的问题：在HTML5以前，个浏览器对HTML和JavaScript支持不统一，造成了同一个页面在不同的    浏览器表现不同，现在HTML5克服了这个难题

（2）部分代替了原来的JavaScript：HTML5增加了一些实用的功能，这些功能可以部分代替JavaScript，而这些功能只需要通过为标签增加一些属性即可。

（3）以前的HTML对Web程序而言功能太单薄了，比如上传文件时想同时选择多个文件都不行，为了弥补这种不  足，HTML5规范了不少的新的API，来克服这个难题

HTML5 的基本结构如下：

<!DOCTYPE html> <html> <head> <title>页面标题</title> <meta http-equiv = "Content-Type" content="text/html" charset="utf-8"/> </head> <body> 页面内容部分 </body> </html>

注意：不要在<html><head>之间插入不带标签的内容，也不要在</head>和<body>之间插入不带标签的内容，也不要在</body>和</html>之间插入不带标签的内容。

空元素的语法的元素有area、base、br、col、command、embed、hr、img、input、keygrn、link、mata、param、source、wbr  这些元素不允许将开始标签和结束标签分开定义。

例如：<img src="a.gif" alt="a"> </img>     这样写是错误的

<img src="a.gif" alt="a"/>    这样写才是正确的

准确的来说，HTML5位大家带来了许多改变：

（1）标签可以不区分大小写，例如：<p>HTML简介</P>

（2）元素可以省略结束标签，例如：<img src="a.gif" alt="a">

（3）部分元素的属性可以省略属性值，仅支持boolean的属性，例如：<input checked type="checkbox"/> 省略了check="true"的属性

（4）属性的属性值可以不使用引号，例如：<img src=a.gif alt=测试 />

虽然HTML5为大家带来了许多便利，但是还是建议大家养成良好的编程习惯。

## HTML5 的常用元素与属性    ##

#### HTML5保留的常用元素    ####

##### 基本元素    #####

HTML5保留的基本元素如下：

：定义HTML注释。位于之间的内容会被当成注释处理

<html>：他是HTML5文档的根元素。但HTML5允许完全省略这个元素。

<head>：他用于定义HTML5文档的头部分，但HTML5允许完全省略这个元素。

<title>它用于定义HTML5文档的页面标题。

<body>他用于定义HTML5文档的页面主体部分，该元素可以指定id、class、style等通用属性，还可以指定onload（加载）、onclick（单击）、onmousedown（鼠标按下）、onmouseup（鼠标抬起）、onmouseover（鼠标移动进去）、onmousemove（鼠标移动）、onmouseout（鼠标移出）、onkeypress（键盘按下）、onkeydown（键盘按下）、onkeyup（键盘抬起）等事件属性，这些属性用于JavaScript脚本。

<h1>-<h6> 定义标题一到标题六。

<p>：定义段落，可以指定id、class、style等通用属性，还可以指定onload（加载）等各种事件属性

<br>:插入一个换行。可以指定id、class、style等通用属性。

<hr>：定义水平线。可以指定id、class、style等通用属性。

<div>：定义文章中的节。可以指定id、class、style、dir、title等通用属性。还可以指定onload（加载）等各种事件属性。

<span>：与<div>基本类似。

<!DOCTYPE html> <html> <head> <title>常用元素</title> <meta charset="utf-8" /> </head> <script type="text/javascript"> </script> <body> <H1 id="h1_firstTitle">AAA</H1> <H2>BBB</H2> <H3>CCC</H3> <H4>DDD</H4> <H5>EEE</H5> <H6>FFF</H6> <p id="p_firstTitle" style="background-color:red;">这是段落标签，<br/>第一段内容</p> dsafsdfsdgf<br>dgfdgfdg <hr> <span style="background-color:#aaa;width:200px;height:100px;"> sgdfgdfhggdhgfjhgjhgjhjsfgdhgfjyjykj</span> <div style="background-color:#3da;width:200px;height:100px;"> sgdfgdfhggdhgfjhgjhgjhjfdhfgjhghjghghghghghgfhgdhdf</div> </body> </html>

这些都是实现了以上的部分标签。

![70][]

为了熟悉以上属性，我们做了一个小练习来巩固这些属性：

<!DOCTYPE html>  <html> <head> <title>页面标题</title> <meta http-equiv = "Content-Type" content="text/html" charset="gb2312"/> </head> <script type="text/javascript"> function move() { alert("onmousemove"); } function onload() { alert("onload"); } function cli() { alert("onclick"); } function mdown() { alert("onmousedown"); } function mup() { alert("onmouseup"); } function mover() { alert("onmouseover"); } function mout() { alert("onmouseout"); } function kpress() { alert("onkeypress"); } function kdown() { alert("onkeydown"); } function kup() { alert("onkeyup"); } </script> <body οnlοad="onload()"> <div style="width:100px;height:70px;background-color:red;float:left" οnmοusemοve="move()">move</div> <div style="width:100px;height:70px;background-color:white;float:left"> </div> <div style="width:100px;height:70px;background-color:red;float:left" οnclick="cli()">onclick</div> <div style="width:100px;height:70px;background-color:white;float:left"> </div> <div style="width:100px;height:70px;background-color:red;float:left" οnmοusedοwn="mdown()">mousedown</div> <div style="width:100px;height:70px;background-color:white;float:left"> </div> <div style="width:100px;height:70px;background-color:red;float:left" οnmοuseup="mup()">mouseup</div> <div style="width:100px;height:70px;background-color:white;float:left"> </div> <div style="width:100px;height:70px;background-color:red;float:left" οnmοuseοver="mover()">mouseover</div> <div style="width:100px;height:70px;background-color:white;float:left"> </div> <div style="width:100px;height:70px;background-color:red;float:left" οnmοuseοut="mout()">mouseout</div> <div style="width:100px;height:70px;background-color:white;float:left"> </div> <div style="width:100px;height:70px;background-color:red;float:left" οnkeypress="kpress()"><input text="text" style="width:80px"></div> <div style="width:100px;height:70px;background-color:white;float:left"> </div> <div style="width:100px;height:70px;background-color:red;float:left" οnkeydοwn="kdown()"><input text="text" style="width:80px"></div> <div style="width:100px;height:70px;background-color:white;float:left"> </div> <div style="width:100px;height:70px;background-color:red;float:left" οnkeyup="kup()"><input text="text" style="width:80px"></div> </body> </html>

这些属性被分别加在了各个的div里，来实现各种的属性的具体实现，以下为部分实现的截图。

![70 1][]

单击的

![70 2][]

键盘按下的

![70 3][]

特别注意：id属性用于为HTML元素制定一个唯一的标识，不能重复。

### 文本格式相关的元素    ###

<b>定义粗体文本

<i>定义斜体文本

<em>定义强调文本

<strong>定义粗体文本

<sup>定义上标文本

<sub>定义下标文本

<small>定义小号字体文本

<bdo>定义文本显示的方向

<!DOCTYPE html> <html>     <head>         <title>常用元素</title>         <meta charset="utf-8" />              </head>          <script type="text/javascript">              </script>     <body>              <bdo dir="ltr">12345678 </bdo><br/>         <bdo dir="rtl">12345678 </bdo>         <div>kkkk<sub>kkk<sub/> </div>         <div><b>kkk<b/><sub/> </div>         <div>kkkk<sup>kkk<sup/> </div>         <div><i>kkk<i/><sub/> </div>         <div><em>kkk<em/> </div>                  </body> </html>

![70 4][]

### 使用a标签加锚点 ###

a标签保留了HTML的元素属性。还可以的指定以下六个重要属性。

href：指定超链接所链接的另一个资源。

hrefflang：指定超链接所链接的

文档所使用的语言target：指定使用框架集中的那个框架来装载另一个资源。属性值可以是\_blank、\_self、\_top、\_parent四个值。

download：用于让用户保存下载资源是的默认文件名

type：指定被连接的MIME类型

media：指定目标URL所引用的媒体类型

我们重点做a元素生成的锚点。明明锚点用于在HTML页面中生成一个定位点，这样允许超链接直接连接到指定页面的该定位点。

<!DOCTYPE html> <html> <head> <title>常用元素</title> <meta charset="utf-8" /> </head> <script type="text/javascript"> </script> <body> <a href="#test">锚点</a> <div style="height:1000px;width:5px;background-color:green"> </div> <a name="test"> 锚点定位点 </a> <div style="height:1000px;width:5px;background-color:green"> </div> </body> </html>

功能如下：

![70 5][]

点击锚点链接

![70 6][]

跳到指定的地点。

[70]: /images/20220521/a2c539cdf49042f7b3902796e44e4797.png
[70 1]: /images/20220521/c5261e036a7f4df6bbf267f182497210.png
[70 2]: /images/20220521/a47ba40423c4472b9629a72aaa19689c.png
[70 3]: /images/20220521/fbc0c491ad74422987248fcf3989dbf8.png
[70 4]: /images/20220521/0ecfdd13708841b981a121c2b26d8f2b.png
[70 5]: /images/20220521/7a3cd7db42124759b5827440260682c9.png
[70 6]: /images/20220521/43f14e3c35a246f18b53ddce1945a9cf.png