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

前言

本节课的重点内容主要有：

介绍了HTML和常用的HTML标签
什么是语义化
规范开发代码

前期准备

1、了解前端技术栈`
主要是 HTML(内容)，CSS(样式)，JavaScript(行为)三者通过网络协议与服务器端相联系

2、创建开发环境 浏览器：Chrome IE/Edge Firefox 等 编辑器：VSCode Vim WebStorm iDEA 等

具体案例:

什么是HTML

表意：
HT-->HyperText（超文本）：图片,标题,链接,表格

ML-->Markup Language(标记语言)：标签

基本结构：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>标题</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <p>段落内容</p>
    </body>
</html> 

*HTML是用来结构化 Web 网页及其内容的标记语言。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。*

## HTML标签

`<!doucty>` ：标记当前HTML文件是什么样的HTML版本，浏览器根据此决定页面的渲染

`<html></html>`：根标签

`<head> <budy> <title>`:在上述结构中可以看出，我就不过多赘述

`<h1>`到`<h6>`：为标题字体大小

<h1>A</h1>
<h2>A</h2>
<h3>A</h3>
<h4>A</h4>
<h5>A</h5>
<h6>A</h6>

效果如下：

<ol><li> </li></ol>：有序列表

<ol>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ol>

效果如下：\
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/05c4f3a16ed845329386a5d1723b4672~tplv-k3u1fbpfcp-zoom-1.image)

`<ul><li> </li></ul>`：无序列表

效果如下：

<dl></dl>：定义列表； <dt></dt>:标题； <dd></dd>:分支描述（多对多）

<dl>
  <dt>标题</dt>
    <dd>描述</dd>
  <dt>标题</dt>
    <dd>描述</dd>
    <dd>描述</dd>
</dl>

效果如下：\
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c53245e8244e4486bd90f65f4865791a~tplv-k3u1fbpfcp-zoom-1.image)

`<a href="" target="_blank"/>`: 表示超链接，href属性值表示超链接地址，target表示是否在新标签页面打开

`<img src="" alt="" />`:图片组件，src表示图片地址，alt为图片未被加载的替代性文本

`<audio src="" controls></audio>`:音频组件，control表示是否默认播放控件

`<video src="" controls></video>`：视频组件

`<input placehoder="" type=""`>:输入框，placehoder为未输入时的占位符,type有多种属性值可以调节输入范围

效果如下：

<textarea></textarea>:文本域，可多行输入

<input type="checkbox" type="radio">:chekbox为复选，radio为单选互斥关系由name相同达到的

<input type="checkbox">a
<input type="checkbox" checked>b

效果如下：\
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2575436a20e64dc48b235cbd284ef9cb~tplv-k3u1fbpfcp-zoom-1.image)

a b

效果如下：

<select>--><option>：列表下拉选择(箭头表示标签上下级关系)

<select>
  <option>a</option>
  <option>b</option>
  <option>c</option>
</select> 
效果如下：

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/69d6735d9993437a8ba54085236a7e52~tplv-k3u1fbpfcp-zoom-1.image)

`<ipute list="">和<datalist id="">`：多个标签**提示**输入,list来指定用户可以有的提示选项

green Yellow Blue

效果如下：

<blockquote cite=""></blockquote>：快捷引用，cite为引用来源，一般直接引用别人的一段话

<cite>和<q>：均为短引用标签，两者的区别在于cite一般用于表示作品的名字或者章节，q则表示具体的内容

我是cite

"我是q"

<code>：短代码引用

<pre>--><code>:多行代码引用(箭头表示代码顺序)

<strong></strong>：强调

<em></em>：重读

页面内容划分

页面内容一般分为4部分：header，main，aside，footer，其中header中常常含有log，nav（导航标签）等，main中则是article文章部分，main只有一个为文章主体部分，aside表示与内容相关但不属于文章内容，常常放置广告等，footer位于页未一般放参考链接，版权信息等

语义化的理解

随着时间的推移，为了可以更清晰的表述出需要的结构和内容，标签会进行迭代更新，会存在新的标签的产生，而HTML所有的元素，属性，属性值，都有一些特定的含义，我们应该遵循语义来进行开发

比如在如下应用场景：

开发者-修改、维护页面------->代码可读性,可维护性
浏览器-展示页面,搜索引擎-提取关键词、排序---------->搜索引擎优化
屏幕阅读器－给盲人读页面内容------>提升无障碍性

HTML简述|青训营笔记

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

前言

前期准备

具体案例:

什么是HTML

页面内容划分

语义化的理解

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