这是我参与「第四届青训营 」笔记创作活动的的第1天。
什么是前端
对于前端，我的理解是使用HTML、CSS、javascript等语言写出网页代码，借助浏览器将网页渲染出来。因此学习前端，不仅要学习HTML、CSS和javascript，也要了解互联网的工作原理以及浏览器是如何运作的。此外，前端面向的是客户端，因此前端要注重其功能、美观、性能、安全等方面的问题。
HTML语言
HTML是超文本标记语言，与C语言、Java、python等编程语言不同，它是一种标记语言。
HTML语法
<!--标签不能交叉嵌套-->
正确：
<div><span>早安，小朋友</span></div>
错误：
<div><span>早安，小朋友</span></div>
<hr/>
<!--标签必须正确关闭（闭合）-->
正确：
<div><span>早安，小朋友</span></div>
错误：
<div><span>早安，小朋友</span></div>
<hr/>
<!--没有文本内容的标签-->
正确：<br/>
错误：<br>
<hr/>
<!--属性必须有值，属性值必须加引号-->
正确：<font color="blue">早安，小朋友</font>
<hr/>
<!--注释不能嵌套-->
正确：<!--注释内容-->
错误：<!--<!--注释内容-->-->
</body>
</html>
HTML部分常用标签
1. 标题标签
需求1：演示标题1到标题6
h1-h6都是标题标签
h1最大
h6最小
align属性是对齐属性
left 左对齐(默认)
center 居中
right 右对齐
其中的左对齐，右对齐是相对与浏览器页面而言
代码演示如下
<h1 align="left">标题1</h1>
<h2 align="center">标题2</h2>
<h3 align="right">标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<hr/>
2. 超链接标签
超链接 使用a标签
href属性设置连接地址
target属性设置目标跳转
_self 表示在当前页面跳转
_blank 表示打开新页面来跳转
代码演示如下
<a href="http://www.baidu.com">百度</a><br/>
<a href="http://www.baidu.com" target="_self">百度_self</a><br/>
<a href="http://www.baidu.com" target="_blank">百度_blank</a><br/>
3. 列表标签
列表有无序列表和有序列表
需求：使用无序列表的方式，把东北F4，赵四，刘能，小沈阳，宋小宝展示出来
ul 是无序列表
type可以改变前面的符号
li是列表项
ol是有序列表
代码演示如下
<ul type="none">
<li>赵四</li>
<li>刘能</li>
<li>小沈阳</li>
<li>宋小宝</li>
</ul>
<ol>
<li>赵四</li>
<li>刘能</li>
<li>小沈阳</li>
<li>宋小宝</li>
</ol>
4.img标签
需求：使用img标签放一张图片，并修改宽高，边框属性
img标签是是图片标签，用来显示图片
src设置图片的路径
width
height调节图片的宽度与高度
border属性设置图片的边框大小
alt属性设置当前指定的路径找不到图片时，用文本来代替显示内容
在javaSE中，路径分为相对路径和绝对路径
相对路径：从工程名开始算
绝对路径：盘符:/目录/文件名
在web中，路径分为相对路径和绝对路径
相对路径：
. 表示当前文件所在的目录
.. 表示当前文件所在的上一级目录
文件名 表示当前目录所在的文件，相当于 ./文件名 ./可以省略
绝对路径：
格式是：http://ip:port/工程名/资源路径 如：http://localhost:8080/工程名/资源路径
代码演示如下
<img src="./goodimg/1.jpg" width="200" height="260" border="1" alt="商品图片找不到"/>
<img src="./goodimg/2.jpg" width="200" height="260"/>
5. 表单标签
表单就是html页面中，用来收集用户信息的所有元素的集合，然后将信息发送给服务器
form标签是表单标签
action 属性设置提交的服务器地址
method 属性设置提交的方式get或post
表单提交的时候，数据没有发送给服务器的三种情况：
1.表单项没有name属性
2.单选、复选（下拉列表中的option标签)都需要添加value属性，以便发送给服务器
3.表单项不在提交的form标签中
Get请求的特点
1.浏览器地址栏的地址是：action属性[+?+请求参数]
请求参数的格式是：name=value&name=value
2.不安全
3.它有数据长度的限制
Post请求的特点
1.浏览器地址栏中只有action属性值
2.相对于GET请求要安全
3.理论上没有数据长度的限制
form标签就是表单
input type=text 是文字输入框 value设置默认显示内容
input type=password 是密码输入框 value设置默认显示内容
input type=radio 是单选框 name属性可以对其分组 checked="checked"表示默认选中
input type=checkbox 是复选框 checked="checked"表示默认选中
input type=reset 是重置按钮 value属性修改按钮上的文本
input type=submit 是提交按钮 value属性修改按钮上的文本
input type=button 是按钮 value属性修改按钮上的文本
input type=file 是文件上传
input type=hidden 是隐藏域 当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）
select 标签是是下拉列表框
option 标签是下拉列表框中的选项 selected="selected"设置默认选中
textarea 表示多行文本输入框 （起始标签和结束标签中的内容是默认值）
rows 属性设置可以显示几行的高度
cols 属性设置每行可以显示几个字符宽度
代码演示如下
<form action="http://localhost:8080" method="post">
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<td>用户名称：</td>
<td>
<input name="username" type="text" value="默认值"/>
</td>
</tr>
<tr>
<td>用户密码：</td>
<td>
<input name="password" type="password" value="abc">
</td>
</tr>
<tr>
<td>确认密码：</td>
<td>
<input name="password" type="password" value="abc">
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" checked="checked" value="boy"/>男
<input type="radio" name="sex" value="girl"/>女
</td>
</tr>
<tr>
<td>兴趣爱好：</td>
<td>
<input name="hobby" type="checkbox" checked="checked" value="java"/>Java
<input name="hobby" type="checkbox" value="js"/>JavaScript
<input name="hobby" type="checkbox" value="cpp"/>C++
</td>
</tr>
<tr>
<td>国籍：</td>
<td>
<select name="country">
<option>--请选择国籍--</option>
<option selected="selected">中国</option>
<option>美国</option>
<option>俄罗斯</option>
</select>
</td>
</tr>
<tr>
<td>自我评价：</td>
<td>
<textarea name="desc" rows="10" cols="20">我才是默认值</textarea>
</td>
</tr>
<tr>
<td>
<input type="reset">
</td>
<td align="center">
<input type="submit">
</td>
</tr>
</table>
6. 表格标签
需求1：做一个带表头的三行三列的表格，显示边框
需求2：修改表格的宽度与高度，表格的对齐方式，单元格间距
table 标签是表格标签
border 设置表格边框
width 设置表格宽度
height 设置表格高度
align 设置表格相对于页面的对齐方式
cellspacing 设置单元格间距
tr 是行标签
th 是表头标签
td 是单元格标签
align 设置单元格文本对齐方式
b 标签是加粗标签
代码演示如下
<table align="center" border="1" width="300" height="300" cellspacing="20">
<tr>
<th>1.1</th>
<th>1.2</th>
<th>1.3</th>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
需求3：新建一个五行五列的表格，第一行，第一列的单元格要跨两列，第二行第一列的单元格跨两行，第四行第四列的单元格跨两行两列
colspan 属性设置跨列
rowspan 属性设置跨行
代码演示如下
<table width="500" height="500" cellspacing="0" border="1">
<tr>
<td colspan="2">1.1</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
<td>3.5</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td colspan="2" rowspan="2">4.4</td>
</tr>
<tr>
<td>5.1</td>
<td>5.2</td>
<td>5.3</td>
</tr>
</table>
内容划分
HTML内容划分为header、main、aside、footer。正如一个网页，其有头部部分、主体部分、边缘部分以及结尾的部分。
