# 从零开始写 HTML。。。

无语了，为了实现一些项目。。。。必须学一下前端知识了。。。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

# html5 新增的特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

Canvas 是重点！我需要的就是绘图界面。。。

# 下拉选择

	<label for="weather">Select the weather type today: </label>
	<select id="weather">
	<option value="">--Make a choice--</option>
	<option value="sunny">Sunny</option>
	<option value="rainy">Rainy</option>
	<option value="snowing">Snowing</option>
	<option value="overcast">Overcast</option>
	</select>

效果：

<select id="weather">
<option value="">--Make a choice--</option>
<option value="sunny">Sunny</option>
<option value="rainy">Rainy</option>
<option value="snowing">Snowing</option>
<option value="overcast">Overcast</option>
</select>

# from 表单

	<body>
	<form action="http://106.54.162.114:2021/web" method=post id="form">
	<input type="submit" name="id" value="1000">
	<input type="submit" name="id" value="1500">
	</form>
	</body>

form 表单中 action 表示要跳转到哪里去， method 表示用什么请求协议， id 用于表示这个 form 表单的 id 。这样 js 脚本就可以用到。

根据 input 的 type，选择 submit 这个类别，它会在点击的时候，把其 name 和 value 键值对送出去，这样就发送了一次请求。

效果图：

还可以这样写：

	<form action="http://106.54.162.114:2021/web" method=post id="form">
	<input type="text" name="id">
	<input type="submit" value="提交">
	</form>

点击提交后也能送出 post 请求。

# CSS

# 引用 css 文件

<link rel="stylesheet" href="/css/style.css">

这里 href 我用的是静态链接，目前还没搞清楚咋用文件路径。。。

# 盒子

padding ：内边框。

margin ：外边框。

border ：边框

	border: 10px dashed #555;
	border-radius: 25px; /* 平滑 */
	padding: 10px 15px 15px 15px; /* 设置 padding 大小 */
	margin: 50px; /* 设置外边框 */
	box-sizing: border-box; /* 防止出现界面不够用情况 */

# float

用完 float 记得要 clear，这里给出一个方法。

	.clear{
	clear:both;
	}

这样在 html 里就用写：

<div class="clear"></div>

# background

	background-image: url("/img/back.jpg");
	background-size: cover;

可以添加上图片，并且是以 cover 形式加上的。

# 字体

text-aligin: justify 对齐

# 选择器

# 多个类指向一个类

	<div class="notebox">
	This is an informational note.
	</div>

	<div class="notebox warning">
	This note shows a warning.
	</div>

	<div class="notebox danger">
	This note shows danger!
	</div>

	<div class="danger">
	This won't get styled — it also needs to have the notebox class
	</div>

	.notebox {
	border: 4px solid #666;
	padding: .5em;
	}

	.notebox.warning {
	border-color: orange;
	font-weight: bold;
	}

	.notebox.danger {
	border-color: red;
	font-weight: bold;
	}

可以不加空格应用类。

# 指向特定元素的类

	span.highlight {
	background-color: yellow;
	}

	h1.highlight {
	background-color: pink;
	}

针对 span 和 h1 ，虽然类名都为 highlight ，但应用不同颜色。

# ID 选择器

	#one {
	background-color: yellow;
	}

	h1#heading {
	color: rebeccapurple;
	}

第二个代码块指的是 h1 元素的 heading 类。