html + css 学习笔记
在此感谢 W3school 和 黑马程序员 web前端入门基础教程 ，帮助我迈进web开发的大门。
HTML 笔记
基本结构
<html>
<!-- 定义整个标准html文件 -->
<head>
<!-- html头 -->
</head>
<body>
<!-- html主题 -->
</body>
</html>
盒子
<div>
</div>
<span>
</span>
div是行元素，独占一行，而span则是块元素，一行可以放好几个。每个盒子相当于一个容器，可以放置其他内容，其他种类的盒子同理。
标题
通过 \(<h1>\) 到 \(<h6>\) 定义
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<hr />
<h3>This is a heading</h3>
\(<hr\ />\) 常用于在页面中创建水平线，用来分隔内容，所以经常和标题搭配着用
段落
通过 \(<p>\) 定义
<p>This is a paragraph.</p>
<br />
<p>This is another paragraph.</p>
段和段是分开的，如果想多打些空行，别用 \(<p></p>\) 这种操作，用一个 \(<br\ />\) 即可
图片
通过 \(<img>\) 定义
<img src="#" alt="my picture"/>
该标签有两个常用属性： src 是指图片的链接，绝对相对均可，空连接就用 # 就行。alt 是替代值，当图片加载不出来的时候用这段文字挡在图片应该显示的位置上面。
超链接
通过 \(<a>\) 定义
普通指向外部链接
<a href="www.baidu.com">百度</a>
这是最常见的，指向一个网页链接
另外，可以使用一个 target 属性，来决定网站的打开方式
<a href="www.baidu.com" target="_blank">百度</a>
<!-- 这样点开这个链接，他会自动在新标签页打开 -->
锚（anchor）的使用
指向该网页内部某个位置，详情可见HTML链接。
表格
通过\(<table>\)定义
<table>
<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>
\(<tr>\)表每行，\(<td>\)表每行上面的第几列元素。
边框属性
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
具体设置可在 css 中详解
表格的表头
一般来说，表格都有一个专门的表头，说明这一列的元素都是啥，我们可以用\(<th>\)代替\(<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>
列表
无序列表
通过\(<ul>\)定义
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
有序列表
通过\(<ol>\)定义
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
每个\(<li>\)相当于一个容器（行），可以在里面放一堆东西
自定义列表
建议这里看黑马程序员的课程，方便理解。
通过\(<dl>\) 定义
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
怎么说呢，这里的\(<dt>\)有点表格里面表头\(<th>\)内味了
表单
表单通过\(<form>\)定义，常常用于收集用户输入（最常用于注册界面啥的）
<form>
<!-- elements -->
</form>
短文本输入
<input type="text">
设置下value值，可以在文本框里面默认显示一些字，如下：
<input type="text" value="请在此处输入你的用户名：">
另外，可以设置一个 maxlength 属性，规定能输入的最长长度，如下：
<input type="text" value="请在此处输入你的用户名(不要超过12个字符)：" maxlength="12">
密码输入
建议使用\(type="password"\)，如下
<input type="password">
单选框
<input type="radio">
对于同一个选项的单选框，应该将他们的name设置为同一个，这样才能实现真正多选一的效果，如下：
<from>
性别：男<input type="radio" name="sex" value="man"> 女<input type="radio" name="sex" value="woman">
</from>
这样我们实现了两个单选框的联系，只能单选。每个选项的值为其value（不懂的话写个submit提交一下看看就懂了，毕竟选的要发给后台）
此外，可以使用一个 checked 属性，决定网站首次打开时该选项是否被选中：
<from>
性别：男<input type="radio" name="sex" value="man" checked="checked">
女<input type="radio" name="sex" value="woman">
</from>
复选框
<input type="checkbox">
和单选框差不多，区别在于能多选
未完待续
