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>
View Code

 

属性

属性描述
href URL 规定作为基准 URL 在页面中使用的 URL。
target
  • _blank
  • _parent
  • _self
  • _top
在何处打开页面上的链接。该属性会被每个链接中的 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">

以及其他第三方定义扩展等

属性

属性描述45
charset character encoding 定义文档的字符编码。   5
content some_text 定义与 http-equiv 或 name 属性相关的元信息。 4 5
http-equiv
  • content-type
  • expires
  • refresh
  • set-cookie
把 content 属性关联到 HTTP 头部。 4 5
name
  • author
  • description
  • keywords
  • generator
  • revised
  • others
把 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
  • alternate
  • author
  • help
  • icon
  • licence
  • next
  • pingback
  • prefetch
  • prev
  • search
  • sidebar
  • stylesheet
  • tag
规定当前文档与被链接文档之间的关系。
rev reversed relationship HTML5 中不支持。
sizes
  • heightxwidth
  • any
规定被链接资源的尺寸。仅适用于 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:在浏览器继续解析页面之前,立即读取并执行脚本

 

 更多:

 HTML5 <form> 标签  

 HTML 5 <input> 标签 

 HTML5 <label>标签 

posted @ 2020-08-08 12:01  天马3798  阅读(490)  评论(0编辑  收藏  举报