结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title_name</title>
</head>
<body>
Contest
</body>
</html>
标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyWeb</title>
</head>
<body bgcolor="#006400"> # 背景色
<h1 align="center/right">标题1</h1> #标题居中/ 靠右对齐
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
</html>
段落
会自动换行
<p> contest </p>
超链接
<a href="https://www.baidu.com" target="_self">百度</a> #自身标签打开链接
<a href="https://www.baidu.com" target="_blank">百度</a> #新建标签打开链接
<a href="https://www.baidu.com" target="_blank">
<img src="..."> #图片链接
</a>
<a name="tip">This is a tip</a>
<a href="#tip">slick to jump</a> #文本内部链接
图片
<img src="..." width="100" height="100">
规定元素唯一ID
<h1 class="xxx"></h1>
<h1 id="xxx"></h1>
html 格式化字体
<b>Welcome to spy </b> <br> #粗体
<big>Welcome to spy </big> <br> #大号
<small>Welcome to spy </small> <br> #小号
<em>Welcome to spy </em> <br> #强调
<i>Welcome to spy </i> <br> #斜体
<strong>Welcome to spy </strong> <br> #加重
大家好<sub>Welcome to spy </sub> <br> #下标
大家好<sup>Welcome to spy </sup> <br> #上标
<ins>Welcome to spy </ins> <br> #下划线
<del>Welcome to spy </del> <br> #删除线
html 样式
<head>
<meta charset="UTF-8">
<title>TTTTT</title>
<style type="text/css">
h1{ #h1或者h2或者p...
color: #00ffff;
}
</style>
</head>
<body>
<h1>Weclome!!!</h1> #内部样式
<b style="color: blue">Weclome!!!</b> #内联样式
</body>
表格
<table border="1" cellpadding="20"> #边框 和 格子大小
<caption> 表格 </caption> #标题
<tr> #一行
<th>表头1</th> # 表头
<th>表头2</th>
<th>表头3</th>
</tr>
<tr>
<td>单元格1</td> #单元格
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>
<ul> #列表
A
<li>B</li> #列的一种样式
<li>C</li>
</ul>
单元格1
</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table>
列表
<ul type="disc"> #无序
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<ol type="I" start="10"> #有序 标号类型{A:大写字母 a:小写字母 I:大写罗马 i:小写罗马} 起始标号
<li>A</li>
<ul> #列表嵌套
<li> a</li>
<li> b</li>
<li> c</li>
</ul>
<li>B</li>
<li>C</li>
</ol>
div布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div布局</title>
<style type="text/css">
body{
margin: 0px;
}
#container{
width: 100%;
height: 800px;
background-color: aquamarine;
}
#heading{
width: 100%;
height: 10%;
background-color: darkkhaki;
}
#content_menu{
width: 30%;
height: 80%;
background-color: coral;
float: left;
}
#content_body{
width: 70%;
height: 80%;
background-color: antiquewhite;
float: left;
}
#footing{
width: 100%;
height: 10%;
background-color: cornflowerblue;
clear: left;
}
</style>
</head>
<body>
<div id="container">
<div id="heading">头部</div>
<div id="content_menu">内容菜单</div>
<div id="content_body">内容主体</div>
<div id="footing">底部</div>
</div>
</body>
</html>
表单
<body>
<form>
用户名:
<input type="text"> <br/> #文本输入框
密码:
<input type="text"> <br/><br/><br/>
选择你喜欢的字母
A <input type="checkbox"> #复选框
B <input type="checkbox">
C <input type="checkbox"> <br/><br/><br/>
选择你的性别
男<input type="radio" name="sex"> #单选框
女<input type="radio" name="sex"> <br/><br/><br/>
选择你的学校
<select> #下拉选项
<option>NUDT</option>
<option>HNU</option>
<option>CSU</option>
</select> <br/><br/><br/>
<input type="button" value="按钮"> #按钮
<input type="submit" value="确定"> <br/><br/><br/>
</form>
<textarea cols="30" rows="30">请介绍自己</textarea> #文本域
</body>
内联框架
<iframe src="..." frameborder="0" width="400px" height="400px"></iframe>