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

初识HTML

HTML的概述

HTML的概念

HTML 全称为 HyperText Markup Language，译为超文本标记语言。

HTML 不是一种编程语言，是一种描述性的标记语言。

作用：HTML是负责描述文档语义的语言。

概念：超文本

所谓的超文本，有两层含义：

（1）图片、音频、视频、动画、多媒体等内容，成为超文本，因为它们超出了文本的限制。

（2）不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件进行连接。即：超级链接文本。

概念：标记语言

HTML 不是一种编程语言，是一种描述性的标记语言。这主要有两层含义：

（1）标记语言是一套标记标签。比如：标签<a>表示超链接、标签<img>表示图片、标签<h1>表示一级标题等等，它们都是属于 HTML 标签。说的通俗一点就是：网页是由网页元素组成的，这些元素是由 HTML 标签描述出来，然后通过浏览器解析，就可以显示给用户看了。

（2）编程语言是有编译过程的，而标记语言没有编译过程，HTML标签是直接由浏览器解析执行。

HTML是负责描述文档语义的语言

HTML 格式的文件是一个纯文本文件（就是用txt文件改名而成），用一些标签来描述语义，这些标签在浏览器页面上是无法直观看到的，所以称之为“超文本标记语言”。

DOM树

DOM树.png

HTML的示例

解析一个HTML元素

HTML元素解析.png 1.一个元素 = 开始标签 + 结束标签 + 两个标签包裹的内容

2.有一些元素没有结束标签，如：img、br、hr、input等。

HTML元素有2种重要类别：

块级元素：块级元素是指那些在浏览器显示中占据一行，并且排斥与其他元素统一行的元素。块级元素中可以设置 width、height、padding、margin 等属性。即会导致内容展示的换行，如：Div、h1-h6、form、p、li、ol、li、dl、dt、dd、address、caption、table、tbody、td、tfoot、th、thead、tr等。
内联元素：是指在开发中它会与它的兄弟元素在同一行中从左往右依次排序，不会单独占一行的元素。即不会导致换行，如a、span、em、br、strong、i、img、input等。

元素的属性

元素属性.png HTML元素也可以拥有属性，加在开始标签内，比如class

属性一般为 属性名=“属性值” 的形式，也可能为没有值的布尔属性：

普通属性的例子：<a>的属性

href: 这个属性声明超链接指向的的 web 地址
title : 当鼠标悬停在超链接上时，这部分信息将以工具提示的形式显示。
target : 用于指定链接如何呈现出来。例如， target="_blank" 将在新标签页中显示链接。如果你希望在当前标签页显示链接，忽略这个属性即可。

布尔属性的例子：属性disable

<input type="text" disabled>

常用HTML元素

标题标签 `<h1>~<h6>`

列表标签

无序最外层为ul，有序（1. 2. ...）为ol

<ul>
  <li>item1</li>
  <li>item2</li>
  ......
</ul>

图片标签`<img>`

<img 
    width="100"
    height="30"
    src="https://图片链接"
    alt="san logo"#对图片的说明，当链接出现问题无法显示，页面就会显示这个名字 
/>

超链接标签`<a>`

会出现一段带下划线的文本，点击会跳转到对应的网址，标签中的文字（W3School）可以替换为包裹图像的img标签。

<a href="http://www.w3school.com.cn">w3school</a>

文本标签`<p>`

可以内嵌一些标签更改文本样式

标签	描述
em	被强调的文本：斜体
storng	重要的文本：加粗
kbd	定义键盘文本。它表示文本是从键盘上键入的，经常用在与计算机相关的文档或手册中。
code	定义代码文本。
var	定义变量。您可以将此标签与`<pre>`及`<code>`标签配合使用。`<pre>`：预格式化的文本，在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。`<code>`标签是一个短语标签，用来定义计算机代码文本。

表单标签`<input>`

type默认text，placeholder是提示信息，输入时消失（可以没有）

type:

text：文本
checkbox：复选框
file：选择文件的控件
radio：单选框
range：拉动条
submit：元素被渲染成按钮，reset：定义重置按钮（重置所有的表单值为默认值）
password：定义密码字段（字段中的字符会被遮蔽）
color：拾色器
date：日期，datetime：日期和时间
image：定义图像作为提交按钮

多行输入框`<textarea>`

注释

<!--我在注释外！-->
<!-- <p>我在注释内！<p> -->

实体引用

想要在文本中表示以下特殊字符时，需要使用字符引用，以避免编译器无法理解句子

原义字符	等价字符引用
<(小于）	`<`
>（大于）	`>`
"(双引号)	`"`
'(单引号)	`'`
&	`&`

eg. 当我们想要表示一段文本 “HTML 中用来定义段落元素。”,我们需要以如下形式： <p> HTML 中用 < p>来定义段落元素</p>

标签语义化

目的：使代码更容易阅读，更利于搜索引擎SEO（搜索引擎爬虫会识别标签设置权重），提高网站可访问性（残障人士辅助工具）

内容分区：

元素	描述
`<address>`	表示其中的 HTML 提供了某个人或某个组织（等等）的联系信息。
`<article>`	定义的内容本身必须是有意义的且必须是独立于文档的其余部分，潜在来源：论坛帖子、博客文章、新闻故事、评论
`<aside>`	表示一个和其余页面内容几乎无关的部分，可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框（call-out boxes）。
`<footer>`	文档中的页脚部分。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
`<header>`	用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素或 Logo、搜索框、作者名称，等等。
`<h1>`~`<h6>`	呈现了六个不同的级别的标题，h1级别最高，而h6级别最低。
`<main>`	呈现了文档的 body 或应用的主体部分，包含很多h, p, article标签。
`<nav>`	导航链接，内嵌许多a标签超链接。导航部分的常见示例是菜单，目录和索引。
`<section>`	表示一个包含在 HTML 文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。

页面布局.png

前端之HTML初识 | 青训营笔记