HTML相关知识 | 青训营笔记

这是我参与[第四届青训营]笔记创作活动的第1天

- 了解HTML基本结构

- 理解HTML相关标记

1. HTML(HyperText Markup Language)

超文本标记语言，主要用来描述网页中的文字和图像信息；

2. HTML文档基本格式

包括<!DOCTYPE>文档类型声明、<html>根标记、<head>头部标记以及<body>主体标记。

其中<!DOCTPYE>用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范；

3.HTML语法

标签和属性不区分大小写，推荐小写；
空标签可以不闭合，如input、meta等；
属性值推荐用双引号包裹；
某些属性值可以省略，如required、readonly等；

4.HTML文本标记

4.1 单标记与双标记

单标记：也称空标记。是指用一个标记符号即可完整地描述某个功能的标记。

双标记：也称体标记。是指由开始和结束两个标记符组成的标记，其语法格式为：<标记名>内容</标记名>。

QQ图片20220724112440.png

其中<p></p>就是双标记；<hr/>就是单标记；

T8IY3A{OOMNOC{UR$TPY}{L.png

4.2 标题与段落标记

标题标记

HTML提供了6种标题标记，分别用h1~h6表示，依次代表一级标题、二级标题......六级标题，标题样式逐步变小，其基本语法格式 <hn align="对齐方式">标题文本</hn>，align是标题标记的属性，用于指定标题的对齐方式，其中属性的取值有：left(左对齐)、right(右对齐)、center(居中对齐)，不设置属性即默认左对齐。下图是默认左对齐。

QQ图片20220724113835.png

h1标记通常在一个页面中只使用一个，常用在网站的logo部分；

段落标记

<p></p>是HTML文档中最常用的标记，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行

5.HTML常见图像标记

要想在网页中显示图像需要使用<img />标记，其基本语法格式如下： <img src="图像URL" />，src属性用于指定图像文件的路径和文件名；alt属性是图像不能显示时的替换文本；这里的title属性是鼠标悬停时显示的内容。

6.HTML列表标记

6.1 无序列表与有序列表

6.1.1 无序列表

它是网页中最常用的列表，“无序”是因为各个列表项没有顺序级别之分，通常是并列的；基本语法格式为：

  <ul>
      <li>列表项1</li>
      <li>列表项1</li>
      <li>列表项1</li>
      ...
   </ul>

其中<li></li>标记嵌套在<ul></ul>标记中，用于描述具体的列表项，每个无序列表中至少含有一个列表项。

QQ图片20220724140231.png

QQ图片20220724140242.png

6.1.2 有序列表

即为有顺序的列表，基本语法格式为：

  <ol>
      <li>列表项1</li>
      <li>列表项1</li>
      <li>列表项1</li>
      ...
   </ol>

QQ图片20220724140247.png

6.2 定义列表

它常用来对术语或名词进行解释，它的列表项前没有任何项目符号，基本语法为：

     <dl>
        <dt>名词1</dt>
        <dd>名词解释1</dd>
        <dd>名词解释2</dd>
        ...
        <dt>名词2</dt>
        <dd>名词解释1</dd>
        ...
     </dl>

QQ图片20220724140253.png 属于“多对多”的关系；

7.链接

7.1 超链接

基本语法格式为<a href = "跳转目标" target = "目标窗口弹出方式">文本或图像</a>，<a>是一个行内标记，用于定义超链接，其中“href”用于指定链接目标的url地址，“target”用于指定链接页面的打开方式，其取值有_self和_blank两种。

QQ图片20220724140258.png

HTML中还有输入、引用类的一些标记，比如<input>、<q></q>、<pre>等等，在这里不一一赘述。

8.HTML的页面布局

从HTML页面的划分来看，分为页头、页面主体、页旁、页尾，其中页头放在header标签中；页面主题一般放在main标签中，一个页面只包含一个main元素；aside表示与页面相关的但不直接属于这个页面的一些内容；最后footer标签会放一些版权信息、链接等一些内容。

总结

通过第一天的学习，对HTML的相关文本标签、图像、列表标签都有所了解，明白了HTML的基本语法以及它的语义。

了解HTML的相关基础知识