HTML5基础

最新推荐文章于 2023-08-04 12:22:36 发布

lairikeqi

最新推荐文章于 2023-08-04 12:22:36 发布

阅读量289

点赞数

分类专栏： Web前端文章标签： html

本文链接：https://blog.csdn.net/lairikeqi/article/details/81324506

版权

Web前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

HyperText Markup Language：超文本标记语言，是一种用于创建网页的标准标记语言。HTML 运行在浏览器上，由浏览器来解析。

HTML 不是一种编程语言，而是一种标记语言，标记语言是一套标记标签 (markup tag)
HTML 文档（也叫做 web 页面）包含了HTML 标签及文本内容

HTML 标签
HTML 使用标记标签来描述网页，HTML 标记标签通常被称为 HTML 标签 (html tag)
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <a> 和 </a>

HTML head 元素
标签         描述
<head>   定义文档的信息
<title> 定义文档的标题
<base>   定义页面链接标签的默认链接地址
<link>   定义一个文档和外部资源之间的关系
<meta>   定义HTML文档中的元数据
<script> 定义客户端的脚本文件
<style>   定义HTML文档的样式文件

1.< a >标签

HTML链接由 <a> 标签定义，链接的地址在 href 属性中指定。
<a> – target 属性，使用 target 属性，可以定义被链接的文档在何处显示

<a href="http://www.runoob.com/" target="_blank">访问菜鸟教程!</a>
target="_blank”  在新窗口打开文档

访问菜鸟教程!

<a> – id 属性
id属性可用于创建在一个HTML文档书签标记，在HTML文档中书签是不显示的，对于用户来说是隐藏的

在HTML文档中使用id属性创建一个书签，提示部分

<a id="tips">提示部分</a>

在当前文档中创建一个链接到"提示部分(id=“tips”）"，访问提示部分

<a href="#tips">访问提示部分</a>

或者，从另一个页面创建一个链接到"提示部分(id=“tips”）"，访问提示部分

<a href="http://www.runoob.com/html/html-links.html#tips">访问提示部分</a>

补充：void运算符

简介：
　　void 是 javascript 的操作符，意思是：只执行表达式，但没有返回值。该表达式会被计算但是不会在当前文档处装入任何内容，例如，void(0) 计算为 0 ，但在JavaScript上没有任何效果，也就是说 <a href="javascript：void(0)"> 的作用和 <a href="javascript：void(1)"> 的作用是一样的。

void 操作符用法格式如下：
　　javascript：void (表达式) //推荐此写法
　　javascript：void 表达式

href="#"与href="javascript:void(0)"的区别:
#包含了一个位置信息，默认的锚是#top 也就是网页的上端
而 javascript : void(0) 仅仅表示一个死链接
点我没有反应的!
点我定位到指定位置!

尾部定位点

2.< img >标签

HTML 图像由标签 <img> 来定义，width，height设定宽高

<hr>
<img src="https://i-blog.csdnimg.cn/blog_migrate/5f8dcf06d74b796a51269303a0d2e07b.png" width="300" height="100" />
<hr>

<img>标签中 – alt属性，alt 属性用来为图像定义一串预备的可替换的文本。

<img src="attach_people.gif" alt="该图片无法显示！！请刷新！">

效果：该图片无法显示！！请刷新！

在浏览器无法载入图像时，替换文本属性告诉读者失去的信息或者是开发自定义的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

<p>百度：
	<a href="https://www.baidu.com/" target="_blank">
		<img border="10" src="https://i-blog.csdnimg.cn/blog_migrate/5f8dcf06d74b796a51269303a0d2e07b.png" alt="HTML 教程" width="100" height="60"">
	</a>
</p>

代码：

<!DOCTYPE html><!-- 申明为HTML5文档 -->
<html>
	
<head>
<meta charset="utf-8">
<title>网页标题</title>
</head>

<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落</p>
    
    <!-- HTML中用<a>来定义标签 -->
    <a href="http://www.runoob.com/" targe="_blank">菜鸟教程</a>
	<br>
    <img src="https://i-blog.csdnimg.cn/blog_migrate/5f8dcf06d74b796a51269303a0d2e07b.png" width="150" height="80" />
    
    <br>
    <hr>
</body>
</html>

3.< base >标签
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<base href="http://www.runoob.com/images/" target="_blank">
</head>

<body>
<!-- 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，
该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "http://www.runoob.com/images/logo.png"-->
<img src="logo.png">
<br><br>

<!--- 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里
我们已经设置了 target 属性的值为 "_blank" -->
<a href="http://www.runoob.com">菜鸟教程</a>

4.< link >标签
<link> 标签定义了文档与外部资源之间的关系，<link> 标签通常用于链接到样式表

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>链接外部样式表</title> 
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
<h1>我使用了外部样式文件来格式化文本 </h1>
<p>我也是!</p>
</body>

</html>

5.< style >标签
<style> 标签定义了HTML文档的样式文件引用地址
在<style> 元素中也可以直接添加样式来渲染 HTML 文档:

示例：

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>

6.< meta >标签

为搜索引擎定义关键词
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容
<meta name="description" content="免费 Web & 编程教程">
定义网页作者
<meta name="author" content="Runoob">
每30秒钟刷新当前页面
<meta http-equiv="refresh" content="30">

7.表格和列表

<DOCTYPE html>
<html>
  
  <head>
    <meta charset="utf-8">
    <title></title>
    
    <!--base标签作为HTML中所有的连接标签的默认连接 -->
    <base href="http://www.baidu.com/" target="_blank">
    
    <!-- <link> 标签定义了文档与外部资源之间的关系。
		<link> 标签通常用于链接到样式表 -->
    <link ref="stylesheet" type="text/css" herf="mystyle.css">
  </head>
  
  <body>
    
    <a href="http://www.baidu.com/" target="_blank">百度</a>
    <br><br><br>
    
    <!-- cellspacing单元格间距  cellpadding单元格边距 -->
    <table border="1" cellspacing="0" cellpadding="5"> 
      <tr>
      	<th colspan="2">悯农</th><!-- 占两格 标题 -->
      </tr>
      <tr>
      	<td>锄禾日当午</td>
        <td>汗滴禾下土</td>
      </tr>
      <tr>
      	<td>谁知盘中餐</td>
        <td>粒粒皆辛苦</td>
      </tr>
    </table>
    <br><br>
    
    <!-- HTML无序列表 -->
    <ul>
		<li>AAA</li>
		<li>BBB</li>
      	<li>BBB</li>
	</ul>
  </body>
  </html>
</DOCTYPE>

8.< div >

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
 
<div id="container" style="width:500px">
	<div id="header" style="background-color:#FFA500;">
	<h1 style="margin-bottom:0;">主要的网页标题</h1>
	</div>
 
	<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
	<b>菜单</b>
	<br>HTML
	<br>CSS
	<br>JavaScript
	</div>
 
	<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
	内容在这里
	</div>
 
	<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
	版权 © runoob.com
	</div>
</div>
</body>
</html>

9.HTML表单 – Form

表单标签：表单标签的作用是用于提交数据给服务器的
表单项的数据如果需要提交到服务器上面，那么表单项必须要有name的属性值

  属性	     值	                     描述
action	    URL	            该属性是用于指定提交数据的地址
method	  get/post     规定表单的提交方式(用于发送 form-data 的HTTP方法)
enctype	               规定被提交数据的编码（默认：url-encoded）
name	 form_name	             规定表单的名称
target	  _blank            规定在何处打开 action URL
          _self
          _parent
          _top
         framename
注意action属性和method="get"
   get : 默认使用的提交方式,提交的数据会显示在地址栏上
   post : 提交的数据不会显示在地址栏上

代码如下：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<form action="">
	username: <input type="text" name="uname"><br>
	password: <input type="password" name="psd">
	<br><br>
	
	<!-- 单选框 -->
	<input type="radio" name="sex" value="male">Male<br>
	<input type="radio" name="sex" value="female">Female
	<br><br>
	
	<!-- 复选框 -->
	<input type="checkbox" name="power" value="something">权利<br>
	<input type="checkbox" name="postion" value="something">地位<br>
	<input type="checkbox" name="wealth" value="something">金钱
	<br><br>
	
</form>

<!-- 当用户单击提交按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了
目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理 -->
<form name="input" action="aaa.jsp" method="get">
	Username: <input type="text" name="user">
	<input type="submit" value="Submit">
</form>

</body>
</html>

10.HTML脚本 – script标签里

HTML 脚本，使 HTML 页面具有更强的动态和交互性。

– 如何将脚本插入 HTML 文档。
使用<script> 标签
<script> 标签用于定义客户端脚本，比如 JavaScript

<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
下面的脚本会向浏览器输出"Hello World!"

<script>
document.write("Hello World!");
</script>

11.HTML字符实体

	空格 &nbsp;

参考：菜鸟教程字符实体

12.HTML总结

参考：HTML速查列表
 参考：菜鸟教程计算机网络

13.HTML5补充

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。
HTML5的设计目的是为了在移动设备上支持多媒体。
HTML5 是下一代 HTML 标准。
HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
HTML5 中的一些有趣的新特性：
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search