HTML学习笔记（一）之html基础

0. html初识

1. 网页声明（DOCTYPE）用来告诉网页这个网页的版本是 HTML5
2. 实现本地html网页的实时自动更新的 vscode 插件：LiveSever

1. html实体

3. 有些符号在 HTML 中不能直接书写，自身有特殊的含义
   比如网页中的多个空格会被解析成一个空格，
   字母两侧的大于和小于号
4. 如果我们需要使用这些字符，则需要使用 html 中的 实体（转义字符）
   实体的语法：& + 实体名称 + ;
   例如：  , &gt , < , @copy;

2. meta

1. meta 设置网页的元数据，不是给用户看的部分
2. charset
   决定了网页所采用的字符编码集

   <meta charst="utf-8">
   

3. name
   指定的数据名称
4. content
   指定了数据的内容
   • keywords
     网页关键字，利于搜索引擎的CEO、爬虫

     <meta name="keywords" content="HTML5, css3, 前端">
     

   • description
     网页的具体描述

     <meta name="description" content="学习html5、css3的基础">
     

5. http-equiv
   当其值为 refresh，表示将页面重定向到另一个网站
   • 如果 content 只包含一个正整数,则是重新载入页面的时间间隔(秒)

      <meta http-equiv="refresh" content="3">
     

   • 如果 content 包含一个正整数并且跟着一个字符串 ;url= 和一个合法的 URL，则是重定向到指定链接的时间间隔(秒)

     <meta http-equiv="refresh" content="3;url='https://www.google.com'">
     

6. 设置移动端页面禁止缩放

   <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
   

3. 块元素与行内元素

1. 块级标签（block element）
   标签元素独占一行，为块标签（block element）。
   一般使用块标签来对网页进行布局
   p div h1~h6 blockquoto
2. 行内元素（inline element）
   不独占一行，不会换行
   a q em strong
3. 一般在块内元素使用行内元素，不会在行内元素使用块元素

   浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正！

   比如

   1. 将标签写在根元素的外部

   2. p元素嵌套了块元素

   3. 根元素出现了除head和body以外的子元素

4. 语义化标签

1. 在网页中 HTML 专门用来负责网页的结构
   所以在使用 html 标签的时候，应该关注的是标签的语义，而不是样式

   • h1~h6
     h1~h6 共六级标签
     h1到h6重要性递减，h1最重要，h6最不重要
     h1在网页中的重要性仅次于 title 标签，一般情况下一个网页只会有一个 h1
     一般情况下标题标签只会有h1~h3，不会有h4到h6

   • hgroup
     hgroup 将标题标签分组，可以将一组相关的标题同时放入到 hgroup 中

       <hgroup>
       <h1>回乡书二首</h1>
       <h2>其一</h2>
       </hgroup>	
     

   • p
     p 标签表示页面中的一个段落，独自占一行，也是块元素

   • blockquote

     表示一个长引用

   • em
     表示语音语调的一个加重

   • strong
     strong表示强调，重要内容！

   • q
     表示一个短引用

2. H5 网页的结构

   • header
     表示网页的头部

   • main
     表示网页的主体

   • footer
     网页的底部

   • nav
     HTML 元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。
     导航部分的常见示例是菜单，目录和索引。

   • aside
     侧边栏

   • article
     表示一篇文章

   • section
     表示一个独立的区块，当以上元素都不能表示语义的时候，使用 section

3. 网页布局结构

   网页的布局一般使用 div 和 span

   • div
     div 是一个块元素，没有语义，表示一个逻辑区块，是主要的布局元素

   • span
     span 是行内元素。一般用于在网页中选中文字