HTML5 文档基础标签 <!--...--> html,head,body,base,meta,link,script,style
一、HTML5 注释标签
<!--...--> 与之前版本没变化
二、 HTML5 <html>标签
<html> 标签告知浏览器这是一个 HTML 文档。
html 元素是 HTML 文档中最外层的元素。
html 元素也可称为根元素。
三、HTML5 <head>标签
head 元素是所有头部元素的容器。位于 <head> 内部的元素可以包含脚本、指引浏览器找到样式表、提供元信息，等等。
下面是可用在 head 部分的标签：
- <base>
- <link>
- <meta>
- <script>：脚本
- <style> ：css 样式
- <title> ：网页标题，也是seo抓取的重点
四、HTML5 <body> 标签
<body> 元素定义文档的主体。
<body> 元素包含文档的所有内容，比如文本、超链接、图像、表格、列表等等。
五、HTML5 <base> 标签
<base> 标签为页面上的所有链接规定默认地址或默认目标。
通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。
使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。
<base> 标签必须位于 head 元素内部。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <base href="http://www.gongjuji.net/" target="_blank"> </head> <body> <img src="/Content/Images/htmltoimg.png" /> <div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <div class="caption"> <small class="badge pull-right" style="font-weight:lighter;font-size:12px;">v5.0</small> <h3>滑块控件</h3> <p> <a href="slider/" class="btn btn-primary"> 进入 </a> </p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <div class="caption"> <small class="badge pull-right" style="font-weight:lighter;font-size:12px;">v6.2</small> <h3>上传控件工具</h3> <p> <a href="/uploader/" class="btn btn-primary"> 进入 </a> </p> </div> </div> </div> </div> </body> </html>
属性
| 属性 | 值 | 描述 |
|---|---|---|
| href | URL | 规定作为基准 URL 在页面中使用的 URL。 |
| target |
|
在何处打开页面上的链接。该属性会被每个链接中的 target 属性覆盖。 |
六、HTML5<meta> 标签
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
常见用法：
1.文档字符集
<meta charset="ISO-8859-1">
2.搜索引擎关键词
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />
3.网页描述
<meta name="description" content="免费的 web 技术教程。" />
4.设备视窗
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
禁用手机缩放
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
以及其他第三方定义扩展等
属性
| 属性 | 值 | 描述 | 4 | 5 |
|---|---|---|---|---|
| charset | character encoding | 定义文档的字符编码。 | 5 | |
| content | some_text | 定义与 http-equiv 或 name 属性相关的元信息。 | 4 | 5 |
| http-equiv |
|
把 content 属性关联到 HTTP 头部。 | 4 | 5 |
| name |
|
把 content 属性关联到一个名称。 | 4 | 5 |
七、HTML5 <link>标签
<link rel="stylesheet" type="text/css" href="theme.css" />
<link> 标签定义文档与外部资源的关系。
<link> 标签最常见的用途是链接样式表。
<link rel=icon href=/vue/favicon.ico>
| 属性 | 值 | 描述 |
|---|---|---|
| href | URL | 规定被链接文档的位置。 |
| hreflang | language_code | 规定被链接文档中文本的语言。 |
| media | media_query | 规定被链接文档将被显示在什么设备上。 |
| rel |
|
规定当前文档与被链接文档之间的关系。 |
| rev | reversed relationship | HTML5 中不支持。 |
| sizes |
|
规定被链接资源的尺寸。仅适用于 rel="icon"。 |
| type | MIME_type | 规定被链接文档的 MIME 类型。 |
八、HTML5 <script>标签
网页内脚本：
<script type="text/javascript"> document.write("Hello World!") </script>
独立文件脚本：
<script type="text/javascript" src="url">
<script> 标签用于定义客户端脚本，比如 JavaScript。
script 元素既可包含脚本语句，也可以通过 "src" 属性指向外部脚本文件。
注释：如果使用 "src" 属性，则 <script> 元素必须是空的。
注释：有多种执行外部脚本的方法：
- 如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
- 如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行
- 如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本
更多：
