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

前言

介绍了 HTML 和常用的 HTML 标签
什么是语义化
规范开发代码
一些表单知识

前期准备

1、了解前端技术栈

主要是 HTML(内容)，CSS(样式)，JavaScript(行为)三者通过网络协议与服务器端相联系

2、创建开发环境

浏览器：Chrome Edge Firefox 等，推荐Chrome

编辑器：VSCode Vim WebStorm iDEA 等，推荐 vscode

快速入门标签

<!--这是一段注释。注释不会在浏览器中显示。-->

可以使用 Ctrl+/ 快捷键来快速注释代码

`<!DOCTYPE>`

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于<html>标签之前。标记当前 HTML 文件是什么样的 HTML 版本，浏览器根据此决定页面的渲染

`<html>`

根标签,<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。

`<head>`

<head> 标签用于定义文档的头部，它是所有头部元素的容；下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, <title>。 <title> 定义文档的标题，它是 head 部分中唯一必需的元素。

`<body>`

body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

`<h1> - <h6>`（块级）

为标题字体大小，<h1> 定义最大的标题。<h6> 定义最小的标题。

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

效果如下：

`<p>` （块级）

定义段落 ; p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。

`<hr/>`（块级）

横线单标签，有以下属性：

color:设置水平线的颜色
width:设置水平线的宽度
size:设置水平线的高度
align:设置水平线的对齐方式(默认居中)，可取值left|right

<hr color="red" width="20%" size="2px" align="left" />

效果入下：

当然后面建议使用css写样式

`<br/>`

换行单标签，可以插入文章描述里实现换行

`<img>`（行内块级）

图片组件，有以下属性：

src: 路径(图片地址与名字)
alt：alt 为图片未被加载的替代性文本
width: 规定图像的宽度
height:规定图像的高度
title:鼠标悬停在图片上给予提示

<img src="/image/0.jpg" alt="图片暂未加载" width="50%" title="我是提示" />

`<a>`（内联）

超链接标签，需要添加href属性来实现跳转功能，可以在标签里添加文本，图片等也能实现跳转

href 属性来描述链接的地址
默认情况下个未访问过的链接显示为蓝色字体并带有下划线。
我们可以通过 css 来修改默认情况下的样式，并且还可以修改访问前，访问后，鼠标悬停在链接上时等样式

<a href="https://w.wallhaven.cc/full/k7/wallhaven-k7o551.jpg">我是文本</a>

<a href="https://w.wallhaven.cc/full/k7/wallhaven-k7o551.jpg">
  <img src="/image/1.jpg" width="100px" title="我是提示" />
</a>

块元素和内联元素

虽然到了 HTML5 的版本，元素分类更细致了,但是这对初学者并不友好,所以我们仍然按照块元素和内联元素做区分，这对我们的布局起到了至关重要的作用

行内块级元素(特点:不换行、能够识别宽高)
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置

常见块级元素 <hr>、<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>......
常见内联元素<b>、<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>......
行内块级元素 <button>、<img>、 <input>......

格式化

文本格式

都是内联元素

    <!--着重-->
    <em>文本</em>
    <!--粗体-->
    <b>文本</b>
    <!--斜体-->
    <i>文本</i>
    <!--加重-->
    <strong>文本</strong>
    <!--删除字-->
    <del>文本</del>
    <!--无特殊含义-->
    <span>文本</span>

引用标签

<blockquote>标记长的引用 <q>用来定义短的引用 <code>定义计算机代码文本

属性：

cite属性用来规定引用的来源

<q cite="URL">

列表

定义列表

<dl> 、<dt> 、<dd> 都是块级元素

一般在展示的列表形式包括标题和描述两部分时，使用定义列表 <dl></dl>：定义列表； <dt></dt>:标题； <dd></dd>:分支描述（多对多）

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

效果如下：

有序列表

<ol> 和 <li>标签都是块级元素

有序列表是一列项目，列表项目使用数字进行标记。有序列表始于<ol>标签。每个列表项始于<i> 标签。可嵌套

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

效果如下：

<b1>的属性type 拥有的选项

1表示列表项目用数字标号(1.23...
a表示列表项目用小写字母标号(a,b,c、...)
A表示列表项目用大写字母标号(A,B,C、...)
i表示列表项目用小写罗马数字标号(i、ii、iii、...)
|表示列表项目用大写罗马数字标号(I、II、III、...）

<ol>的快捷键： ul>li*n(n 是要生成 li 标签的数量)，同理可以以相同类似推广组合比如：ul>li*3>a

无序列表

<ul> 和 <li>标签都是块级元素

无序列表是一个项目的列表，此列项目使用粗体圆点(典型的小黑圆圈)进行标记，无序列表始于<ul>标签；每个列表项始于<li>标签。可嵌套；常用于列表导航、无序的列表效果...

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

效果如下：

<ul>的type的属性type 拥有的选项

disc 默认实心圆
circle 空心圆
square 小方块
none 不显示

<ul>的快捷键： ul>li*n(n 是要生成 li 标签的数量)

列表下拉选择

    <select>
      <option>a</option>
      <option>b</option>
      <option>c</option>
    </select>

效果如下：

表格

<table>、<tr>和<td>都是块级元素

表格由：行、列、单元格组成；表格标签有

表格:<table>
行:<tr>
单元格(列):<td>

表格属性

border: 设置表格的边框
width: 设置表格的宽度
height: 设置表格的高度

<table border="1" width="400" height="300">
  <tr>
    <td>单元格</td>
    <td>单元格</td>
    <td>单元格</td>
  </tr>
  <tr>
    <td>单元格</td>
    <td>单元格</td>
    <td>单元格</td>
  </tr>
  <tr>
    <td>单元格</td>
    <td>单元格</td>
    <td>单元格</td>
  </tr>
</table>

快捷键：table>tr*n>td*m{单元格的文本信息}（n：行数量，m：列数量）

单元格合并

水平合并（colpan） : 保留左边，删除右边
垂直合并（rowspan）: 保留上边，删除下边

<table border="1" width="400" height="300">
  <tr>
    <td rowspan="2">1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <!--<td>4</td>-->
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td colspan="3">7</td>
    <!--<td>8</td>-->
    <!--<td>9</td>-->
  </tr>
</table>

可见 colspan 和 rowspan 的值对应的是合并单元格的数量，并且要删除对应单元格，如果不删除，则会直接生成对应大小的单元格，会把部分单元格"顶"出去

那问题来了，如果要合并井字（比如：合并 2 3 5 6）单元格怎么办？

表单

Form 表单(块级)

表单是由容器和控件组成的，一个表单一般应该包含用户填写信息的输入框,提交按钮等,这些输入框,按钮叫做控件，表单就是容器，它能够容纳各种各样的控件

属性说明

action 服务器地址
name 表单名称
method 中 Get 和 Post 的区别(目前了解即可)：
- 数据提交方式，get 把提交的数据 url 可以看到，post 看不到
- get- 般用于提交少量数据，post 用来提交大量数据

<form action="url" name="myFrom" method="get/post"></form>

表单元素 input为行内块级元素

完整的表单包含三个基本组成部分:表单标签、表单域、表单按钮

表单标签:输入框，按钮等
表单域：输入范围
表单按钮：submit

<form action="url" name="myFrom" method="get/post">
  <!--表单控件-->
  <input type="text" />
  <input type="submit" />
</form>

表单元素

文本框

文本域通过<input tye="text">标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域

<form>用户名：<input type="text" name="userName" /></form>

密码框

密码字段通过标签<input type="password">来定义

<form>Password: <input type="password" name=" pwd" /></form>

提交按钮

输入完信息点击提交，会将信息提交给另一个页面或者服务器，再做相关处理

<form>
  用户名：<input type="text" name="userName" /> Password:
  <input type="password" name=" pwd" />
  <input type="submit" />
</form>

`<audio>`

音频组件，control 表示是否默认播放控件

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

`<video>`

视频组件

<video src="" controls></video>

`<input>`

输入框，

<input placehoder="" type=""`>

placehoder 为未输入时的占位符
type 有多种属性值可以调节输入范围

    <input type="range">
    <input type="number" max="10" min="1">
    <input type="date" max="10" min="1">

效果如下：

单选框和复选框

chekbox 为复选，radio 为单选互斥关系由 name 相同达到的

<input type="checkbox" type="radio">

复选：

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

效果如下：

单选：

    <input type="radio" name="c">a
    <input type="radio" name="c">b

效果如下：

提示输入

多个标签提示输入,list来指定用户可以有的提示选项

<ipute list="">和<datalist id="">

例如：

    <input lest="countries">
    <select id="countries">
      <option>green</option>
      <option>Yellow</option>
      <option>Blue</option>
    </select>

效果如下：

`<textarea>`

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

页面内容划分

页面内容一般分为4部分：header，main，aside，footer，

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

刚开始是使用div容器元素，让代码模块化，来实现页面内容划分，但是我们发现效率并不是很高

所以在HTML5直接推出了新标签来划分页面内容

两者对比

很明显新标签更容易理解，搜索引擎也会有有相应优化，所以推荐使用新标签来划分页面内容

语义化的理解

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

比如在如下应用场景：

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

总结

说了那么多来做个小小的总结：这是一篇小白的笔记，内容不多也不深，我觉得我奶奶来了都能看懂，就提了一些 HTML 的标签以及简单食用方法，加上一点语义化的理解。立意重在建立学习框架，作为在青训营学到的的第一节课而言是一个很好的开始，对于做好语义化可以在MDN里面学习更多更深的 HTML 知识，规范书写代码，不使用可视化工具生成代码。

ps：主题非掘金主题表示已经更新增加过笔记内容~

本文如有错误欢迎纠正指正! 😊

小白够用的HTML笔记|青训营笔记

前言

前期准备

1、了解前端技术栈

2、创建开发环境

快速入门标签

<!DOCTYPE>

<html>

<head>

<body>

<h1> - <h6>（块级）

<p> （块级）

<hr/>（块级）

<br/>

<img>（行内块级）

<a>（内联）

块元素和内联元素

格式化

文本格式

引用标签

列表

定义列表

有序列表

无序列表

列表下拉选择

表格

单元格合并

表单

Form 表单(块级)

表单元素

更多

<audio>

<video>

<input>

<textarea>

页面内容划分

语义化的理解

总结

`<!DOCTYPE>`

`<html>`

`<head>`

`<body>`

`<h1> - <h6>`（块级）

`<p>` （块级）

`<hr/>`（块级）

`<br/>`

`<img>`（行内块级）

`<a>`（内联）

`<audio>`

`<video>`

`<input>`

`<textarea>`