所有内容参考自: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:[email protected]? [email protected]" subject=主题名称&body=邮件内容">傻哈哈</a></address>
</body>
</html>
如果有需要你可以自己把代码贴到一个txt文件,然后把txt的后缀改成html