HTML骨架&基本语法、标签（一）

骨架

DTD（Document Type Definition，文本类型定义），必须出现在第一行。让浏览器知道是什么格式的文件。

<!DOCTYPE html>

<!>表示警示标签。

DOCTYPE表示文档类型。

html就是HTML超文本标记语言。

整个网页必须被<html></html>包裹，它里面有<head></head>和<body></body>两部分。

关于HTML标签

<head></head> ：网页的配置

<body></body> ：网页的正式内容，浏览器可视区域

标签有一个属性lang，是英语language语言的意思，表示整个网页的主体语言。

en表示英语。

中文的表示法有三种。zh、cn、zh-CN。

需要注意的是，无论哪种语言，都使用英文开发。

<html **lang="en" > 
<html **lang="zh-CN">

.html不是纯文本文件吗，为什么又变成超文本标记语言了？

.html 文件既是纯文本文件，也是超文本标记语言文件，这两者并不矛盾。这主要取决于文件的用途和解析方式：

纯文本文件的角度 .html 文件本质上是由文本组成的，任何文本编辑器（如 Notepad、VS Code）都可以打开和编辑。它以纯文本格式存储，不包含二进制数据。因此，从存储结构来看，它确实是一个纯文本文件。

超文本标记语言的角度 .html 文件遵循 HTML 标准，用于定义网页的结构和内容。浏览器会将 .html 文件解析为超文本页面，并呈现为带有样式、链接、图片和交互功能的网页。超文本指的是文件中可以包含其他资源（如链接、脚本等）并通过标记语言实现复杂功能。

基本语法和标签

快捷键

HTML骨架	html:5 → tab
快速生成元素	元素名→tab
自动生成多个元素	div*5 → tab
生成h1-h6	h$*6 → tab
复制当前行文本	shift+alt+键盘上下箭头
删除当前行	ctrl+shift+k
选中多个光标	按住滚轮键不松手，向下拖动鼠标（不是滚动滚轮）
在任意位置换行	按住ctrl+enter
放大或缩小文字	Ctrl+键盘（+或者-）

常见标签

head标签

mata标签

在head标签对中，是一个个文件的配置。几乎所有的配置都是写在meta标签中。

meta就是“元”的意思，表示基本配置。

字符集

配置字符集：

<meta charset="UTF-8">
<meta charset="gb2312">
<meta charset="gbk">

charset是英语character set文字集合的意思。

charset 属性设置文本的字符集。

字符集	字库是否全面	优缺点
UTF-8	这个字库涵盖了地球上所有国家、民族的语言文字。非常全，每年更新，它是一个国际化的字库	每个汉字占3个字节。所以如果你想网页快一点打开，不能使用UTF-8。新华网的阿拉伯语频道、日语频道等都要使用UTF-8。
gb2312	gb是国标的意思，只有汉族的文字和少量其他符号。	每个汉字占2个字节。几乎所有的门户网站，都是gb2312。
gbk	gbk是gb2312的略微增强版，文字稍微多了点， gbk也是只有汉语，只不过多了点怪异汉语字，比如“喆”。	每个汉字占2个字节。几乎所有的门户网站，都是gbk。

什么时候使用utf-8，什么时候使用gbk？

如果你的网页使用场景是面向群体是国际化的，使用utf-8，比如中华网；如果面向群体主要是国内，使用gbk比如腾讯网。

修改字符集：

比如我们现在的字符集是gbk，修改为utf-8

第一步要将meta标签改为utf-8

<meta charset="utf-8">

第二步点击右下角字符集，选择通过编码保存，然后选择utf-8

视口标签

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

如果不加这个视口，手机看这个网页是“俯瞰”模式，将以980px宽度俯瞰页面

如果加上这个视口，手机看网页就是“APP”模式，将以APP的状态、字号看页面。

（点击键盘上F12查看页面源代码，点击右上角切换网页查看模式）

viewport关键字，后面描述。

浏览器私有设置

edge是win10中的IE升级版浏览器，这句话的意思表示设置兼容性为让edge和ie渲染方式一样。

<meta http-equiv="X-UA-Compatible" content=" **ie=edge** ">

类似的还有一些“双核浏览器”比如360浏览器、QQ浏览器、搜狗高速浏览器、百度浏览器、猎豹浏览器等，都可以加上这句话，表示尽可能的用高级核打开页面：

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

关键字

viewport关键字，表示视口属性，设置文本自适应手机端的模式打开。

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

keywords关键字

SEO（search engine optimization，搜索引擎优化）

最基本的SEO技术就是把keywords写好。keywords就是网页关键字。

name属性一定要设置为keywords，content就是关键字的内容，中间用逗号隔开

<meta name="keywords" content="前端,HTML,JavaScript">

description关键字（页面描述）

页面描述就是搜索引擎搜到你之后，展示的文字。

<meta name="description" content=" 网页的描述" />

以腾讯网为例，看到源码： keywords和description

title标签

title就是在浏览器选项卡的区域显示的文字：

<title>我是网页标题</title>

h系列标签【headline】

包含一共六级标题，有h1,h2,h3,h4,h5,h6

都是双标签，容器级标签

作用：给内部内容添加对应级别标题的语义

标签根据重要性不同，认为权重不同，所有的标题标签的权重都比别的标签要高

如果从浏览器的角度去考虑，它的权重在搜索引擎的优化，搜索引擎的优化除了会抓取meta标签配置的keywords之外还会优先抓取标题的内容，h1标签的权重是最高的，一个页面只使用一个h1，通常用来制作网页的logo，如果你在页面中设置了多个h1标签，搜索引擎会认为你在作弊，从而降低排名。

p标签【paragraph】

双标签，文本级标签

作用：添加一个完整段落的语义

img标签【image】

单标签，文本级标签

作用：在指定位置插入一张图片

属性：

src：引入图片的路径

alt：图片加载失败的替换文本

width：设置图片宽

height：设置图片高

一般宽高只设置其一，比如宽，高度会等比例进行缩放

border：作用是给图片添加边框（加边框不止有黑色边框，通常通过CSS加边框）

title：作用是设置鼠标以上图片时候的悬停文本

相对路径和绝对路径：

    <img src="file:///E:/vs/html/12.20/1.png" alt="真相只有一个" border="10" width="200px">

    <img src="/1.png" alt="真相只有一个" border="10" width="200px">

    <img src="../12.20/1.png" alt="真相只有一个" border="10" width="200px">

    <img src="../2.jpg" alt="真相只有一个" border="10" width="200px">

相对路径：从html文件出发，找到对应图片位置的路径

如果进入到某个文件夹使用‘/’，如果出某个文件夹使用‘../’

如果需要出多个文件夹，使用多个../

绝对路径：主要分为盘符绝对地址，和网站的绝对地址

通过c盘根目录出发去查找你对应文件位置，工作中不使用这种方法，因为服务器没有c盘...这些目录

锚点<a></a>标签【anchor】

双标签，文本级标签

作用：在指定位置添加一个超级链接，从而实现相应的跳转

属性：

herf：指定跳转到的网址

<a href="http://www.baidu.com">跳转到百度</a>

target：是否在新标签打开链接，值一定是"_blank"

<a href="xxxxx.html">跳转到xxxxx文件</a>

title：鼠标移上文字之后的悬停文本

<a href="xxxxx.html" target="_blank" title="鼠标移上的文字">跳转到xxxxx文件</a>

页面锚点的使用：

锚点的作用：实现点击超级链接从而实现页面内的跳转

有两种方法：

方法一

设置一个空锚点，然后给这个空锚点设置一个name属性值和锚的href属性是一的

“锚”，href属性，后面一定要加#号

<a href="#jbxx">基本信息</a>

锚点的“点”，name属性设置被跳转的点

<a name="jbxx"></a>

实例：

<h2>周杰伦</h2>

   <a href="#jbxx">基本信息</a>

   <a href="#znjl">早年经历</a>

   <a href="#yyjl">演艺经历</a>

   

   <h3>基本信息</h3>

   <a name="jbxx"></a>

   <p>

       周杰伦（Jay Chou），1979年1月18日出生于台湾省新北市，祖籍福建省泉州市永春县，中国台湾流行乐男歌手、原创音乐人、演员、导演等，毕业于淡江中学。

       2000年发行首张个人专辑《Jay》。2001年发行的专辑《范特西》奠定其融合中西方音乐的风格 [1] 。2002年举行“The One”世界巡回演唱会 [2] 。2003年成为美国《时代周刊》封面人物 [3-4] 。2004年获得世界音乐大奖中国区最畅销艺人奖 [5] 。2005年凭借动作片《头文字D》获得台湾电影金马奖、香港电影金像奖最佳新人奖 [6] 。2006年起连续三年获得世界音乐大奖中国区最畅销艺人奖 [7] 。2007年自编自导的文艺片《不能说的秘密》获得台湾电影金马奖年度台湾杰出电影奖 [8] 。

       2008年凭借歌曲《青花瓷》获得第19届金曲奖最佳作曲人奖。2009年入选美国CNN评出的“25位亚洲最具影响力的人物” [9] ，同年获得第20届金曲奖最佳国语男歌手奖 [10] 。2010年入选美国《Fast Company》评出的“全球百大创意人物” [11] 。2011年再度获得金曲奖最佳国语男歌手奖，并且第4次获得金曲奖最佳国语专辑奖；同年主演好莱坞电影《青蜂侠》 [12] 。2012年登福布斯中国名人榜榜首 [13] 。2014年发行华语乐坛首张数字音乐专辑《哎呦，不错哦》 [14] 。2019年起举行“嘉年华”世界巡回演唱会 [15]

   </p>

  

   <h3>早年经历</h3>

   <a name="znjl"></a>

   <p>

       周杰伦出生于台湾省新北市，祖籍福建省泉州市永春县 [23] 。周杰伦4岁的时候，母亲叶惠美把他送到淡江山叶幼儿音乐班学习钢琴 [24] 。周杰伦读初中二年级时，他的父母因性格不合离婚，而周杰伦则归母亲叶惠美抚养。中考时，周杰伦没有考上普通高中；同年，他因为擅长钢琴而被淡江中学第一届音乐班录取。高中毕业以后，他两次报考台北大学音乐系均没有被录取，于是他开始在一家餐馆打工

   </p>

    <h3>演艺经历</h3>

   <a name="yyjl"></a>

   <p>

       2001年9月，周杰伦发行了第二张专辑《范特西》，他除了担任专辑的制作人外，还包办了专辑中所有歌曲的作曲；该专辑是周杰伦确立其唱片风格的作品，其中结合中西方音乐元素的主打歌《双截棍》成为饶舌歌曲的代表作之一 [32-33] ；该专辑发行后也让周杰伦打开东南亚市场 [32] ，并于次年获得第13届台湾金曲奖最佳专辑制作人奖、最佳作曲人奖、最佳流行音乐专辑奖以及香港唱片销量大奖颁奖典礼十大销量国语唱片等奖项 [34] ；10月，为李玟创作融合中西方音乐元素的歌曲《刀马旦》 [35] ；12月24日，发行EP《Fantasy + Plus》，收录了他在桃园巨蛋演唱会上演唱的《你比从前快乐》、《世界末日》等歌曲；同年，获得第19届十大劲歌金曲颁奖典礼最受欢迎唱作歌星金奖、叱咤乐坛流行榜颁奖典礼叱咤乐坛生力军男歌手金奖等奖项

   </p>

方法二

设置锚点的点为标签的id属性

锚

<a href="#jbxx">基本信息</a>

锚点的点：由原来的a标签的name属性变为了其他标签id属性，id属性的值要和href一样

<h3 id="jbxx">基本信息</h3>