HTML零基础学习笔记
本文记录了在学习HTML中的一些学习笔记，使用的开发工具是notepad++和记事本，在学习的过程中一定要动手去练哦~
1.基本网页结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
2.标题与注释
<hn></hn> n从1到6，逐渐变小
注释
<!--这里是注释-->
3.水平线、换行和段落标签
水平线<hr/>
换行<br/>
<p alight="left center right justify"></p>
4.预格式标签
预格式标签<pre></pre>
5.字体
<font></font>
<font color="red" size="1~7" face="字体幼圆"></font>
修饰标签
加粗 <b></b> <strong></strong>
倾斜 <i></i> <em></em>
下标 <sub></sub> <sup></sup>
显示特殊符号
http://www.w3school.com.cn/html/html_entities.asp
空格：
6.图片
<img src="xx/xx/xx.jpg" align="right middle left" width = "xxxpx 90%" height = "xxxpx 10%" alt="解释" />
如果使用百分比的时候，是相对于父容器大小的百分比
alt的作用：http://www.w3school.com.cn/tags/att_img_alt.asp（学习前端基础非常好的一个网站哦）
alt利于搜索引擎的搜索
相对路径和绝对路径
path =
当前路径./xx.jpg
上一级路径../xx.jpg
上上一级路径../../xx.jpg (相对路径就是从当前路径寻找，当前路径只的是当前html所在路径)
下一级路径 xx/xx.jpg
path="C:\Users\souke\Desktop\×××\××.jpg"
一般在项目中都使用相对路径
7.列表
无序列表
<ul type="xxx">
<li>Coffee</li>
<li>Milk</li>
</ul>
有序列表
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
自定义列表
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
<dt>运动</dt>
<dd>打篮球</dd>
<dd>踢足球</dd>
</dl>
可以通过type设置圆角等样式
8.超链接
超级链接
<a href="http://www.baidu.com" target="">百度</a>
<a href="web02.html">百度</a>
可以是本机页面，也可以是任意的网页地址(内部链接或者外部链接)
空链接href="#"
超级链接可以给文字或者图片添加target
_self _blank _top _parenttitle属性手放在链接上的时候显示的提示文字name属性定义锚名称
跳转到锚点
（可以使用某个文字或者某个图片作为锚点，也可以定义一个空的锚点）
href="#锚名"
跳转到别的页面的锚点位置
href="xxx.html#锚名"
邮件链接
<a href="mailto:admin@sikiedu.com">给我发</a>
文件下载
<a href="xxx.zip">下载</a> 浏览器会根据链接类型，决定是否下载。
9.表格
表格 tr:table row td table data
<table border="1px" width="34px xx%" height="12px" align="center" bgcolor="red" cellspacing="3px" cellpadding="10px">
<tr height="23px" bgcolor="#00ee90">
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
table上的属性 border width height align bgcolor cellspacing cellpadding
tr上的属性 align水平对齐方式 valign垂直对齐方式 bgcolor width height
td上的属性 height bgcolor
表格合并操作
合并多列
<td colspan="2">row 1, cell 1</td>
合并多行
<td rowspan="2">row 1, cell 1</td>
多列多行合并
<td colspan="2" rowspan="2">row 1, cell 1</td>
单元格里面可以嵌套子表格
被嵌套的表格是一个完整的表格
要放在td，某个单元格里面
表格的表头
效果：内容居中，加粗显示
注意：可以有多个表头
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
表格的标题
<table border="6">
<caption>我的标题</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
如何查看网页源代码
F12调试
10.表单
表单的作用就是把用户输入的信息，发送给服务器处理。
表单标签
<form></form>
在表单标签里面可以包含各种其他标签
文本框，文本域，列表，单选框，多选框，按钮......
上述一个或者多个来组成一个表单
input 输入
textarea 文本域
select 下拉列表
option 下拉列表的项
button 按钮
......
input 可以做文本输入框，按钮，文件，单选按钮，复选按钮
<input type="" name="" />
text 文本
password 密码
file 文件
checkbox 多选按钮
radio 单选按钮
button 按钮
submit 提交按钮
reset 重置按钮
hidden 隐藏
image 图片
<input type="text" /> text和password
其他属性
name 名字
maxlength 最大字符长度
value 默认值
placeholder 提示信息
单选框
<input type="radio" name="sex" value="man" checked />
<input type="radio" name="sex" value="woman"/>
复选框
<input type="checkbox" name="hobby" value="reading" checked />
按钮(普通按钮，提交按钮，重置按钮)
<input type="button" name="" value="普通按钮" />
<input type="submit" name="" value="" />
<input type="reset" name="" value="" />
图片提交按钮按钮
<input type="image" name="image_submit" src="xxx.jpg" />
隐藏域
<input type="hidden" name="" value=""/>
下拉列表
<select name="city" size =" " mutiple>
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
</select>
例子：月份选择，城市选择
文本域
<textarea name="" placeholder="提示信息" rows="2" cols="34">
</textarea>
form表单属性
action 提交路径
method get/post传送数据的方式
get直接把要传输的数据放在URL里面，适合传输少量数据，一般用于请求数据，明文传输
post把数据封装到http请求里面，适合传输大量数据和重要数据传输（登录，注册，发表文章）
name 表单名字
target _self _blank
提交一个表单，相当于点击了一个超链接，打开了一个新的网页，不过通过表单的方式请求
网页的时候，这个请求里面是带有数据的。