这是我参与第四届青训营笔记创作活动的第1天
一 什么是前端
- 解决*GUI(图形用户界面)*的人机交互问题所做的事情
- 解决跨终端问题
- Web技术栈
二 前端技术栈
网页最主要由3部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript。
三 前端应该关注那些方面
四 什么是HTML
HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。
HTML的基本结构
<!DOCTYPE HTML> <!-- HTML5标准网页声明 -->
<HTML> <!-- HTML为根标签，代表整个网页 -->
<head> <!-- head为头部标签，一般用来描述文档的各种属性和信息， 包括标题等-->
<meta charset="UTF-8"> <!-- 设置字符集为utf-8 -->
<title>my HTML</title> <!-- 设置浏览器的标题 -->
</head>
<!-- 网页所有的内容都写在body标签内 -->
<body>
我的第一个HTML网页
</body>
</HTML>
HTML的语法
- 标签和属性不区分大小写，推荐小写，自定义的标签用大写
- HTML 标签通常是成对出现的，比如
<div></div> - 空标签可以不闭合，比如
input、meta - 我们的属性值推荐用双引号包裹
- 有些属性有默认属性值像是
input标签的required属性是一个Boolean值
HTML常见的标签
| 标签 | 语义 | 说明 |
|---|---|---|
<h1>~<h6> | header | 标题 |
<p> | paragraph | 段落 |
<br> | break | 换行 |
<hr> | horizontal rule | 水平线 |
<div> | division | 分割（块元素） |
<span> | span | 区域（行内元素) |
<ol> | ordered list | 有序列表 |
<ul> | unordered list | 无序列表 |
<li> | list item | 列表项 |
<th> | table header | 表头单元格 |
<td> | td | 表身单元格 |
超链接标签
超链接使用a标签，语法如下：
<a href="链接地址" target="目标窗口的打开方式">
| target属性值 | 说明 |
|---|---|
| _self | 默认方式，即在当前窗口打开链接 |
| _blank | 在一个全新的空白窗口中打开链接 |
| _top | 在顶层框架中打开链接 |
| _parent | 在当前框架的上一层里打开链接 |
图像标签
在HTML中，图像标签为<img>。<img>是一个自闭合标签。img标签只需要掌握3个属性就可以了：src、alt、title。
语法：
<img src="图片地址" alt="图片描述（给搜索引擎看）" title="图片描述（给用户看）">
表单标签
表单标签共有4个：<input>、<textarea>、<select>和<option>。其中<select>和是配合使用的。
表单一般用
<form></form>包裹功能：用来定义数据采集的范围，也就是
<form>和</form>里面包含的数据将被提交到服务器语法：
<form action="服务器地址，数据提交的地址" method="属性包括get/post 输入的属性get 会在地址栏显示 post 在地址栏看不到"></form>
五 HTML语义化
语义化是什么
- 根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器更好的解析。
为什么要语义化
- 为了在没有CSS的情况下，页面也能呈现出很好的内容结构和代码结构。
- 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用。
- 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息（爬虫依赖于标签来确定上下文和各个关键字饿权重）。
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页。
- 便于团队开发和维护，语义化更具可读性，是下一步网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
HTML5新增的语义标签
article（定义文章）、aside（定义文章的侧边栏）、figure（一组媒体对象以及文字）、figurecaption（定义figure的标题）、footer（定义页脚）、header（定义页眉）、nav（定义导航栏）、section（定义文档中的区段）、time（定义日期和时间）、dialog（定义一个对话框）
参考资料
字节青训营教学视频及PPT
