所有内容参考自：www.imooc.com
在慕课网上学习了一些HTML的基本语法，由于慕课网需要一节一节查看，特总结成一个文档便于后续自己查阅。
<!DOCTYPE HTML>
<!--all from https://www.imooc.com/ -->
<!--HTML语法不区分大小写 H1和h1是一个意思（注：我就是个注释语法）-->
<!--html是根标签，意思是一个html文件只能有一个这个标签-->
<html>
<!--head 是头部元素的容器-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--set title-->
<title>Summary of HTML instroductory Grammar</title>
<style type="text/css">
h1{
font-size:32px;
color:#930;
text-align:center;
}
span{
font-size:32px;
color:blue;
}
table tr td,th{border:0.1px solid #111;}
</style>
</head>
<!--网页显示的内容需要些到body里面。 只有一个body？-->
<body>
<!--添加一个标题标签，效果：字体比较大&黑，分了6级标题，效果跟word标题等级相似（h1已经使用css定义显示样式） <h1-6>-->
<h1>标题等级效果1</h1>
<h2>标题等级效果2</h2>
<h3>标题等级效果3</h3>
<h4>标题等级效果4</h4>
<h5>标题等级效果5</h5>
<h6>标题等级效果6</h6>
<!--hr 增加分割线-->
<hr />
<h1>勇气</h1>
<!--增加段落，效果：每一个<p>都会新生产一个段落 <p>-->
<p> (段落标签) 三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p> 到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
<!--调用一个图片<img>-->
<img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" alt="no thing" title="图片引用" > <br />
<label>无图片提示</label> <br>
<img src="200.jpg" alt="no thing" title="鼠标显示提示" >
<hr />
<!--em strong span（效果在css里面）标签的强调字体效果及空格-->
<p><em>强调em标签效果：斜体</em> <br> { （空格效果） } <br><strong>strong效果:加黑</strong> <span>span标签效果</span> <br></p>
<hr />
<!--短文引用<q>,会增加一个双引号-->
<p><q>聪明秀出为之英，胆略过人为之雄。（短文引用效果）</q></p>
<hr />
<!--长文引用<blockquote>,会增加缩进-->
<p><blockquote>明月出天山，苍茫云海间。长风几万里，吹度玉门关。汉下白登道，胡窥青海湾。由来征战地，不见有人还。 戍客望边色，思归多苦颜。高楼当此夜，叹息未应闲。（长文引用效果）</blockquote></p>
<hr />
<!--换行<br>-->
<p>暗淡轻黄体性柔，(br标签换行效果)<br />
情疏迹远只香留。<br />
何须浅碧深红色，<br />
自是花中第一流。</p>
<hr />
<!--code可以执行一行代码，pre可以执行一段代码-->
<code>可执行代码<br /></code>
<pre>可执行代码1<br />
可执行代码2<br />
可执行代码3<br />
可执行代码4<br />
可执行代码5<br />
</pre>
<hr />
<!--div 逻辑容器-->
<div id=ullable>
<!--<ul><li> / <ol><li>标签效果 -->
<ul>
<label>无排序列表</label>
<li>我的第1个列表信息</li>
<li>我的第2个列表信息</li>
<li>我的第3个列表信息</li>
<li>我的第4个列表信息</li>
<li>我的第5个列表信息</li>
<li>我的第6个列表信息</li>
</ul>
</div>
<div id=ollable>
<ol>
<label>排序列表</label>
<li>我的第1个列表信息</li>
<li>我的第2个列表信息</li>
<li>我的第3个列表信息</li>
<li>我的第4个列表信息</li>
<li>我的第5个列表信息</li>
<li>我的第6个列表信息</li>
</ol>
</div>
<hr />
<!--table标签效果 -->
<label>表格显示</label><br />
<table summary="不显示的摘要">
<caption>成绩（标题）</caption>
<tbody>
<tr>
<th>班级</th>
<th>学生数</th>
<th>平均成绩</th>
</tr>
<tr>
<td>一班</td>
<td>30</td>
<td>89</td>
</tr>
<tr>
<td>二班</td>
<td>35</td>
<td>85</td>
</tr>
<tr>
<td>三班</td>
<td>32</td>
<td>80</td>
</tr>
</tbody>
</table>
<hr />
<label>链接的两种方式</label> <br />
<a href="http://www.imooc.com" title="点击进入慕课网">慕课网(不跳转新网页)!</a> <br />
<a href="http://www.imooc.com" target="_blank" title="点击进入慕课网">慕课网(跳转到新页面)!</a>
<hr />
<form method="post" action="save.php">
<label>提交表格</label><br />
<label for="username">用户名:</label>
<input type="text" name="username" id="username" value="" />
<label for="pass">密码:</label>
<input type="password" name="pass" id="pass" value="" />
<input type="submit" value="确定" name="submit" />
<input type="reset" value="重置" name="reset" /> <br />
<hr />
<label>多行输入框与提交按钮</label><br />
<label>个人简介：</label><br />
<textarea cols="50" rows="10">在这里输入内容...</textarea>
<input type="submit" value="确定" name="submit" />
<input type="reset" value="重置" name="reset" /><br />
<hr />
<label>单选框</label><br />
<label>性别:</label>
<label>男</label>
<input type="radio" value="1" name="gender" />
<label>女</label>
<input type="radio" value="2" name="gender" /><br />
<hr />
<label>多选框</label><br />
你是否喜欢旅游？<br />
<input type="checkbox" value="跑步" name="checkbox1" />跑步
<input type="checkbox" value="打球" name="checkbox2" />打球
<input type="checkbox" value="登山" name="checkbox3" />登山
<input type="checkbox" value="健身" name="checkbox4" />健身
<input type="checkbox" value="吃饭" name="checkbox5" />吃饭<br />
<hr />
<label>爱好(单选框):</label><br />
<select selected="selected">
<option value="看书">看书</option>
<option value="旅游">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option><br />
<hr />
</select>
<label>爱好（多选框）:</label><br />
<select multiple="multiple">
<option value="看书">看书</option>
<option value="旅游">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option><br />
<hr />
</select>
</form>
<hr />
<!--address 效果 href新增加一个邮件地址链接-->
<label>地址与邮箱</label>
<p>地址：<address>银河系地球村</address></p>
<address>本文的作者：<a href="mailto:763761198@qq.com? cc=763761198@qq.com" subject=主题名称&body=邮件内容">傻哈哈</a></address>
</body>
</html>如果有需要你可以自己把代码贴到一个txt文件，然后把txt的后缀改成html
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
