【青训营】-HTML学习笔记-一一网

网页三大元素

假如把网页当做一种生物来说的话，HTML构成了网页的骨架，使网页有了基础的结构；css构成了网页的皮肤，使网页看的不再单调乏味；而js相当于生物的各种器官，控制网页实现各种操作。

HTML简介

html（Hyper Text Markup Language）即超文本标记语言，用于构建网页基本结构和内容的标记语言。

超文本：文本中包含指向其他文本的链接。

标记语言：将文本以及文本相关的其他信息结合起来，展现出关于文档结构。

发展历史

1989年——伯纳斯-李提出了基于互联网的超文本系统
1993年——IETF(互联网工程任务组)发布首个TML提案,由此HTML语言第一版诞生
1994年——W3C成立,随后接管了HTML的标准化工作
1995年——在经历过几个草案之后HTML2.0发布（这个版本主要是补充一些基本功能,包括了基于表单的文件上传、表格、国际化等功能
1997年——1月发布了HTML3.2，随后12月发布了HTML4.0（这个版本中采用了许多特定浏览器的元素类型和属性
2014年——HTML5作为W3C推荐标准发布

HTML结构

一个HTML文档包含了多个HTML标签，每个标签都有其各自不同的特性。
HTML元素=开始标签+结束标签+元素内容如：<P>我是一个p标签</p>。
但也有些元素是一个标签如：<img> ;<br>等。
在HTML中的标签并不区分大小写。
元素可以嵌套在其他元素中。
元素可以拥有属性，属性包含了元素的额外信息。

构建一个简单的页面基础的几个标签：

<!DOCTYPE html>:放在HTML文档最前面的位置，加上之后就会按照W3C的HTML 5标准来解析渲染页面。
<html>:根元素，包含整个页面的内容。
<head>:对用户不可见，其中包含例如面向搜索引擎的关键字、页面描述、字符编码声明、CSS样式等。
<body>:该元素包含能够被用户访问到的内容，包括文本、图像、视频、游戏、音频等。

head中包含的元素

meta是html语言head区的一个辅助性标签，位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的名称/值对。

<meta charset='utf-8'>定义了文档字符编码

<meta name="keywords" content="HTML">关键字，在进行搜索的时候，如果你搜素的内容中有某个网站的关键字，那么引擎就会推给你这个网站。

<meta name="description" content="HTML基础">页面描述，对网页进行比标题更详细的描述，当鼠标在标题停留时会弹出。

<meta name="viewport" content="width=device -width,initial- scale=1.0, maximum- scale=1.0, user - scalable=0">主要用于移动端，定义设备屏幕上用来显示网页的区域。

<meta "http-equiv="expires" content="31 Dec 2021">用于向特定网站提供一些信息。

title

<title>:页面的标题，显示在浏览器标签页上。

style

<style>: css样式。

link

<link rel="shortcut icon" href="https://juejin.cn/post/favicon.ico" type="image/x-icon">
当前页面的favicon

<link rel="stylesheet" href="https://juejin.cn/post/my- CcSs file.css">
链接到样式表

<link href-"fancy.css" rel="alternate styleshet" type="text/css" title="Fancy">
可替换的样式表(非所有浏览器支持)

script

<script type="text/javascript" src="">
可执行脚本

defer立即下载，延迟执行，表示脚本可以等到dom被完全解析和显示之后在执行，只对外部脚本有效。有defer属性的脚本会阻止DOMContentL oaded事件，直到脚本被加载并且解析完成。

async立即下载脚本，不妨碍其他操作，比如下载其他资源或载其他脚本，只对外部脚本有效。

body中的元素

内联元素

只占据它对应标签的边框所包含的空间
只能容纳文本或其他内联元素
只能通过修改水平边距、边框或者行高的方式改变尺寸
常用的内联元素: <a>、 <span>. <br>、 <i>、 <em>、<strong>、<label>、 <q>. <var>、 <cite>、<code>

块级元素

占据其父元素的整行，总是从新行上开始
能容纳其他块元素或者内联元素
可以控制宽高、行高、边距、边框等改变其尺寸
常用的块级元素<div>、<p>、 <h1>-<h6>、<ol>、<ul>、<dl>、<table>、<address> 、<blockquote> 、<form>

行内块级元素

元素在行内排列，不会独占一行。
支持设置宽高以及垂直边距、边框。
常用的内联元素: <img>、 <input>、 <td>

HTML的语义化

语义化的优点

易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
方便其他设备解析，如盲人阅读器根据语义渲染网页
有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

语义化区块

<header>

展现介绍性信息
通常包含一组介绍性或是辅助导航的元素，如标题、Logo、搜索框、作者名称等
不能放在<footer>、<address> 或者另一个<header>元素内部

<header>
  <h1>html<h1>
  <img src="https://www.bilibili.com" alt="bilibili">
</header>
复制代码

<nav>

在当前文档或其他文档中提供导航链接，如菜单、目录、索引等
用来放置一些热门的链接，不常用的链接通常放到footer里置于底部

<nav>
<ul>
<li><a herf="**">html</a></li>
<li><a herf="**">css</a></li>
<li><a herf="**">js</a></li>
</ul>
</nav>
复制代码

<article>

独立的文档、页面、应用、站点
可独立分配的或可复用的结构，如论坛帖子、新闻文章、博客、用户提交的评论、交互式组件等

<h1>今天天气怎么样</h1>
  <article class="user">
  <h3>一楼</h3>
  <p>真不错</p>
  <article class="user">
  <h3> 二楼</h3>
  <p>真不错</p>
<article class="user">
<h3>三楼</h3>
  <p>真不错</p>
复制代码

<section>

按主题将内容分组，通常会有标题
<section> 通常出现在文档的大纲中
不要把<section>作为普通容器来使用，比如说用于美化片段样式，此时用<div>更合适
如果元素里边是独立的整块的内容，可以单发布，则更适合用<article>

<aside>

表示一个和其余页面内容几乎无关的部分，或者说单独拆出来不会影响整体的内容
通常放在侧边栏，用于展示广告、tips、引用内容等

语义化分组

<figure>

包含被独立引用的内容：图表、插图、代码等
通常会有一个标题

<figcaption>

与其相关联的图标的说明、标题
通常位于<figure>的第一个或最后一个

<blockquote>

块级引用元素
cite属性表示该来源的url，长引用

<dl>/<dt>/<dd>

用于描述一组键值对
通常用于元数据、术语定义等场景

语义化文本

<cite>

<cite> 元素通常用于引用作品标题.
包括论文、文件、书籍、电影等的引用

<time>

机器可读的时间和日期
datetime表示此元素关联的时间日期，若不指定则该元素不会被解析为日期

<address>
某个人或组织的联系信息

<mark>
在引用中使用，表示需要引起注意

<code>
代码片段

<small>
免责声明、注意事项等

多媒体元素

img

src属性是必须的，嵌入图片的文件路径
alt属性包含一条对图像的文本描述，非强制。屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。图像无法加载时(网络错误、内容被屏蔽或链接过期时)，浏览器会在页面上显示alt属性中的文本
decoding 解码方式:异步、同步
loading懒加载