html学习一周总结
时间：2023-09-04 07:24:02 | 来源：网站运营
时间：2023-09-04 07:24:02 来源：网站运营
html学习一周总结：自一月六号开始学习html & css基础已经有一周左右了，为了总结学习过的内容方便日后回顾，打算以后每周记个周记，温故而知新，顺便也是查漏补缺。目前学习已经进行到css的内容，因此第一篇周记就主要总结html相关内容。
一.网页构成
我认为在学习前搞清楚网页的构成很重要，方便我们理解这几个语言间的关系。网页可以想像成一层一层叠加组成的，html、css、JavaScript分别书写网页的结构、表现和行为，因为我是学设计的，学习到此概念后能较快的理解，并根据老师讲解补充整理了它们所对应的内容，如下图：
网页构成
html控制网页的结构，可能类似交互设计的低保真原型图，规定了整个网页的骨架结构、布局以及要呈现的内容；css书写网页的样式，一切用户直接在网页获取的信息，直观的字体、颜色等样式，可以理解为它是为网页披上皮肤，对应根绝视觉设计式来编写创建网页的样式表；有了骨架和皮肤，JS令网页“动”起来，可以理解为它来书写网页的交互行为和反馈。
以上是我的理解，由于学的还不久可能不是很对，欢迎一起讨论，也欢迎大佬们的指正～
二.html结构
1.基本语法结构
基本框架
首先html 全称为Hypertext markup language，翻译过来是超文本标记语言，这里的标记是指用标签的形式来标示文本不同的内容，不同的标签有不同的作用，html都是用一个个标签来搭建骨架的。
其次，标签也称为元素，在html中一般是成对出现的，有开始和结束，语法是：<></>。用<>将标签扩起来，</>尖括号里加斜杠表示结束，比如表示段落的标签p，就写作<p></p>，在中间写内容，也就是：
<p>在此处书写段落内容</p>
但是一些标签无需成对出现，叫做自结束标签，写作<标签名 />，比如换行标签br，可以直接写成<br />来使用。
最后，在html最基本的结构中，有且只有一个根目录<html></html>,所有内容都要写在html标签中，html有两个子标签<head></head> 和 <body></body>。
head标签不会在页面中直接显示，它用来帮助浏览器解析页面，在其中设立信息，如css/js标签等。（现在学到一些css的内容，在css内部样式中，css标签就需要写在head标签里，所用语法区别与html。）head标签里的tittle标签是表示页面的名称，将会显示在浏览器标题栏中。搜索引擎在检索页面时，会首先检索title内容，它是网页中，对于搜索引擎来说最重要的内容，会影响到网页在搜索引擎中的排名。
body标签中的内容直接显示在页面中，用来设置网页的主体内容，网页中所有可见内容，都应该在body中编写。
2.文档声明
在基本框架中最上面一行写了<!doctype html>，这个是用来声明当前网页用了html5的标准。如果不写，则会导致网页入
怪异模式，浏览器解析页面会导致页面无法正常显示，所以为了避免进入该模式，一定要写这个文档声明。
因为制定标准的W3C和WHATWG两个组织制定过很多标准，如果不声明网页是用什么标准写的就会导致上文提到的结果。最先是W3C制定，后者因为一些原因（觉得不够严谨等）也制定了一些，分别有公司使用，总之最后两者公同制定了html5标准，是现在比较通用的标准，声明写起来、记起来都比较方便。
3.字符集
计算机中保存的所有内容都需要转成二进制，人类使用的文字符号就需要进行编码转换为二进制，浏览器再由二进制转换为文字符号进行解码，解码也需要转换，转换采取特定的字符集来进行。而各个国家地区使用文字不同，设定的字符集也就各种各样，编码与解码采用的字符集不匹配时就会出现乱码，因此有必要在编写时声明所使用字符集，采用meta标签来声明，meta标签是个自结束标签，所以语法为：
<meta charset="utf-8" />
这里charset就是字符集的意思，等号后面的值就是指采用utf-8的字符集，这是个万国码，目前通用的字符集。
三.常用标签
要注意的是html中的标签基本都是语意标签，虽然也可以设置样式，但是很不推荐，样式都由css设置。
1.目前学到的一些常用html标签有：一级标题标签 <h1></h1> (有一到六级h1-h6，重要程度依次递减，搜索引擎检索完title后会立即检索h1内容)
段落标签 <p></p>
超链接标签<a></a>
换行标签<br />
水平线标签<hr />
图片标签<img />
注释标签<!-- -->
纯粹块元素<div></div> (没有任何语意，不会为里面的内容设定任何默认样式，用作页面布局）
纯粹内联元素<span></span> （没有任何语意，专用来选中文字，然后为文字设定样式）
2.属性每个标签都有共同或特定的属性，写在开始标签的标签名后面，用空格隔开，使用名值对的方式设定：xx="xx"。
比如每个标签都有id属性，这是给标签设定一个特定标示，同一页面内id的值不能重复，且值不能以数字开头，如:
<p id="p1">我是段落标签</p>
这个意思就是我给这个p标签设置了一个id值，叫做p1，选择这个标签设定样式，或者超链接到他时就能用到这个id值。
有的标签有必须写的属性，比如：
（1）图片标签需要书写引入外部图片的路径，这个路径是指相对路径，即是指图片相对于html文件存储位置的路径，用src属性来写路径
1）在同一根目录下：
<img src="图片名.jpeg" />
2)在同一文件夹，但图片在这一文件夹的子文件夹中：
<img src="子文件夹名/图片名.jpeg" />
如果图片还在子文件夹中的文件夹中则写：
<img src="孙子文件夹/子文件夹/图片名.jpeg" />
3)图片在父文件夹中，则用../表示返回上一级，返回多少级就写多少个../ ：
<img src="../图片名.jpeg" />
4)图片在父文件夹的另一个子文件夹中：
<img src="../兄弟文件夹名/图片名.jpeg" />
图片的缩略名需要写出来，常用.jpeg 、.png 、 .gif ,用哪种格式看情况存图（用图片效果、大小来判断），大小最好预先裁好。
（2）超链接标签需要指定到链接的路径，因此必须填它的href属性指引路径，即：
1）绝对路径 ： <a href="
http://www.baidu.com">我是一个超链接</a> 这就是指直接跳转到我所指定的网页中。
2）相对路径：<a href="xxx.html">我是一个超链接</a> 这是指在跳转到同一目录下的xxx.html网页上。
3）同一页面内指定内容：用设置该指定内容的id值的方式跳转到指定内容的位置。
比如页面内有这首诗的内容，
<p>似虎能缘木，如驹不伏辕。
但知空鼠穴，无意为鱼餐。
薄荷时时醉，氍毹夜夜温。
前生旧童子，伴我老山村。
</p>
我想直接跳转到这首诗的位置，我就可以给这个p标签设置一个id值：
<p id="poetry">似虎能缘木，如驹不伏辕。
但知空鼠穴，无意为鱼餐。
薄荷时时醉，氍毹夜夜温。
前生旧童子，伴我老山村。
</p>
然后超链接写<a href="#poetry">去指定内容</a>，点击“去指定内容”就能跳转到诗词。
另外，超链接标签还有一个常用属性target，通过设置target值，设定超链接在本窗口打开还是新窗口打开，默认值为本窗口，所以不写时默认在当前窗口打开：
<a href="
http://xxxx.xxx" target="_self">当前窗口</a>
<a href="
http://xxx.xxxx.xxx" target="_blank">新窗口打开</a>
当前是在B站上看课自学的，看的尚硅谷的课程，课程很细致，小白表示非常友好，希望以后也都能跟得上～
以上就是目前学到的html的一些基本内容，期待交流和指正～
在线咨询
