这是我参与「第四届青训营 」笔记创作活动的第3天，今天想要回顾一下html的相关知识，让我立刻开始吧。
一.什么是前端？
前端的任务是解决GUI人机交互问题，其解决跨终端和Web技术端的问题。其技术栈为HTML，CSS与JavaScript。在前端开发中，应当注意美观，兼容，功能，安全，无障碍等因素，使我们开发出更好的服务。
二.HTML学习
HTML全称为HyperText Markup Language。其中HyperText涵盖了图片，标题，链接与表格。而Markup Language为超文本标记语言。
以<img src="photo.jpg"/>为例，src为属性名，而photo.jpg为属性值。从而在html中语句主要由属性名和属性值构成。
<html>
<head>
<meta charset="UTF-8">
<title>米亚鹏的暑假生活</title>
</head>
<body>
<h1>暑假任务</h1>
<p>完成70%就算成功</p>
</body>
</html>
上面的代码块展示了一般的HTML结构，为编辑是html5标准网页声明，在编写代码中应该应该先写此行。后面主要是由html，head，body等标签构成，下面画出它的DOM树，其更形象的展现了网页编辑的结构。
这里我们总结HTML语法如下：
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如
input，meta - 属性值推荐用双引号包裹
- 某些属性值可以省略，比如
required，readonly
三.HTML常用标签
1.<p>段落标签</p> ：用来定义网页中的一段文本，段落与段落之间换行。
属性：align ；定义段落中的文本水平方向的对齐方式。
属性值：left（左对齐）、right（右对齐）、center（居中对齐）
2.<br/> ：换行标签，指行与行之间换行，他是一个单标签。
3.<h1></h1>---<h6></h6>：
<h1></h1>：代表一级标题，级别高，字体 也最大，其他依次递减。
<h6></h6>：级别最小，字体最小
属性：align ；定义标题中的文本水平方向的对齐方式。
属性值：left（左对齐）、right（右对齐）、center（居中对齐）
4.<blockquote>文字段落缩进</blockquote>：在标签中包含块级标签，而不是纯文本。
5.建立无序列表
<ul type="circle">
<li>列表项</li>
<li>列表项</li>
</ul>
属性：type ；定义列表项的符号。
属性值：circle（空心圆）、disc（实心圆）、square（实心方块）
6.建立有序列表
<ol type="a">
<li>列表项</li>
<li>列表项</li>
</ol>
属性：type ；定义列表项的符号。 start：用来设置列表编号的起始数值。
属性值：a、A、i、I
7.建立自定义列表
<dl>
<dt>列表标题</dt>
<dd>列表项</dd>
<dd>列表项</dd>
</dl>
8.文字特殊样式
<b>加粗</b>
<i>倾斜</i>
<u>下划线</u>
<s>删除线</s>
<big>放大</big>
<small>缩小</small>
<strong>加强强调</strong>
<em>强调倾斜</em>
9.<img/>图片标签
属性：
src：指定图片源文件；
alt ：图片未加载成功的提示文字；
width：指定图片的宽度；
height：指定图片的高度；
border：指定图片的边框样式；
alghr：top/bottom/middle；图片位于两端文字在垂直方向的一个上/中/下的对齐方式；
<img src="http://img5.duitang.com/uploads/item/201610/31/20161031181100_TVEPU.jpeg"/>
属性：
href：连接地址；空连接可以用"#"代替；
target ：_self/_blank;打开方式；_self在当前页面中打开，_blank在新的空白窗口打开。
<a href="http://baidu.com" target="_blank"></a>
10.div可定义文档中的分区或节（division/section）
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是
<div> 的 class 或 id 应用额外的样式。
<div class="test">111111</div>
11.<span> 标签被用来组合文档中的行内元素。
span标签和div标签是最常用的标签，主要对他们进行样式的应用来改变视觉上的变化。
<span>我是span标签</span>
12.<table></table>：表格基本结构
<table>
<caption>表格标题</caption>
<tr>
<td>我是第一行的第一个单元格</td>
<td>我是第一行的第二个单元格</td>
</tr>
<tr>
<td>我是第二行的第一个单元格</td>
<td>我是第二行的第二个单元格</td>
</tr>
</table>
表格的表头是单元格的一种变体，实质上是一种单元格加粗和居中 table的属性：
- width：表格的宽度
- height：表格的高度
- align：表格的对齐方式
- border：表格的边框
- bordercolor：边框的颜色
- cellspaning：单元格之前的距离
- csllpadding：单元格与内容之间的距离
- bgcolor：表格的背景颜色
- background：表格的背景图片
tr的属性：
- height：行的高度
- bordercolor：边框的颜色
- bgcolor：表格的背景颜色
- background：背景图片
- align：文本水平对齐方式
- valign：文本垂直对齐方式
tr的属性：
- width：单元格的宽
- height：单元格的高度
- bordercolor：边框的颜色
- bgcolor：背景颜色
- background：表格的背景图片
- align：文本水平对齐方式
- valign：文本垂直对齐方式
- colspan：水平合并单元格（跨列）
- rowspan：垂直合并单元格（跨行）
完整的表格标记 如果使用thead、tfoot、tbody元素，就必须使用全部的元素。
13.表单 （form）输入类型
- 单选按钮 （checked默认）
<input type="radio" name=" " checked />
<input type="radio" name=" " />
- 复选按钮 （checked默认）
<input type="checkbox" name=" " checked />
<input type="checkbox" name=" " />
- 密码输入框
<input type="password" />
- 提交按钮
<input type="submit" />
- 重置按钮
<input type="reset" />
- 普通按钮
<input type="button" />
- 图片按钮（有提交功能）
<input type="image" />
- 多行文本框
<textarea cols="一行多少字符" rowa="多少行"><textarea>
- 列表框
- <select size="一次显示多少个" multiple="可多选">
- <option selected>默认的下拉菜单1</option>
- <option>下拉菜单2</option>
- </select>
- 单行文本框
<input type="text" size="文本框显示的长度" maxlength="最长字符数"/>
- 隐藏域
<input type="hidden"/>
- 文件域
<input type="file"/>
四.内容划分与语义化
（1）内容划分
在网页编辑中，常采用如下的内容划分方式：
（2）语义化
- HTML中的元素，属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
语义化的好处有：
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
如何做到语义化：
- 了解每个标签和属性的含义
- 思考那个标签适合描述这个内容
- 不适用可视化工具生成代码
最后，我们要记住：传达内容，而不是样式。
