前端技术栈

前端的技术栈主要包括HTML、CSS、JavaScript

• HTML主要负责页面结构还有内容
• CSS来设置页面的样式
• JavaScript来定义网页的行为

这三者都是运行在浏览器里面的，而浏览器可以通过http和服务器进行通信，它把前端的这些代码通过http协议从服务器上拿到，然后渲染成我们看到的页面。

接下来是HTML的相关笔记：

HTML语法

• 标签和属性不区分大小写，推荐小写
• 空标签可以不闭合，比如input、meta
• 属性值推荐用双引号包裹
• 某些属性值可以省略，比如required、readonly

相关标签：

head标签：head里放着页面的编码方式以及标题。
body标签：body里面放着需要呈现给用户的真正内容。
h1~h6标题标签：h1表示一级标题，h2表示二级标题，以此类推。

列表标签：

ol有序列表：列表中的每项都是有顺序的，里面的每个列表项都用一个li表示，默认每项前面加1、2、3等序号。
ul无序列表：列表中的每项都是无顺序的，里面的每个列表项都用一个li表示，默认每项前面加一个小黑点等。
dl定义列表：主要包裹着一些组合信息，里面的标题用dt表示，具体的值用dd表示，放在dt里面。

a链接标签：点击可跳转到指定地址，最重要的属性是href，决定着跳转的地址。
img图片标签：可插入需要的图片，重要是属性是src，表示着图片的地址；alt属性表示图片的替代文本。
audio音频标签：可插入相关音频。
video视频标签：可插入相关视频。

表单控件：

input输入标签：用来给用户提供信息的。

<input placeholder="请输入用户名"> 
<input type="range">                      <!-- 设置范围条 -->
<input type="number" min="1" max="10">    <!-- 填写数字 -->
<input type="date" min="2018-02-10">      <!-- 填写日期 -->

<label><input type="checkbox">篮球</label>   <!-- 在已有的值中选择一个或多个值 -->
<label><input type="checkbox">足球</label>      

<label><input type="radio" name="篮球"></label>  <!-- 在name相同的选项中选一个 -->
<label><input type="radio" name="足球"></label> 

<select>     <!-- select下拉选择 -->
    <option>篮球</option>
    <option>足球</option>
</select>

textarea多行文本标签：可填写多行信息。

文本标签：

p段落标签：设置文本单独居于一行。
blockquote长引用标签：引用其他话句。
q双引号标签。
code标签：引用代码。
strong和em标签：起强调作用。

HTML内容划分：

hearder标签：呈现页头东西的地方。
nav标签：存放导航栏。
main标签：页面的主体内容放在main里面。
aside标签：存放与页面内容相关的又不属于这个页面里的内容。
footer标签：存放页脚东西的地方，一般是一些参考链接。

页面内容的划分可以让我们在进行页面设计时能更好的规划每一份代码，让我们可以更快的设计构成初步的页面，提高我们工作的效率。

HTML语义化

语义化是什么？

• HTML中的元素、属性及属性值都拥有某些含义
• 开发者应该遵循语义来编写HTML
• 有序列表用ol，无序列表用ul
• lang属性表示内容所使用的语言

语义化的好处

• 代码可读性
• 可维护性
• 搜索引擎优化
• 提升无障碍性

如何做到语义化？

• 了解每个标签和属性的含义
• 思考什么标签最适合描述这个内容
• 不使用可视化工具生成代码

通过今天的课程能清楚的了解到前端的构成和发展，html的各种标签用法和相关的属性，以及HTML的语义化，在HTML中我们应更注重内容而不是样式，多加了解各个标签和思考它们的作用，用最合适的标签描述适合的内容，把页面最简单易懂的形式呈现给用户，提高用户阅读的流畅性。