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

W3C标准

w3c
- 万维网联盟（外语缩写：W3C）标准不是某一个标准，而是一系列标准的集合
标准
- 结构 HTML
- 表现 CSS
- 行为 ECMAScript
好处
- 可以被更广泛的设备进行访问
- 页面浏览速度加快
- 网站流量费用降低
- 更易被检索

什么是HTML

HTML的全称为超文本标记语言，是一种标记语言.

HTML页面结构

固定的结构：整体（html）头部(head) 标题(title) 主体(body)

开发工具

VSCode
Vim
WebStorm

浏览器

IE/Edge
Chrome
Firefox
Safari

HTML标题

标题标签:

使用场景：新闻和文章的页面中
代码：

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

语义：1~6级标题，重要程度依次递减

同时是独占一行

HTML段落标签

场景：在新闻和文章的页面中使用，用于分段显示
代码：

<!-- 段落标签 -->
 <p align="center">
    <i>
        假如我来世上一遭<br>
        只为与你相聚一次<br>
        只为了亿万光年里的那一刹那<br>
        一刹那里所有的甜蜜与悲凄<br>
        那麽就让一切该发生的<br>
        都在瞬间出现吧<br>
        我俯首感谢所有星球的相助<br>
        让我与你相遇<br>
        与你别离<br>
        完成了上帝所作的一首诗<br>
        然后再缓缓地老去<br>
     </i>
</p>

独占一行

HTML换行标签

场景：让文字强制换行显示
代码:
```
<br>
```
特点：
- 单标签
- 文字强制换行

HTML文本格式化标签

场景：文字需要格式化设计的时候使用加粗下划线倾斜删除线
代码：

<!-- 文本格式化标签 -->
   <p align="center">
    <!--文本格式化标签-->
    <b>b标签 加粗</b><br>
    <u>u标签 下划线</u><br>
    <i>i标签 倾斜</i><br>
    <s>s标签 划横线</s><br>
    
    <br>
    <strong>b标签 加粗</strong><br>
    <ins>u标签 下划线</ins><br>
    <em>i标签 倾斜</em><br>
    <del>s标签 划横线</del><br>
</p>

b, strong 加粗

u, ins 下划线

i, em 倾斜

s, del 删除线

HTML图片标签

场景：显示图片
代码：
src alt 是标签属性
src = "" ---> src 属性名 "" 属性值
- 属性写在开始标签内部
- 一个标签可以拥有多个属性
- 多个属性之间用空格隔开
- 标签名和属性名之间也必须使用空格隔开
- 属性之间没有顺序之分
src属性可以设置本地图片路径也可以设置网络图片路径
alt属性替换文本属性当图片加载失败时，才显示alt的文本
title 鼠标悬停提示文字
width 宽度
height 高度
宽度或高度只设置一个的时候，另外一个会自动等比例缩放

HTML链接标签

场景：页面链接跳转
代码：

<!-- 链接标签 -->
 <!-- href属性  指定链接路径  可以是html也可以是图片... -->
 <a href="01-html标题.html" target="_blank">链接提示内容</a>
 <a href="./images/123.webp">链接提示内容</a>
  
 <a href="01-html标题.html" target="_blank">
     <img src="./images/123.webp" alt="失败" title="链接跳转">
 </a>

href属性链接路径
target属性链接在哪个窗口进行打开 target="_blank" 新窗口打开

HTML音频标签

场景：在页面中插入音频
代码：

<audio src="" controls autoplay loop></audio>

controls 显示播放的空间
autoplay 自动播放
loop 循环播放

目前支持的音频格式：MP3 WAV Ogg

HTML视频标签

场景：在页面中插入视频
代码

<!-- 视频标签 -->
    <video src=""  controls autoplay loop></video>

controls 显示播放的空间
autoplay 自动播放
loop 循环播放

列表标签

有序列表
无序列表
自定义列表：应用场景通常是在网页的底部导航中通常会使用

代码

    <h2>有序列表</h2>
    <ol type="" start="6" >
        <li>打开冰箱门</li>
        <li>把大象装进冰箱</li>
        <li>关上冰箱门</li>
    </ol>
    <!-- 无序列表 -->
    <h2>无序列表</h2>
    <ul type="" >
        <li>做饭</li>
        <li>看电视</li>
        <li>泡茶叶</li>
    </ul>
    <!-- 自定义标签 -->
    <h2>自定义标签</h2>
    <dl>
        <dt>把大象装进冰箱</dt>
        <dd>打开冰箱门</dd>
        <dd>把大象装进冰箱</dd>
        <dd>关上冰箱门</dd>
    </dl>

ol 和 ul标签内部只允许放 li 标签 li标签代表列表的每一项
li标签内部可以放任意内容
标签组成：
- dl标签表示自定义列表的整体
- dt标签表示自定义列表的主题
- dd标签表示自定义列表主题中的每一项内容
嵌套规范
- dl标签中只允许嵌套dt和dd标签
- dt/dd标签内部可以嵌套任意内容
- dt不缩进，dd缩进

表单

文本域

   <!-- 文本域 -->
  <form action="">
      请输入你的详细地址：
      <textarea name="" id="" cols="30" rows="10"></textarea><br>
  </form>

下拉菜单：select 默认值设定
文本区

  <form action="">
      请输入你的名字：<input type="text"><br>
      请输入你的密码：<input type="password">
  </form>

取值按钮
- 单选框
- 多选框

 <form action="">
      <!-- 单选框 -->
      选择性别<input type="radio" name="gender" checked>男
      <!-- 默认值为男 -->
              <input type="radio" name="gender">女
              <br>
              <!-- 多选框 -->
      前端基础<input type="checkbox" checked>HTML
              <input type="checkbox">CSS
              <input type="checkbox">JavaScript
  </form>

默认值checkeed
通过name来保证只能选一个

语义化

什么是语义化

1. 每一个HTML元素都有具体的含义

a元素：超链接

p元素：段落

h1元素：一级标题

2.传达内容，而不是样式

所有元素与展示效果无关

元素展示到页面中的效果，应该由CSS决定。

因为浏览器带有默认的CSS样式，所以每个元素有一些默认样式。

重要：选择什么元素，取决于内容的含义，而不是显示出的效果

为什么需要语义化？

代码可读性
可维护性
搜索引擎优化
提升无障碍性

搜索引擎优化（SEO）

搜索引擎：百度、搜狗、Bing、Google

每隔一段时间，搜索引擎会从整个互联网中，抓取页面源代码

如何做到语义化?

了解每个标签和属性的含义
思考什么标签最适合描述这个内容
不使用可视化工具生成代码

总结

通过今天学习，自己对html5有了较为明确的了解，对其中的一些标签有了较为熟练的掌握
一切刚刚开始，大家一起努力

HTML5基础|青训营笔记