这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天。今天所学习的内容是前端与HTML。
什么是前端？
首先我们需要了解前端是什么。先看一下百度释义
前端即网站前台部分，运行在PPC端或移动端等浏览器上展现给用户浏览的网页。
前端是通过网络协议与服务端交互的，它主要包括HTML（内容）、css（样式）、JavaScript（行为）。HTML构成了网页的框架，css与js（JavaScript的简称）来负责网页的美化，增强用户的视觉以及使用体验。前端所关注的应该包括功能、美观、无障碍、安全、性能、兼容、无障碍以及体验。
什么是HTML？
HTML全称为HyperText Markup Language，意为超文本标记语言。所以我们首先应该知道的是，HTML并非编程语言，而是一种标记语言。超文本，指的就是图片、标题、链接、表格等基于文字但超于文字的表现形式。
1. HTML的结构
HTML主要包括头部（head）和身体（body）。其中head又包括meta（html网页文档的属性）和title（网页标题）等，body包括h1、p、img等。具体包含内容会因页面需求不同而有所改变。
2. HTML的语法
- 标签和属性不区分大小写，但推荐全部小写
- 空标签可以不闭合，比如input、meta
- 属性值推荐用双引号包裹（英文引号）
- 某些属性值可以省略，如required、readonly
3. HTML的实例
（1）单标签
- 图片：
<img src="url" alt="some_text">
此外，用img、map和area可以制作可点击图片。注意img和map使用同名类，area标签必须包含在map中。
- 换行
<br> - 水平线：
<hr> - 输入：
<input type="type_name" value="value_name">
type_name可以是text（创建单行文本输入框）、password（密码输入框）、radio（单选框）、checkbox(复选框）、button（普通按钮）、submit（提交按钮）、reset（重置按钮）、image（图像按钮）、hidden（隐藏域，不在网页中显示，它用来存储与传递表单的值，当用户提交表单时，隐藏域的内容会一起提交给处理程序）、file（文件提交按钮，从本地上传文件提交）、url（输入URL字段）、tel（输入电话号码）、email（输入邮箱地址，输入不合法会提示）search（搜索框）、color（颜色选择器，可以直接调用系统的颜色调节窗口，默认为黑色）、number（数字字段，可以用min和max设定范围）、range（定义用于精确值不重要的输入数字的控件，min属性指定最小值限制，max属性指定最大值限制，step属性规定合法数字间隔，value属性规定默认值）、date（日期控件）、month（年月控件）、time（时间控件）、datetime（日期加时间控件）
- 引用：
<link rel="relationship" href="url">
（2）双标签
- 标题：
<h1>一级标题</h1>``<h2>二级标题</h2>...一共六级，数字越小标题越大。 - 段落：
<p>这是段落内容</p>段落会自动在段前段后创建一些空白。 - 链接：
<a href="url">这是链接显示的文字</a> - div:
<div>这是div标签</div>div标签定义 HTML 文档中的一个分隔区块或者一个区域部分，常与css一起使用，用来布局网页。 - 斜体：
<i>这部分内容是斜体</i> - 表单：
<label>这是要提交的表单内容</label>``<form>这是要提交的表单内容</form> - 表格：
<table><tr><td></td></tr></table>有几个tr就有几行，有几个td就有几列。 - 列表：有序列表：
<ol><li></li></ol>无序列表：<ul><li></li></ul> - 音频：
<audio><source src="url"></audio> - 视频：
<video><source src="url"></video>
4.语义化
HTML中的元素、属性及属性值都拥有某些含义，开发者应遵循语义来编写HTML，我们要传达的是内容而非样式。举例来说，我们通常标题字体会加粗加大，但用p标签和strong/b、fontsize结合使用也能实现与h相同的效果，但我们会选用h标签而不是p，就是为了HTML的语义化。
实现语义化可以提高代码的可读性、无障碍性和可维护性，也能实现搜索引擎的优化。那如何做到语义化呢？首先，我们应该充分了解每个标签的属性和含义；其次，在编写网页时，要思考什么标签最适合描述这个内容；最后，尽量不适用可视化工具生成代码。
今天的内容大概就是这些，拖拖沓沓好几天才完成，我在此反思，下次一定改正！
