这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天
前端技术栈
什么是技术栈？
一般来说是指将N种技术互相组合在一起(N>1)，作为一个有机的整体来实现某种目的或功能。也可以指掌握这些技术以及配合使用的经验。
那么前端的技术栈是什么样的？
通过JavaScript（行为），CSS（样式），HTML（内容）通过网络协议进行传输
那么前端应该关注哪些问题？
主要从六个方面进行考虑
功能：产品的附带功能
美观：做的页面是否好看
无障碍：做的网站是否适合所有人使用
安全：产品是否安全
性能：产品是否流畅
适配：移动端，网页等是否都能使用
学完了前端的主要职责与规范，接下来是HTML语法及标签
HTML语法
标签和属性不区分大小写，推荐小写
空标签可以不闭合，比如 input、meta
属性值推荐用双引号包裹
某些属性值可以省略，比如 required、readonly
HTML标签
标题标签
列表标签
有序列表
有序标签：ol, li
无序列表
标签：ul, li
组合列表
标签：dl, dt dd
链接标签
标签：a
<a href="" title="" target="">登录</a>
href存放目标页面的url，为必写属性； 鼠标放在超链接上显示title的内容； target为页面打开的方式，默认在原页面打开_self，如果设置值为_black，就会打开一个新的页面进行展示。 锚链接
首先定义一个锚点：在标签中添加一个id属性； 超链接到锚点:
<a href="#id属性名">跳转</a>
多媒体标签
标签：image，audio，video
常用image标签属性拓展：
<img src="" alt="" title="提示文本" width="" height=""/>
src:图片的来源，必写属性； 当鼠标放在图片上时显示title的内容； 当图片加载失败时显示alt的内容; 如果不设置图片宽高,显示图片默认大小，如果只设置其中一个，会进行等比例缩放，如果两个都设置就会按照设置的大小进行展示。
输入标签
标签：input，select
input标签拓展
<input type="text" maxlength="8" readonly="readonly" name="username" value="jiangjiang" placeholder="请输入用户名">
maxlength：设置输入的最大字符长度； readonly：设置输入框为只读状态； value：设置默认值； placeholder：提示用户进行操作
<input type="text" maxlength="8" disable="disable" name="username">
disable：输入框没有激活； name：给输入框设置名字，以便进行区分；
<input type="password" maxlength="8" disable="disable" name="username">
密码输入框：输入的信息会变成暗文，文本输入框的所有属性对密码输入框都有效； 单选框
<input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex">
女 一组单选按钮必须要设置同样的name，否则单选无效； 通过checked来设置默认选中项； 多选框
<input type="checkbox" name="hobby" checked="checked">喝酒
<input type="checkbox" name="hobby">抽烟
<input type="checkbox" name="hobby">烫头发
多行文本框
<textarea cols="30" rows="10"></textarea>
cols：控制输入字符的长度； rows：控制输入的行数； 文件上传控件
<input type="file">
按钮
提交按钮：可以实现信息提交
<input type="submit">
普通按钮：不能提交，通常配合js使用
<input type="button" value="普通按钮">
图片按钮：可实现信息提交功能
<input type="image" src="xxx.jpg">
重置按钮：将信息重置到默认状态
<input type="reset">
将表单信息分组
网址输入框：
<input type="url">
会要求输入正确的网址格式，但是空也可以提交，以后会用js进行判断；
日期控件：
<input type="date">
时间控件：
<input type="time">
邮件控件：
<input type="email">
要求输入正确的邮件格式，但是空也可以提交；
数字控件：
<input type="number" step="2">
有一个上下的小三角，可以步进，每次调整的值的大小为2；
滑块控件：
<input type="range" step=20>
文本类标签
引用类
长饮用
标签：blockquote
短引用
标签：cite
引用标签
标签：q
其它文本标签
以上是HTML的标签介绍
HTML内容划分
header：logo，导航等
nav：主体内容，重点等
aside：广告，热点推荐
article：博客文章
footer：参考链接，备案信息等
那么继续介绍下最后一个：语义化
什么语义化？
HTML中的元素，属性及属性值都拥有某些含义
开发者也要遵循语义来编写HTML
有序用ol，无序用ul
lang属性表明语言......
语义化好处
代码可读性
可维护性
搜索引擎优化
提升无障碍性
语义化拓展：
标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）
标签语义化意义： 网页结构合理
有利于SEO和搜索引擎简历良好沟通，有了良好的结构和语义，你的网页内容自然容易被搜索引擎抓取
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
便于团队开发和维护。 好的语义化的网站标准：去掉样式表文件之后，结构依然很清晰。
标签语义化的注意事项：
尽可能少的使用没有语义的标签div和span
在语义不明显时，既可以使用div或者p时，尽量使用p，因为p在默认情况下有上下间距，对兼容特殊终端有利
不要使用纯样式标签，如：font、b、i、s、u等，改用css样式
需要强调的文本，可以包含在strong或者em标签中，strong默认样式是加粗（不要用b），em是斜体（不用i）
