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

前言

什么是前端？使用Web技术栈解决多端图形用户界面交互问题。
前端技术栈包含三部分：HTML-内容、CSS-样式、Javascript-行为（类比躯体、衣服、动作；内容为基础，一切为内容服务！）
入门基础：
开发环境：四大浏览器（Edge Chrome Firefox Safari），编辑器（VSCode Vim 等）

HTML

什么是HTML？（HuperText Markup Language）超文本标记语言
HTMLDOM树是浏览器标记内部的表示，浏览器接收到网络数据后的第一步就是对HTML解析并构建DOM树。树的每个节点称为dom节点，树顺序由HTML文档决定的。

<!-- 表明浏览器版本 -->
<!DOCTYPE html>
<!-- 语言：中文 -->
<html lang="en">
<head>
    <!-- 字符类型:UTF-8 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
</head>
<body>
    <h1>一级标题</h1>
    <p>段落内容</p> 
</body>
</html>

HTML语法：
不区分大小写,推荐小写
空标签（image、input、meta等）可以闭合，结束标签加/或不写
属性值要引号包裹，推荐双引号（id="属性值"）
某些属性值可省略

HTML常用标签

标题标签h1~h6:重要程度依次递减，对网页很重要
无序列表ul:里面只包含 li，列表并列，使用较多
有序列表li:里面只包含 li，有顺序，使用相对较少
自定义列表dl:里面只能包含 dt 和 dd，dd为dt的进一步解释
表格标签：thead tbody tr th td

<table>
    <!-- 头部区域 -->
    <thead>
      <tr>
        <!-- HTML 表格的表头部分 -->
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
          ...
      </tr>
    </thead>
    <!-- 主体区域 -->
    <tbody>
        <!-- 表格中的行 -->
        <tr>
            <!-- 表格中的单元格 -->
            <td>张三</td>
            <td>男</td>
            <td>18</td>
            ...
        </tr>
        ...
    </tbody>
</table>

链接
a标签定义超链接，属性href用于指定链接目标的url地址。（注：<a href="#"></a> 默认定位到页面顶部）
多媒体
图片标签img，常见属性：src：指定图片路径；alt:图片加载失败时才显示的文字
音频标签audio，视频标签video，常见属性：src：音频/视频的路径，controls：显示播放控件

表单控件

input系列,placeholder：占位符，type属性值不同则控件类型不同

属性值	控件类型
button	按钮,添加disabled后禁止点击
checkbox	多选框，在一组多选中，必须拥有相同的 name
radio	单选按钮，在一组单选按钮中，必须拥有相同的 name
file	文件上传
text	输入文本，单行
submit	提交按钮

文本类标签
- blockquote快捷引用 cite属性表示引用的地址
- cite：短引用，书名或章节
- q：短引用，一般是具体名字和内容，
- code代码引用，code pre嵌套：等宽字体显示
- strong：加粗，着重强调
- em：斜体，语气上重音强调
内容划分上：
- header 网页头部
- nav 网页导航
- aside 网页侧边栏
- article(可无，可多个) 网页文章
- footer 网页底部
HTML 语义化：元素、属性、属性值都拥有某种含义，开发者要遵循，使得开发者、浏览器、搜索引擎、屏幕阅读器更容易解读

总结

关于HTML的学习笔记基本完成，由于水平有限，没有进行过多扩展，若存在错误，还请指正。总的来说，html代码是由各种标签（段落、表单、注释、图片、超链接、音频、视频）构成的，这些标签有不同排列方式（父子-嵌套，兄弟-并列等）这些标签可添加不同属性（class、id、style、title）。

前端与HTML | 青训营笔记

前言

HTML

HTML常用标签

总结