HTML入门笔记1HTML的发明 HTML的英文全称是Hyper Text Markup Language, 即超文本语

HTML的发明

HTML的英文全称是Hyper Text Markup Language, 即超文本语言。HTML是由万维网的发明者Tim Berners-Lee于1990年创立的一种标记语言。

HTML的起手怎么写

<!DOCTYPE html> 是告诉浏览器文档类型是html
<html lang="en"> 表示html语言是英文的，“lang”表示language，可以改成<html lang="zh-CN"> 表示语言是中文
head里面写的是看不见的元素
<meta charset="UTF-8" /> 表示文件的编码类型是UTF-8
content="IE=edge"表示让浏览器ie使用最新内核渲染
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 表示视窗/视口，禁止缩放，兼容手机
<title> 标签里写的是控制网页标题的名称显示

常用的章节标签

<h1>~<h6> 表示标题，<h1> 是最大的标题，<h6> 是最小的标题
<section> 定义文档中的一个章节，一个包含在HTML文档中的独立部分。不要把 <section> 元素作为一个普通的容器来使用，这是本应该是<div>的用法（特别是当片段（the sectioning ）仅仅是为了美化样式的时候）。一般来说，一个 <section> 应该出现在文档大纲中。
<article> 表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
<main> 呈现了文档的 <body> 或应用的主体部分。
<aside> 表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框 (call-out boxes)。
<footer> 定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
<header> 定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。
<div> 是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。可以使页面层次结构更清晰。

全局属性

全局属性是所有HTML元素共有的属性; 它们可以用于所有元素，即使属性可能对某些元素不起作用。

class 给标签元素分类。它允许 CSS 和 Javascript 通过类选择器 (class selectors) 或DOM方法( document.getElementsByClassName)来选择和访问特定的元素。

contenteditable表示元素是否可被用户编辑。如果可以，浏览器会调整元素的部件（widget）以允许编辑。true 或者空字符串，表明元素是可被编辑的；false，表明元素不能被编辑。例如

<!-- 可编辑 -->
<blockquote contenteditable="true">
    <p>Edit this content to add your own quote</p>
</blockquote>

<!-- 可编辑 -->
<blockquote contenteditable="">
    <p>Edit this content to add your own quote</p>
</blockquote>

<!-- 不可编辑 -->
<blockquote contenteditable="false">
    <p>Edit this content to add your own quote</p>
</blockquote>

hidden 是一个布尔属性，表示一个元素尚未或者不再相关。如果一个元素设置了这个属性，它就不会被显示。
```
<p hidden>此段将隐藏</p>


<p hidden="false">此段仍隐藏</p>
```
id 定义唯一标识符（ID)，该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符)，脚本或样式（使用CSS）时标识元素。但是，id的全局唯一性没有保障，就算有两个重复的id，HTML也不会提示写错了，所以尽可能不要使用id。
style 包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是CSS的格式。⚠️注意，style属性比css文件的style优先级要高，但如果该标签的样式属性在JavaScript中选取并修改了，那么JavaScript写的会覆盖html里的style属性。
tabindex 指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航 (通常使用Tab键，因此得名)。对于tabindex的值，可以是正数，不必是连续的，只需比较大小即可决定顺序；可以是0，表示最后才能被tab访问到；可以是-1，表示该元素不可被tab访问。
title 规定元素的额外信息。这些信息通常会在鼠标移到元素上时显示一段工具提示文本(tooltip text)。

常用的内容标签

<a>或称锚元素）可以通过它的href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。<a> 中的内容应该指明链接的意图。
```
<ul>
    <li><a href="https://example.com">Website</a></li>
    <li><a href="mailto:m.bluth@example.com">Email</a></li>
    <li><a href="tel:+123456789">Phone</a></li>
</ul>
```
<em> 标记出需要用户着重阅读的内容，通常地，该元素会被浏览器展示为斜体文本，但是，它不应该仅仅用于应用斜体样式，为此，可以自定义CSS样式。使用 <strong> 元素标记比周围文本更重要的文本。
<strong> 表示文本十分重要，一般用粗体显示。
<pre> 表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，文本中的空白符（比如空格和换行符）都会显示出来。因为在HTML本身里的里的多处空格、回车、tab 等内容，默认会被转化为一个空格。

<code> 呈现一段计算机代码。默认情况下, 它以浏览器的默认等宽字体显示。可以和<pre>联合使用，展示代码内的多处换行或者空格。

<!-- 无法显示换行-->
<code>let a = "123"; 
console.log(a);</code>

<!-- 显示换行-->
<pre>
    <code>let a = "123"; 
    console.log(a);</code>
</pre>