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> 标签

常见用法：

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-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 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 元素既可包含脚本语句，也可以通过 "src" 属性指向外部脚本文件。

注释：如果使用 "src" 属性，则 <script> 元素必须是空的。

注释：有多种执行外部脚本的方法：

如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行
如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本

HTML5 <form> 标签

HTML 5 <input> 标签

HTML5 <label>标签

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

刷新页面返回顶部

HTML5 文档基础标签  html,head,body,base,meta,link,script,style

属性

属性

公告