html之结构详解

最新推荐文章于 2022-04-20 16:45:58 发布

清虚桂意

最新推荐文章于 2022-04-20 16:45:58 发布

阅读量204

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/weixin_45031595/article/details/116230275

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

代码结构

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    
    <title>测试标题</title>

    <link rel="stylesheet" type="text/css" href="./base.css"/>

    <style type="text/css">
      p {
        color: red;
      }
    </style>

    <script src="./tools.js"></script>

    <script type="text/javascript">  
      alert("alert1  先运行");
    </script>

    <base href="http://www.w3school.com.cn/images/" />
    <base target="_blank" />
  </head>

  <body>
    <h1>测试标题</h1>
    <p>测试文本</p>
    <a href="">测试链接</a>
  </body>
  <script type="text/javascript">  
    alert("alert2   后运行");
  </script>
</html>

`<!DOCTYPE html>`声明

w3school介绍

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种：

<!DOCTYPE html>

html

<html lang="zh-cmn-Hans"> //简体中文页面

<html lang="zh-cmn-Hant"> //繁体中文页面
<html lang="en"> //英语页面

其中lang属性是全局属性

参考文档01
参考文档02
lang属性
 语言代码手册

head标签概述

<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。

以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。其中<title> 定义文档的标题，它是 head 部分中唯一必需的元素。

1、title

title 标签定义文档的标题，在所有 HTML/XHTML 文档中都是必需的。

<title>测试标题</title>

title 元素能够：

定义浏览器工具栏中的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果中的页面标题

在打开一个网页时，网页上方的文字就是title部分。title是对整个页面的核心思想的总结，也是seo非常重要的设置部分。Title部分尽量要多次出现关键词：核心关键词和长尾关键词。具体怎么写title部分，根据需求而定。

2、link（重点：记住怎么写）

<link> 标签定义文档与外部资源之间的关系。

<!-- css引用 -->
<link rel="stylesheet" type="text/css" href="./base.css"/>

<!-- favicon.icon图标   图标放在public文件夹中    根路径   <%= BASE_URL %>    -->
<link rel="shortcut icon" type="image/ico" href="/logo-lfl.ico" />
<link rel="icon" href="<%= BASE_URL %>logo-lfl.ico">

3、style

<style> 标签用于为 HTML 文档定义样式信息。

<style type="text/css">
  p {
    color: red;
  }
</style>

4、script

<script> 标签用于定义客户端脚本，比如 JavaScript。

1、编写内部js代码

<script type="text/javascript">  
      alert("alert1  先运行");
</script>

2、引入外部js文件

<script src="./tools.js"></script>

5、base

<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：

<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>

6、meta

w3school meta标签
 参考文档01

声明文档使用的字符编码

<meta charset="utf-8">

优先使用 IE 最新版本和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

360 使用Google Chrome Frame

<meta name="renderer" content="webkit">

360浏览器就会在读取到这个标签后，立即切换对应的极速核

百度禁止转码
通过百度手机打开网页时，百度可能会对你的网页进行转码，脱下你的衣服，往你的身上贴狗皮膏药的广告，为此可在head内添加

<meta http-equiv="Cache-Control" content="no-siteapp" />

SEO 优化部分

页面关键词keywords

<meta name="keywords" content="your keywords">

页面描述内容description

<meta name="description" content="your description">

定义网页作者author

<meta name="author" content="author,email address">

定义网页搜索引擎索引方式,robotterms是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。

<meta name="robots" content="index,follow">

viewport 布局视口
viewport 可以让布局在移动浏览器上显示的更好。通常会写：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

content 参数：

width
viewport 宽度，为一个正整数，或字符串"device-width" ，音标 /dɪˈvaɪs/
height
viewport 高度，这个属性对我们并不重要，很少使用
initial-scale
设置页面的初始缩放值，为一个数字，可以带小数
maximum-scale
允许用户的最大缩放值，为一个数字，可以带小数
minimum-scale
允许用户的最小缩放值，为一个数字，可以带小数
user-scalable
是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

而如果你的网站不是响应式的，请不要使用initial-scale或者禁用缩放。通常会写：

<meta name="viewport" content="width=device-width,user-scalable=yes">

移动项目头部可增加的meta

<meta charset="UTF-8">

<!-- 优先使用 IE 最新版本和 Chrome --> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 

<!-- 为移动设备添加 viewport --> 
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 

<!-- 添加到主屏后的标题（iOS 6 新增） -->
<meta name="apple-mobile-web-app-title" content=""> 

<!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 --> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 

<!-- 设置苹果工具栏颜色 --> 
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 

<!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） --> 
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> 

<!-- 忽略页面中的数字识别为电话，忽略email识别 --> 
<meta name="format-detection" content="telephone=no, email=no" />

清虚桂意

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html之结构详解

概述<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。titletitle 标签定义文档的标题，在所有 HTML/XHTML 文档中都是必需的。<head> <title&g
复制链接

扫一扫