HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>test</title>
<link rel="stylesheet" type="text/css" href="##.css">
</head>
<body>
</body>
</html>
文档类型(DOCYTPE)
过渡的(transitional)
严格的(strict)
框架的(frameset)
文档主体
head
title
meta charset(字符编码)
body
HTML标签
无语义标签
div(块状元素)
span(内联元素)
有语义标签
h1-h6(标题)
<h1>这是一个一级标题</h1>
<h2>这是一个二级标题</h2>
<h3>这是一个三级标题</h3>
<h4>这是一个四级标题</h4>
<h5>这是一个五级标题</h5>
<h6>这是一个六级标题</h6>
p(段落)
<p>这是一个段落。</p>
img(图片)
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1601406228427&di=2df13b17636ef7d024b2f7b7ff7e61fc&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201902%2F02%2F20190202113911_evucb.thumb.400_0.jpg" title="金智秀">
a(超链接)
<a href="https://www.baidu.com" target="_blank" title="click here!">点击在新窗口打开百度</a>
ul(无序列表)
ol(有序列表)
li
<ul>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
</ul>
<ol>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ol>
table(表格)
<table border="1">
<caption>这是一个border=1的表格</caption>
<thead>
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<td>第二行</td>
<td>第二行</td>
<td>第二行</td>
<td>第二行</td>
</tr>
<tr>
<td>第三行</td>
<td>第三行</td>
<td>第三行</td>
<td>第三行</td>
</tr>
<tr>
<td>第四行</td>
<td>第四行</td>
<td>第四行</td>
<td>第四行</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总计</td>
<td>100分</td>
<td>100分</td>
<td>100分</td>
</tr>
</tfoot>
</table>
form(表单)
<form method="post" action="save.php">
<label for="username">用户名:</label>
<input type="text" name="username" id="username" value="" />
<br/>
<label for="pass">密码:</label>
<input type="password" name="pass" id="pass" value="" />
<input type="submit" value="确定" name="submit" />
<input type="reset" value="重置" name="reset" />
</form>
<p>数字输入框:</p>
<input type="number" value="数字输入框" name="number" />
<p>请输入一个网址:</p>
<input type="url" value="网址输入框" name="url" />
<p>请输入你的邮箱地址:</p>
<input type="email">
<form action="save.php" method="post">
<label>性别:</label>
<label>男</label>
<input type="radio" value="1" name="gender" />
<label>女</label>
<input type="radio" value="2" name="gender" />
</form>
<form>
个人描述:<br/>
<textarea cols="50" rows="10">在这里输入内容...</textarea>
</form><br/>
<form method="post" action="save.php">
爱好:
<input type="checkbox" name="checkbox1" value="体育">体育
<input type="checkbox" name="checkbox2" value="音乐">音乐
<input type="checkbox" name="checkbox3" value="游戏">游戏
<input type="checkbox" name="checkbox2" value="敲代码">敲代码
</form>
布局
盒子模型
大小(宽高)
margin
border
padding
浮动布局
流动模型(flow)
浮动模型(float)
层模型(layer)
position(absolute、relative、fixed)