HTML5（1）

最新推荐文章于 2021-11-24 14:09:15 发布

Fuzz_

最新推荐文章于 2021-11-24 14:09:15 发布

阅读量186

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_36186690/article/details/80954050

版权

HTML 专栏收录该内容

16 篇文章 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>

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

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

<!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里，来实现各种的属性的具体实现，以下为部分实现的截图。

单击的

键盘按下的

特别注意：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>

使用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>

功能如下：