HTML的基本骨架

最新推荐文章于 2022-12-30 20:08:03 发布

脑袋不灵光的小白羊

最新推荐文章于 2022-12-30 20:08:03 发布

阅读量1.5k

点赞数

分类专栏： HTML+CSS+JS 文章标签： html

本文链接：https://blog.csdn.net/qq_42588990/article/details/107556998

版权

HTML+CSS+JS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

HTML

HTML基本结构

HTML基本结构

HTML的基本骨架

<head lang="en">

lang 是 language 的意思，lang=“en” 属性对每张页面中的主要语言进行声明，en 代表了英文，只是个声明，声明了它，对搜索引擎和浏览器更友好，并不会更改显示内容。它还有常见的值是 zh-CN，代表了中文（搜索引擎不会判断该站点是中文还是英文，它让搜索引擎知道你的站点是中文站，这些都是HTML规范，越规范，越容易被收录）

<meta charset="UTF-8">

meta标签用来描述一个HTML网页文档的属性，此处的charset="utf-8"是说当前使用的是utf-8编码格式，GBK是在国家标准GB2312基础上扩容后兼容GB2312的标准，GBK编码专门来解决中文编码的，是双字节的，UTF-8编码是用以解决国际上字符的一种多字节编码。

<！DOCTYPE html>

什么是DTD文档模型，为什么写在HTML当中？

DTD文档模型也称DOCTYPE文档声明，它是Document TypeDefinition的英文缩写，意思是文档类型定义，在HTML文档中，用来指定页面所使用的HTML（或者XHTML）的版本。要想制作符合标准的页面，一个必不可少的关键组成部分就是DOCTYPE声明。只有确定了一个正确的DOCTYPE，HTML里的标识和CSS才能正常生效。它一般被定义在页面的第一行，html标签之前。
它不是HTML标签。
我们写好一份HTML文档，这时候全是代码，用户看不懂，是不是得用浏览器里的引擎给翻译一下？用户才看得到界面。关键是HTML有好多个版本，浏览器怎么知道按哪个版本解释？你老爸让你去扫地，你老妈让你去洗碗，你是听谁的，都是长辈，这时候如果你们家规定好了，凡事都听你老爸的，这个就很好解决了，去扫地。这个DTD文档模型就是这个意思，管它多少个HTML版本，我规定好我写的这个HTML文档以哪个为准就行，那我就知道我最终页面会被解释成一个什么样子。

DTD文档模型=DOCTYPE=DOCTYPE文档声明

<head>  </head>

用于定文档的头部，它是所有头部元素的容器。head 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息，包括文档的标题、在web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：

<title>、<meta>、<link>、<style>、 <script>

应该把标签放在文档的开始处，紧跟在后面，并处于标签之前。文档的头部经常会包含一些标签，用来告诉浏览器关于文档的附加信息。

<title></title>

1、可定义文档的标题
2、它显示在浏览器窗口的标题栏或状态栏上
3、当把文档加入用户的收藏夹或书签列表时，标题将成为该文档的默认名称
4、title 标签是 head 标签中唯一必须要求包含的东西，就是说写 head 一定要有 title ，不是说其他的不加，而是 title 一定要加。
5、title 写和你网页相关的关键词有利于SEO优化。

SEO是搜索引擎优化的英文缩写

通过对网站内容调整，满足搜索引擎的排名需求，从而提高自己网站被搜索引擎平台录取的几率，从而把精准用户带到网站。网站都有目标群体，通过title、meta标签可以让目标群体通过关键词找到你的网站，所以你定义的关键词决定了会吸引什么样的群体。

<meta>

元素可提供有关页面的元信息（meta-information），用来向浏览器或搜索引擎描述页面。比如文档的描述和关键词。它只可以放在head中。属于元信息标签。
常见的meta有

Keywords(关键字)　keywords用来告诉搜索引擎你网页的关键字是什么。

<meta name="keywords" content="web前端">

description(网站内容描述) description用来告诉搜索引擎你的网站主要内容。

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

author作者标注网页的作者

<meta name="author" content="root,root@xxxx.com">

语义化标签

语义化：明白每个标签的用途（在什么情况下使用此标签合理）比如：网页上文章的标题就可以用标题标签h1-h6，段落用p,地址用address等。
好处：
1、更容易被搜索引擎收录
2、更容易让屏幕阅读器读出网页内容

HTML 中常用的标签

字符样式

图片

1、使用 <img>将图像添加到页面
2、空标记
3、必须属性：src（存储图像的位置）
4、常用属性：width、height、alt、title

<img src="URL" width="300" alt="替换文本属性”/>

title定义了鼠标经过图片时显示的内容，搜索引擎抓取图片时，是根据title定义的内容来分析图片是什么的
alt当图片未能正常显示时，用于给用户的提示信息

超链接

1.使用<a></a>元素创建一个超链接
2.语法：

<a href=""  target=""  title=””>文本</a>

href属性：链接URL
target属性：目标，可取值_blank,_self等
name属性：锚点名称
title属性：定义了鼠标经过时的提示文字

脑袋不灵光的小白羊

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML的基本骨架

HTML HTML基本结构什么是DTD文档模型，为什么写在HTML当中？SEO是搜索引擎优化的英文缩写语义化标签HTML 中常用的标签图片超链接HTML基本结构<head lang="en">lang 是 language 的意思，lang=“en” 属性对每张页面中的主要语言进行声明，en 代表了英文，只是个声明，声明了它，对搜索引擎和浏览器更友好，并不会更改显示内容。它还有常见的值是 zh-CN，代表了中文（搜索引擎不会判断该站点是中文还是英文，它让搜索引擎知道你的站点是中文站，这
复制链接

扫一扫