网页开发工具（vscode）
1、<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。
<!DOCTYPE html>
这句代码的意思是: 当前页面采取的是 HTML5 版本来显示网页。
2、Lang用来定义当前文档显示的语言。
1.en定义语言为英语
2.zh-CN定义语言为中文
简单来说,定义为en 就是英文网页,定义为 zh-CN 就是中文网页。
3、字符集(Characte rset)是多个字符的集合。以便计算机能够识别和存储各种文字。
在<head>标签内，可以通过<meta>标签的charset属性来规定 HTML文档应该使用哪种字符编码。
<meta charset=" UTF-8"/>
charset常用的值有:GB2312、BIG5、GBK和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符。
如下顺序（一般模板自动生成）：
4.1标签语义。
学习标签是有技巧的，重点是记住每个标签的语义。简单理解就是指标签的含义，即这个标签是用来干嘛的。
根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。
如标题标签、段落标签等组成一篇明了的文章。
总结：添加语义标签会让整个界面更加整洁明了。
4.2标题标签<h1> - <h6>。
为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题即<h1>-<h6>。
特点:
1.加了标题的文字会变的加粗，字号也会依次变大
2.一个标题独占一行。
4.3段落和换行标签。
在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。
如：<p>我是一个段落标签</p>
特点:
1.文本在一个段落中会根据浏览器窗口的大小自动换行。
2.段落和段落之问保有空隙。
在 HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签<br/>。
注意：直接在想要换行的地方插入<br/>就行。
特点:
1.<br />是个单标签.
2.<br />标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
4.4 文本格式化标签。
在网页中，有时需要为文字设置粗体、科体或下划线等效果，这时就需要用到HTML 中的文本格式化标签，使文字以特殊的方式显示。
标签语义:突出重要性,比普通文字更重要。
内容格式如下：
重点记住<strong>加粗<strong> 和 <em>倾斜<em>。
4.5 <div> 和<span>标签
<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的。
div 是 division 的缩写,表示分割、分区（是大盒子）。span 意为跨度、跨距（是小盒子）。
div一个人独占一行，span跨行，并列。
代码：
效果：
特点:
- <div>标签用来布局，但是现在一行只能放一个<div>。大盒子
- 2.<span>标签用来布局，一行上可以多个<span>。小盒子
4.6 图像标签和路径(重点)
1.图像标签。
在 HTML标签中，<img>标签用于定义HTML页面中的图像。
<img src="图像URL"/>
单词 image的缩写，意为图像。
src 是<img>标签的必须属性，它用于指定图像文件的路径和文件名。相当于path。
注意：Jpg要和html在同一个文件夹里（同一空间），这样才可以把jpg导入进去。
如下将图片和HTML放在todesk下：（发现png格式也可以，jpg和png都ok）
小top：要换行，加个<br />或者给一个<h？>标题标签就可以。
图像的一些使用语法：
Alt：(空格隔开，键值对形式)
Alt的效果：
剩下的属性用法与alt一样。
Title的效果：
多加了移到图片上的文字：这是wqh先生思密达。剩下的宽度长度和边幅就不展示了没多大意义，写法都和上面一样。
4.7 图像标签和路径(重点)
1.路径(前期铺垫知识)
（1）目录文件夹和根目录
目录文件夹:就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如 html文件、图片等。例如：
根目录:打开目录文件夹的第一层就是根目录。例如：
（2）VSCode 打开目录文件夹
4.8 图像标签和路径(重点 )
解释理解：在vscode中操作文件夹内的图像，在编辑HTML文件的同级或者上下级等。
相对路径：同级或者上下级。
简单来说，图片相对于 HTML页面的位置。
绝对路径：就是HTML或者图像所在电脑的位置。
例如：C:\Users\Desktop\网站
写法：<img src=”C:\Users\Desktop\网站\wqh.png”>
网站上的图片也可以获取，属于绝对路径。（右键复制图片的地址即可）
注意：绝对路径（\）与相对路径（/）是不一样。
4.9 超链接标签(重点):从一个页面到往另外一个页面的地方。
1.链接的语法格式:
单词 anchor['ænka(r)]的缩写，意为:锚。
属性作用：
注意：_self是当前窗口打开页面显示。_blank是重新打开一个窗口显示。文本或图像：相当于你要展现给别人看的东西，文字或者图像。
2.链接分类:
1.外部链接: 例如< a href="http://www.baidu.com">百度</a>。
2.内部链接:网站内部页面之间的相互链接,直接链接内部页面名称即可，例如<ahref="index.html">首页</a>。
注：内部链接就是html文件内的链接：一个html文件塞进另外一个html内。在浏览器内和外部来链接同理，点击转到另外的地方。
个人理解：外部链接是我们的html文件跳到别人的网页，如腾讯qq、百度等
内部链接是我们的html文件跳到自己做的另外的网页（开发过程中不具备专业的域名或者网站名字）。
空连接：<a href=”#”>这个是空连接</a>。
下载链接：如果 href里面地址是一个文件或者压缩包，会下载这个文件。
如下举例：
小tip：网页元索链接:在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.例如：<a href=”http://www.baidu.com”><img src= “wqh.png”>
锚点链接（一般用法类似于目录，快速定位到页面某个位置）：
在链接文本的 href 属性中,设置属性值为 #名字的形式,如<ahref="#two”>第1集</a>。
找到目标位置标签，里面添加一个id属性=刚才的名字，如:<h3 id="two”>第1集介绍</h3>
在实践发现个有趣的。当我们定位到目标位置后，想重新回到锚点处，可以利用两个html文件进行操作。
如：在111.html中，添加超链接：<a href="222.html">还有！！！</a>点击跳转到222.html文件内
在222.html文件内点击返回则又回跳转到111.html内。（记得不要加#，否则就固定在当前html文件内了）
当然以上属于两个文件之间的相互操作，如果要在一个文件内，从目标位置回到锚点处，则可以在锚点处做一个反锚点即可。效果如下：
<p id =”contest”></p>
<a href “#contest ”>回到顶部</a>
注意：这里有个小差别。因为是重新建立一个反向的锚点链接，所以当回去之后，到的位置就不是我们鼠标点的那个原来的锚点处了（这个问题以后想起来就解决。。）。当然也有好的地方，就是不管文章多长，<a href “#contest ”>回到顶部</a>这句语句可以无限生产了。
记住噢是每一个回到顶部都生效哈！！！
注：图片上的美女仅作教学示范，无其他传播；本页面图片也仅学习！
扫一扫
5853
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
