前端三部曲之Html -- 1（html的基本结构和常见的meta标签的作用）

一个H5页面的基本结构是什么

我么在编辑器中输入html:5可以得到

<!DOCTYPE html>
<!-- 声明文档类型 -->
<html lang="en">
<!-- 标识Html文档所用的语言是英语 -->
<head><meta charset="UTF-8"><!-- 声明文档所使用的字符编码是UTF-8 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 移动端适配 --><meta http-equiv="X-UA-Compatible" content="ie=edge"><!-- 指定文件的兼容模式，模式Edge 模式告诉 IE 以最高级模式渲染文档 --><title>勇哥测试页面</title><link rel="stylesheet" href="#"><!-- 引入外部css文件 -->
</head>
<body>
<!-- 结构标签就不介绍 --><script></script><script src="#"></script><!-- 书写和引用外部js -->
</body>
</html>

常见的字符编码还有： gb2312（国家标准第2312条）

gbk2312（扩展版加了中文繁体）

unicode（万国码）

UTF-8（万国码升级版）

一般都用UTF-8包含了基本上所有的字符编码，一个大合集

SEO优化 -- meta标签优化

什么是SEO?

百度词条介绍

SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是：为网站提供生态式的自我营销解决方案，让其在行业内占据领先地位，获得品牌收益；SEO包含站外SEO和站内SEO两方面；为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，还会使搜索引擎中显示的网站相关信息对用户来说更具有吸引力。

目的就是让你的页面能够更好的被搜索引擎爬虫抓取到

这html页面中通过一些meta标签来进行标识

页面描述

<meta name="description" content="不超过150个字符" />

页面关键词

<meta name="keywords" content="html5, css3, 关键字"/>

定义网页作者

<meta name="author" content="yongGcode" />

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

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

接下来再来简单的说说meta标签，由于meta的内容呢实在太多（学海无涯），这里就简单的介绍一下。

如果有问题及时联系，互相交流

转自w3c对meta的介绍：

name：主要是对页面的解释说明和介绍

需要配合content使用

　　属性值：

author 　　作者
description　描述　
keywords　关键字　
generator　网页制作用的软件　
revised　　重新访问的时间　　
others　　其他描述
viewport 移动端窗口配置
robots 定义搜索引擎爬虫的索引方式
copyright 标注版权信息
rederer 规定双核浏览器默认渲染引擎

http-equiv：属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

需要配合content使用

当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部

意思应该是当浏览器输入一个网址的时候，会向服务器请求资源，在请求html文件时，服务器会在发送文件的头文件中除了发送content-type:text/html，还会发送你所描述的内容给浏览器端

content：是对前面一个属性的描述，每个meta标签都会有content属性，content会配合name，http-equiv，scheme来使用

scheme：属性用于指定要用来翻译属性值的方案。此方案应该在由 <head> 标签的 profile 属性指定的概况文件中进行了定义。

以上就是今天分享的内容了，欢迎一起交流分享！！

转载于:https://www.cnblogs.com/yongG/p/10993116.html

前端三部曲之Html -- 1（html的基本结构和常见的meta标签的作用）相关推荐

【HTML】处理＜br＞换行符追加到前端换行无效的问题 --- html中渲染的字符串中包含HTML标签无效的处理方法，字符串中包含HTML标签被转义的问题解决
[HTML]处理换行符追加到前端换行无效的问题 --- html中渲染的字符串中包含HTML标签无效的处理方法,字符串中包含HTML标签被转义的问题解决参考文章: (1)[HTML]处理换行符 ...
前端搜索引擎优化SEO优化之Title 和 Meta 标签
前端搜索引擎优化SEO优化之Title 和 Meta 标签对搜索引擎最友好(Search Engine Friendly)的网页是静态网页,但大部分内容丰富或互动型网站都不可避免采用到相关技术语言来 ...
前端性能优化（二）01-页面性能优化之浏览器——浏览器的主要作用浏览器的组成结构
前端性能优化(二)01-页面性能优化之浏览器--浏览器的主要作用 & 浏览器的组成结构页面性能优化前端性能优化可以分为两大部分:浏览器部分.代码部分. 浏览器部分又可以分为: 网络层面浏 ...
Tencent APIJSON 零代码、全功能、强安全 ORM 库后端接口和文档零代码，前端(客户端) 定制返回 JSON 的数据和结构
项目介绍零代码.全功能.强安全 ORM 库后端接口和文档零代码,前端(客户端) 定制返回 JSON 的数据和结构. A JSON Transmission Protocol and an ORM ...
【前端实例代码】使用 HTML CSS实现指纹扫描仪特效动画效果 |前端开发网页制作基础入门教程网页开发中常见的样式与特效，收藏起来肯定用的上~
b站视频演示效果: [web前端特效源码]使用 HTML CSS 和 JavaScript 实现指纹扫描仪特效动画效果 |前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYP ...
移动前端开发中添加一些webkit专属的HTML5头部标签，帮助浏览器更好解析html代码，更好地将移动web前端页面表现出来。本文整理一些常用的meta标签...
<!DOCTYPE html> <html lang="zh-cmn-Hans"> ...
ssm框架里面前端拿HTML写,ssm框架引入Vue，声明式渲染，标签的href拼接字符串
一.引入Vue 在官网上下载vue.js.并用 1.下载Vue.js,地址:Vue.js下载地址二.通过ajax获取后台参数,使用Vue渲染调用后台control,获取到数据,传到前端,使用Vue ...
Unity导出的WebGL、网页前端、服务端以及硬件四级交互结构的实现（简单3d建模网页端物联网）
本文代码基于一个智慧楼宇项目: 前提:(Unity应该使用尽量最新的版本,2020年的应该就行,2019年的未知',2018年的好像就不行了) 模式简介: 1.服务端处理楼宇发送的信息,把处理过的信息 ...
【前端就业课第二阶段】CSS 零基础到实战（02）标签类型、字体与图片
整个前端学习路线以下路线为 CSDN C认提供: 如果想快点搞完并且就业可以选择超级实习生计划如果有技术想稳定点找工作,可以C认证,C认证还可以内推.招聘会 ,所以如果在校生想要稳一点, ...

前端三部曲之Html -- 1（html的基本结构和常见的meta标签的作用）

前端三部曲之Html -- 1（html的基本结构和常见的meta标签的作用）相关推荐

最新文章

热门文章