前端:HTML基础 | 青训营笔记

84 阅读2分钟

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

摘要:

  1. [前端与 HTML]课程内容总结(juejin.cn/course/byte…)
  2. 查阅MDN对HTML基础内容进行补充

参考文献:

  1. MDN Web Docs (mozilla.org)
  2. 前端与 HTML - 掘金 (juejin.cn)

内容:

HTML基础结构:

image.png

  1. 开始标签(Opening tag):包含元素的名称(本例为 p),被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
  2. 结束标签(Closing tag):与开始标签相似,只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误,这可能会产生一些奇怪的结果。
  3. 内容(Content):元素的内容,本例中就是所输入的文本本身。
  4. 元素(Element):开始标签、结束标签与内容相结合,便是一个完整的元素。

基本标签:

image.png

常用属性值:

image.png

元素属性语法:

image.png

一个属性必须包含如下内容:

  1. 一个空格,在属性和元素名称之间(如果已经有一个或多个属性,就与前一个属性之间有一个空格)。
  2. 属性名称,后面跟着一个等于号。
  3. 一个属性值,由一对引号 ("") 引起来。

布尔属性:

以disabled为例,可以标记表单输入使之变为不可用(变灰),此时用户不能再输入任何数据

image.png

实体引用:

在 HTML 中,字符 <、>、"、' 和 & 是特殊字符 将这些字符包含进你的文本中,必须使用字符引用 —— 表示字符的特殊编码,它们可以在那些情况下使用。每个字符引用以符号&开始,以分号 (;) 结束。

image.png

常用标签简介:

列表:

image.png

强调:

  1. <em> </em>表示内容的着重点(stress emphasis)会影响语义
  2. <strong> </strong>表示内容的重要性(strong importance)一般不影响语义 (参考:HTML标签strong和em - LkSh - 博客园 (cnblogs.com)

传统上的粗体、斜体、下划线: <b> <i> <u>

超链接:

<a href=""></a> href:属性,成为超文本引用或目标,将包含一个网址,创建基本链接

统一资源定位符(URL)与路径(path)快速入门

image.png

pl:欢迎批评指正 :D