青训营笔记 | 「前端与HTML」

90 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天

对于HTML
HTML是一种相当简单,由不同元素组成的标记语言可以被应用于文本片段,使文本在文档中具有不同的含义,将文档结构化为逻辑块,并且可以将图片,影像等内容嵌入到页面中。



完整的HTML页面

< !DOCTYPE html>
< html>
< head>
< meta charset="utf-8">
< title>我的测试站点< /title>
< /head>
< body>
< p>这是我的页面< /p>
< /body>
< /html>

其在浏览器的截图如下

2023-01-15 22 52 34.png


HTML中的< head >标签


< head>
< meta charset="utf-8">
< title>我的测试页面< /title >
< /head>

它的内容不会在浏览器中显示,它的作用是保存页面的一些元数据。

元数据

元数据就是描述数据的数据,而HTML有一个官方的方式来为一个文档添加元数据< meta>元素。

< meta charset="utf-8" >

这个元素简单的指定了文档的字符编码一在这个文档中被允许使用的字符集。 utf-8是一个通用 的字符集,它包含了任何人类语言中的大部分的字符。意味着该web页面可以显示任意的语言。



超链接a标签

通过将文本(或其它内容,见块级链接)包裹在< a >元素内,并给它一个href 属性(也称为超文 引用或目标,它将包含一个网址)来创建一个基本链接。

< p >我创建了一个指向
< a href="www.baidu.com" >百度主页的超链接。
< /p >

结果如图所示:

2023-01-15 23 26 34.png


不常用的一些标签

描述列表

< dl>
< dt>< /dt>
< dd>< /dd>
< /dl>
例如下列例子:

< dl>
< dt>内心独白< /dt>
< dd>戏剧中,某个角色对自己的内心活动或感受进行念白表演,这些台词只面向观众,而其他角色不会听到。< /dd>
< dt>语言独白< /dt>
< dd>戏剧中,某个角色把自己的想法直接进行念白表演,观众和其他角色都可以听到。

旁白< /dt>
< dd>戏剧中,为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白,只面向观众,内容一般都是角色的感受、想法、以及一些背景信息等。< /dd>
< /dl >

然后还有< cite>标签

< cite> 标签定义作品(比如书籍、歌曲、电影、电视节目、绘画、雕塑等等)的标题。 注释:人名不属于著作的标题。

< blockquote>标签

作用是标记长的引用;例如:

< blockquote>
Here is a long quotation here is a long quotation here is a long quotation
here is a long quotation here is a long quotation here is a long quotation
here is a long quotation here is a long quotation here is a long quotation.
< /blockquote>

< q>标签

作用是标记短的引用;例如:

< q>Here is a short quotation here is a short quotation


对于这些偏冷门的标签我们大概知道就行,冷门的一般也不用。

到此为止,今天的笔记就到此结束了,虽说有的知识点还没有写到,但是我也会加油的!!!