这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天
什么是前端
解决gui人机交互问题 跨终端 web技术栈
前端技术栈
js（行为）、css（样式）、html（内容）
前端应该关注哪些方面？功能、美观、兼容、性能、安全、体验、无障碍。
前端的边界
nodejs ： 服务器端
electron + React Native ： 客户端应用
Web RTC ： P2P在线传输实现多人会议
WebGL ： 3D游戏
WebASSEMBLY ： 把c++ rust 其他语言的代码编译成可以直接在浏览器上运行的代码
HTML
超文本标记语言（HyperType Markup Language）
标签名 属性名 属性值
有以下这些基本标签
!doctype html 当前使用的html文件 标记html版本
head 放元数据
body 放需要呈现给用户的内容
（DOM树：浏览器拿到代码后进行解析，解析成一棵dom树
每个节点为dom节点）
html语法
标签和属性不区分大小写，推荐小写，框架原生代码为小写，自定义为大写
required（必填，为属性名）值的类型为true或false，不需要写属性值，加了就表示输入框必填
有以下这些标签
h1—h6 标题
p 段落 paragraph
ol有序列表 order list 效果：前面有1. 2.
ul 无序列表 unorder list 效果：前面有一个小黑点
li 列表元素list item
还有一种列表以key-value形式展现
属性名-属性值 去描述：
dl 定义列表 definition list
dt 描述标题 definition title
dd 具体描述 definition description
dt 和 dd 是'多对多'关系
a 链接 anchor 有以下这些属性名：
href （属性值：hypertext reference超级文本引用）超链接引用地址
target：目标位置 blank☞新开一个页面播放( target=" blank")
img audio video
alt： 替代文本 alternative text
controls 可不加属性值，☞浏览器默认显示，是浏览器默认播放控件
input
placeholder 占位符，给出输入框提示，在输入框有文字输入时消失
type="range" 滑动块
input type="number" min="1" 当输入小于1的数字时，鼠标在输入框停留时，弹出提示“值必须大于或等于1” 。 ps.这个数字框可以通过按钮上增下减，幅度默认为1。
input type="date" min="2018-02-10"
input type="checkbox/radio"多选/只能选一个
checked 默认选中（属性名）
type="radio"时的互斥关系，靠name属性达到。在多个name属性值相同的元素中只能选一个。
select 下拉选择框(嵌套option )
option 选项
input list=""并设置datalist标签（id="list属性值"），datalist标签内嵌option标签，用途：提示用户填入项，快捷输入方式
<input list="countries" />
<datalist id="countries">
<option>Greece</option>
<option>United Kingdom</option>
<option>United States</option>
</datalist>
blockquote 块级引用，cite属性值填入引用文字来源地址，内嵌p标签为引用文字内容
cite 短引用，可用在p标签内（可以表示书/作品的名字、章节，斜体）
q 引用，可用在p标签内（表示引用的一个具体的内容）
code标签，一行用p标签包裹，多行用pre标签包裹
strong 和 em强调，可用在p标签内（含义上紧急/语气上的强调）（加深字体/斜体）
语义化
html元素、属性、属性值都拥有某些含义
开发者应遵循语义来编写HTML
传递内容，而不只是样式
access ability，不只是为残疾人服务
提升页面的无障碍性很重要。
关于进一步的学习
mdn w3c 看源文档（不是w3cSchool） html5规范
可以用编辑器的插件辅助，不要去用可视化工具生成代码，不好自定义样式
