这是我参与「第五届青训营 」伴学笔记创作活动的第1天
老骥伏枥，志在千里，不积跬步，怎至千里
一、本堂课重点内容：
- 本堂课的知识要点有哪些？
主要还是讲了前端的概述、前端的作用、html标签的语义，重点在于html标签的语义和使用例子来讲解
- 前端概念
用web技术做用户界面、交互的技术，例如前端入门就包含了js、css和html
- 关注面
美观、安全、功能、性能、无障碍、兼容、体验
- 前端边界
前端的技术，比如nodejs开发服务端、react native多人会议、或者开发游戏
- 开发环境
浏览器或编辑器
二、# html介绍：
- 本堂课介绍了哪些知识点？
- 概念
hyperText Markup language
2.标签组成
属性名和属性值，简写为例如
<img src="" alt="dui" />
3.html组成
doctype html更好地渲染页面
浏览器会把html变成dom树，树型结构，每一个标签为dom结点
4.html语法
- 标签里属性不区分大小写
- 空标签例如input、meta可以不闭合
- 属性值建议双引号
- 有些属性值可以省略，如required、readonly
5.标题
- h1到h6
6.列表标签
- ol 包含li，为有序列表，项前有序号
- ul包含li，无序列表，项目前有圆点
- dl包含dt和dd，自定义列表，definition list，definition title ，一个dt可以能对于对应多个dd
7.链接
a标签，href跳转页面，target为_blank为新窗口打开
8.图片、视频、音频
- img为图片标签，src存放图片链接、alt为当不显示图片时转换成其他
- audio为音频标签，添加controls可以增加播放控件，video一样
9.输入标签input
- placeholder=’请输入用户名‘为输入前显示文本
- type=’‘range“，滚动条
- type=“number” min=”1“ max=”10“数字型输入，限制大小
- type=“date” min=“2018-02-10”日期控件
- textarea类型为文本域，可调整大小
- 两个radio类型需要有相同的name达到互斥效果
- input的list与datalist标签的id名字一致，datalist包含option，则输入时会有option的相关补齐提示
10.label标签
可以包含input和一个数据，点击数据和点击input效果一样
11.select包含多个option，为下拉选择
12.文本标签
- blockquote标签，cite属性可以存放块的链接，内容可以放p
- cite标签可以为p中的引用，一般引用作品名字
- q标签一般引用内容
- code标签为代码标签，存放代码
- pre标签放多行代码，包含code
- strong标签和em为加粗，strong是含义重的，em是语气重
13.页面布局
- header页头，nav为导航标签，aside为次要信息，article为文章内容，一个页面一般一个main元素，footer为页尾，如参考信息、版权、
14.语义化
- 元素、属性、属性值有含义
- 例如有序列表用ol；无序列表用ul
- lang属性表示内容的语言
少年不惧岁月长，彼方尚有荣光在
