console
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习</title>
<style type="text/css">
body {background-color:whirt;}
p {color:blue;}
</style>
<!-- 存在头标签里的是设置整个页面的样式，存在单个标签里的是设置单个元素的样式 -->
</head>
<body>
<h1 style="font-family:verdana;color:red;text-align:center;">学习笔记</h1>
<h2 style="text-align:center;"><a id="begin">测试</a></h2>
<!-- text-align指定文本水平与垂直的对齐方式 -->
<hr/>
<a href="#end">点击去结尾</a>
<p>这是第一行</p>
<!-- 这是注释 -->
<a href="http://www.baidu.com" target="_blank">这是百度地址</a>
<!-- 把target设置为_blank就是在新的窗口打开这个链接 -->
<br/>
<img src=" http://www.runoob.com/images/pulpit.jpg" alt="just a joker!"" width="100" height="80" />
<!-- src是输入图片的url地址，而alt则是图片加载不出来时显示的替代文本 -->
<table border="1" cellpadding="10" cellspacing="10">
<!-- border是表格的框，cellpadding是单元格的边距，cellspacing是单元格的间距，
th是表头，tr是一行,td是一行的一个格子 -->
<caption>表格</caption>
<tr>
<th>month</th>
<th>date</th>
<th colspan="2">time</th>
<!-- 跨两列 -->
</tr>
<tr>
<td rowspan="2">
<ul>
<!-- 这是一个无序列表，有序列表是ol -->
<li>apple</li>
<li>banana
<ol type="A">
<li>ban</li>
<li>nana</li>
</ol>
</li>
<li>cat</li>
</ul>
</td>
<!-- 跨两行 -->
<td>2</td>
<td>06</td>
<td>56</td>
</tr>
<tr>
<td>20</td>
<td>08</td>
<td>42</td>
</tr>
</table>
<h2 style="text-align:center;">列表</h2>
<hr/>
<dl>
<!-- 自定义列表，每个自定义列表项以dt开始，自定义列表项的定义以dd开始 -->
<dt>apple</dt>
<dd>-app</dd>
<dt>banana</dt>
<dd>-ban</dd>
</dl>
<h2 style="text-align:center">布局和表单</h2>
<hr/>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;text-align:center;">主要的网页标题</h1></div>
<div id="menu" style="background-color:#FFD700;height:320px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
<form>
<select>
<!-- 下拉列表，其中selected是默认选择 -->
<option value="python">python</option>
<option value="c#">c#</option>
<option value="java" selected>java</option>
<option value="php">php</option>
</select>
<input type="button" value="hello!">
</form>
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
<h4 style="text-align:center;">登录</h4><br/>
<form>
<fieldset>
<!-- fieldset是表单的外边框，legend是表单的标题 -->
<legend>信息输入</legend>
ACCOUNT: <br/>
<input type="text" name="account"><br/>
PASSWORD:<br/>
<input type="password" name="pwd"><br/>
<input type="radio" name="sex" value="man">MAN<br/>
<input type="radio" name="sex" value="women">WOMEN<br/>
<input type="checkbox" name="vehicle" value="bike">BIKE<br/>
<input type="checkbox" name="vehicle" value="car"> CAR<br/>
<input type="submit">
<input type="reset">
</fieldset>
</form>
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
盗版必究</div>
</div>
<h2 style="text-align:center;">框架</h2>
<hr/>
<iframe src="" name="a_iframe"></iframe>
<p><a href="http://www.baidu.com" target="a_iframe" rel="noopener">百度</a></p>
<!-- 因为a的target是a_iframe，而a_iframe是iframe的name，所以a的链接会在iframe打开链接窗口 -->
<p id="test">这个会变哟！</p>
<script>
function myfunc()
{
document.getElementById("test").innerHTML="hello HTML!";
}
</script>
<noscript>抱歉，你的浏览器不支持javascript!</noscript>
<!-- script为脚本，而noscript是当script不能运行时出现的 -->
<button type="button" onclick="myfunc()">点我</button>
<p style="font-size:20px;text-align:center;"><a id="end">结尾语</a></p>
<a href="#begin">再看一遍！</a>
</body>
</html>