前端与HTML | 青训营笔记学习前端是一件很有意思的事情，随着学习进度的增加，我慢慢发现前端不只是自己当初所想的制作网

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

前言

学习前端是一件很有意思的事情，随着学习进度的增加，我慢慢发现前端不只是自己当初所想的制作网页。它的强大功能更是能开发小程序、创造更美好的东西。那么今天，首先从HTML基础说起。

一、简介

HTML(Hyper Text Markup Language)基础介绍，包括常用标签及其属性、页面布局。

二、主要内容

1. 必不可少的`<!doctype html>`

其中，doctype不属于标签，它是标记语言的文档类型声明，是告诉浏览器当前HTML是用什么版本编写的。添加doctype就等同于开启了标准模式(W3C)。否则，浏览器会默认按照自己的方式渲染页面(怪异模式)。

2. 常用标签

<html> 文档的根标签
<head> 存放文档源数据(<meta> <style>和 <title> 等等)
- <meta>包含元数据(描述数据的数据，文章中提到的东西也可以被当作元数据)。属性：
  1. name(指定meta元素的类型，说明元素包含什么类型的信息)
  2. content(指定了实际的元数据内容)。其中的<meta charset='UTF-8>指定了文档的字符编码,utf-8是一个通用字符集。head中可以有多种不同种类的meta。
- <link> 与外部文件建立链接，属性：
  1. type(指定所链接文档的MIME类型，css的是"text/css",一般使用type="text/css")
  2. href(定义资源的链接URL，一般用于调用css，js文件)
  3. media(媒体类型，设定被链接文档将显示在上面设备上)
  4. rel(规定链接类型,指当前文件与被链接文档之间的关系)
- <style> 文档定义样式信息，规定在浏览器中如何呈现HTML文档，其必备属性是type且唯一属性值是text/css。
<body> 存放需要呈现的内容
<h1> 标题，除此之外还有h2.h3.h4.h5.h6
<p> 段落内容
<a> 链接，属性：href=" "，target="_blank"(表示的是在空白标签打开网页)

列表：

<ol> 有序列表ordered list，后跟<li>
<ul> 无序列表unordered list，后跟<li>
<dl> 定义列表definition list，后跟<dt>列表标题 <dd>具体描述

多媒体：

<img> 图片，属性:src=" ", alt=" "(图片不加载时显示)
<audio> 音频，属性:src=" ", controls(浏览器默认样式，无属性值)
<video> 视频，属性:src=" ", controls(浏览器默认样式，无属性值)

表单

<form> 用于创建表单，元素：<input>、<label>、<select>、<textarea>
<label> 常与表单控件相关联，点击label，关联的控件相应，增强用户体验
<input> 输入,举例：
表单例子：

<!--方法一 -->
<p>
    <label><input type="checkbox />苹果</label>
    <label><input type="checkbox"checked />梨</label>
</p>
<!--方法二 -->
<p>
    <label><input type="radio" name="sport" />足球</label>
    <label><input type="radio" name="sport" />篮球</label>
</p>
<!--方法三 -->
<p>
    <select>
        <option>1</option>
        <option>2</option>
    </select>
</p>
<!--方法四 -->
<input list="country" />
<datalist id="country">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</datalist>

结果如下图所示：
微信图片_20230115110547.png

引用：

<q> 引号
<blockquote> 长引用
<cite> 斜体
<strong> 加粗
<em> 斜体
展示计算机代码：
- <code> 标记计算机通用代码
- <pre> 引用代码块，可保留空白字符
- <var> 标记变量名
- <kbd> 标记键盘输入
- <samp> 标记计算机程序的输出
<address> 标记联系方式
<sub> 和 <sup> 下标和上标
<abbr> 包裹缩写，提供解释. 属性:title=" "

三、 HTML语法

标签和属性不区分大小写，推荐小写
空标签可以不闭合，比如input、meta
属性值推荐用双引号包裹
某些属性值可以省略，比如required、readonly

四、 HTML语义化

HTML中的元素、属性及属性值都拥有某些含义
开发者应遵循语义来编写HTML

五、HTML结构化

基本组成部分

<header> 页头，放logo、导航(nav)等
<nav> 导航
<main> 主体
<article> 文章
<aside> 相关内容
<footer> 页尾，放参考链接、信息等

布局元素细节

[<main>]存放每个页面独有的内容。每个页面上只能用一次 <main>，且直接位于 [<body>]中。最好不要把它嵌套进其它元素。
[<article>]包围的内容即一篇文章，与页面其它部分无关（比如一篇博文）。
[<section>] 与 <article> 类似，但 <section> 更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。一般的最佳用法是：以 [标题](作为开头；也可以把一篇 <article> 分成若干部分并分别置于不同的 <section> 中，也可以把一个区段 <section> 分成若干部分并分别置于不同的 <article> 中，取决于上下文。
[<aside>]包含一些间接信息（术语条目、作者简介、相关链接，等等）。
[<header>]是简介形式的内容。如果它是 [<body>]的子元素，那么就是网站的全局页眉。如果它是 [<article>] 或[<section>]的子元素，那么它是这些部分特有的页眉（此 <header> 非彼 [标题]）。
[<nav>]包含页面主导航功能。其中不应包含二级链接等内容。
[<footer>]包含了页面的页脚部分
(以上布局元素细节内容取自于HTML介绍)

无语义元素

部分情况下，现有语义不能很好地表示出你想表达的内容，这时就可以将万能的无语义元素配合class使用

<div> 块级元素(包括行内元素)，可以包含段落、表格等内容。
<span> 行内元素，没有实际意义。

PS:无语义元素不能滥用

换行与水平分割线

换行<br>
水平分割线<hr>

六、总结

当然，HTML基础远不止这些，想要得心应手，还需慢慢沉淀，享受这个过程。
这里推荐新手通过Markup Validation Service调试HTML发现错误
该文章参考MDN上的这篇[HTML介绍]
每个标签和属性的详细说明：点击这里

前端与HTML | 青训营笔记

前言