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

概要

前端用web技术栈解决多端下GUI交互（图形化界面）问题

html（内容）css（样式）JavaScript（行为）

http协议连接服务器端和前端三剑客

前端关注：功能、美观、无障碍、安全、兼容性、用户体验

node.js 服务器端

electron、react native客户端

web rtc p2p传输多人会议

web gl 3D游戏

web assembly

HTML

HyperText（表格链接文字表格） Markup Language（标签）

HyperText：超文本的意思，即超越普通文本的表现形式，主要包含图片，标题，表格，链接等。
Markup Language：标记语言，通常使用一组开始标签和结束标签来表示，标签内可设置属性

DOM树

<!--
<!DOCTYPE html>   放在HTML页面前面的位置，加上之后就会按照W3C的HTML5标准渲染页面
<html>    页面根元素
<head>    对用户不可见，其中包含例如面向搜索引擎的关键字，页面描述，字符编码说明，CSS样式
<body>    包含用户可以看到的文本
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <!--用于移动端，定义设备屏幕上用来显示网页的区域-->
    <meta name="keywords" content="html" />
    <meta
          name="description"
          content="这是页面的描述，如果存在，则会在搜索引擎的结果中显示"
          />
    <title>title</title>
  </head>
  <body>
    <p>Hello World</p>
  </body>
</html>

<!--
HTML包含多个THML元素，元素具备不同的特性
HTML标签不区分大小写
元素可嵌套，可以包括属性的额外信息
-->

HTML语法主要有以下四点：

标签和属性不区分大小写，但推荐原生的一些标签使用小写，构架的组件可以用大写来表示。
空标签可以不闭合，因为标签中间不会再放其他内容，例如input，meta
属性值推荐使用双引号来包裹
某些属性值可以省略，比如required，readonly

HTML5 新特性、语义化

概念：HTML5的语义化指的是合理正确的使用语义化的标签来创建页面结构。【正确的标签做正确的事】
语义化标签：header nav main article section aside footer
语义化的优点:

- 在没CSS样式的情况下，页面整体也会呈现很好的结构效果
- 代码结构清晰，易于阅读，
- 利于开发和维护方便其他设备解析（如屏幕阅读器）根据语义渲染网页。
- 有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重
- 提升页面无障碍性

语义化-区块

<header>...</header>

展现介绍性的信息，导航，标题，logo，搜索框，作者名称等

<nav>...</nav>

提供导航链接，如菜单，目录，索引等

<article>

独立的文档，页面，应用，帖子

<section>

按主题将内容隔开，内含标题

<aside>

与整体没太大关系的部分或文章目录，例如广告，tips，引用内容等，常在侧边栏

<footer>

表示章节页脚，包含该章节作者，版权数据或文档链接等信息

HTML标签

识别页面语言所转用的lang属性

列表标签

有序列表：在ol标签中使用li标签可以实现1-n的数字排序
无序列表 ul：在ul标签中使用li标签可以实现 . 的项目符号排序
定义列表 dl：在dl标签中可以使用dt（标题）dd（标题具体描述的值），且一个dt可以对应多个dd

<dl> <dt> <dd>

链接标签 a

 <a href ="https://juejin.cn/?utm_source=gold_browser_extension"
    target="_blank">
    <!--在新的页面中打开稀土掘金首页-->
</a>

多媒体标签

图片 img 音频audio 视频video

<img
     src="https://e.kaoshiyun.com.cn/cloud/style/login/images/log_on_bj.svg"
     alt="Metal movable type"
     <!--图片无法加载时显示文字 -->
     width="400"
/>

输入标签 input

主要使用input + 属性值来实现不同效果的输入表示。

    <input placeholder ="请输入用户名">  输出一个可以填写文本信息的文本框
    <input type ="range">  输出一个可以调节范围的拉伸条
    <input type ="number" min ="1" max ="10"> 输出一个可以填写数字的文本框并规定范围
    <input type ="date" min ="2018-02-10"> 输出一个可以填写日期的文本框并有最小日期
    <textarea> Hey </textarea> 输出一个可以填写多行文字的文本框

选项标签p

    <p>
        <label><input type="checkbox" /> 选项1</label>
        <label><input type="checkbox" /> 选项2</label>
    </p> 多选标签：在p标签中使用label和input标签 通过定义input的type属性为checkbox来实现多选功能

    <p>
        <label><input type="radio" name="sport" /> 选项1</label>
        <label><input type="radio" name="sport" /> 选项2</label>
    </p>单选标签：在p标签中使用label和input标签 通过定义input的type属性为radio和name来实现单选功能，具体是通过比较多个radio之间如果name相同，则只能从name相同的选项中去选择一个，属于是互斥的关系。

     <p>
         <select>
         <option>选项1</option>
         <option>选项2</option>
         <option>选项3</option>
         </select>
     </p>下拉选择标签：在p标签中使用select和option标签来实现
      
    <input list="countries" />
      <datalist id="countries">
         <option>提示信息1</option>
         <option>提示信息2</option>
         <option>提示信息3</option>
       </ datalist> 自定义输入标签：在p标签中使用input和datalist标签来实现,同样可以使用option标签来为用户输入的答案做一些提示信息。

其他标签

blockquote:快捷引用标签，表示较长的引用，一般用于直接引用其他文章的一段话，使用cite属性指明文章的来源。
cite标签：短引用标签，引用较短的文字，例如引用其他人的作品名字，类似功能的有q标签。
code标签：代码标签，引用长段代码和较短的代码关键字。
strong标签：通常用于文本标签中，表示强调，突出所描述内容的严重性和紧急性，类似的有em标签，em标签主要侧重于在语气上的强调，通常去强调一个词的重音。

HTML | 青训营笔记

概要

HTML

HTML5 新特性、语义化

语义化-区块

HTML标签