2周没有写HTML5,脑子就有些混乱了。做一下笔记
HTML5典型页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header>
<h1>HTML5</h1>
</header>
<main></main>
<footer></footer>
</body>
</html>
忘记了有<header><main><footer>这类标签
这类标签都可以用CSS
h1~h6标示大标题
p标示段落
P可以用来换行
a链接
<a href="http://jirengu.com" target="_blank" title="饥人谷">饥人谷.com</a>
title是鼠标放上去的显示出来的提示
target=“_blank”打开新页面
没有target则是变成当前页面直接跳转
img
![](a.png)
alt是在后面的显示的名称
用来展示图片
UL
<ul>
<li>联系</li>
<li>地址</li>
</ul>
无序列表
OL
<ol> <li>
同理有序列表
dl dt dd 作用于商品介绍
<dl>
<dt>商品名称:</dt>
<dd>青花瓷</dd>
<dt>特征:</dt>
<dd>白色</dd>
<dd>圆口</dd>
<dt>商品介绍</dt>
<dd>这是一个年代久远的瓷器,很贵,易碎</dd>
</dl>
button
<button>点我</button>
强调用的不多
<p>优惠 <strong>100</strong> 元</p>
<p>小谷 <em>2</em> 岁了</p>
嵌入页面
<iframe src="http://jirengu.com" name="myPage"></iframe>
TABLE列表
table tr-th tr-td
<table>
<tr>
<th>姓名</th>
<th>年纪</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
</tr>
<tr>
<td>小花</td>
<td>20</td>
</tr>
</table>
meta
IE最高模式
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
声明文档使用的编码付
<meta charset="utf-8">
搜索引擎关键字
<meta name="keywords" content="your tags">
表单
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="login">
<input type="text" name="sex">
<form action="/getInfo" method="get">
<div class="submit">
<button>提交😁</button>
</div>
<div class="username">
<label for="username">姓名</label>
<input id="username" type="text" name="username" value="ruo">
</div>
<div class="password">
<label for="password">密码</label>
<input id="password" type="password" name="password" placeholder="输入密码">
</div>
<div class="hobby">
<label>爱好</label>
<input type="checkbox" name="hobby" value="read"> 读书
<input type="checkbox" name="hobby" value="music"> 听歌
<input type="checkbox" name="hobby" value="study"> 学习
</div>
<div class="sex">
<label>性别</label>
<input type="radio" name="sex" value="男"> 男
<input type="radio" name="sex" value="女"> 女
</div>
<div class="file">
<input type="file" name="myfile" accept="image/png">
</div>
<div class="select">
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai" selected>上海</option>
<option value="hangzhou">杭州</option>
</select>
</div>
<div class="textarea">
<textarea name="article">
多行文本,注意和 type=text的区别
</textarea>
<input type="hidden" name="csrf" value="12345623fafdffdd">
<input type="button" value="Buttom" /> 不会提交
<input type="submit" value="Submit" /> 会提交
<input type="reset" value="Reset" /> 重置输入
</div>
</form>
</div>
</body>
</html>
注意type="buttom" 是不会提交的 单纯按钮功能
type="submit" 才是提交的
一般提交表单数据method="POST"而不用method="get"