![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
html虽然学过，而且自己几乎可以熟练布局整个网站，但是这次学习更加深刻的学习了一些内容，比如表单，以前只会按照别人的代码去写，这次几乎明白了所有原理。
css样式以前学过，但是这次还是很清晰的认识到，js的权重是最高的 然后是行内样式style=“”，然后是id选择器#class=“”然后是类选择器.id="" 然后才是标签选择器h1{}、body{}；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>2018年1月14日作业</title>
</head>
<style>
body{padding:0; margin:0; height: 2000px; }
u l,o l{list-style-type: none;}
.zuoye{width:1902px;background-color: rgb(6, 100, 69); color:#ffff;t ext-align:center; padding:0;margin:0;}
</style>
<body>
<!--1、html中常用的标签 -->
<div class="zuoye">
<h1 >开始我的作业吧，这是一个h1标签的文字</h1>
<h2 >这是一个h2标签的文字</h2>
<p>前端有一些基础的我来说这些还算简单，但是我怕后面跟不上，对，这是一个P标签</p>
<h1><strong>下面我们写一个加粗的文本</strong></h1>
<p><em>再写一个啥，斜体的吧</em></p>
<hr>
<!--无序列表-->
<ul>
<li>这是无序列表，我也不改变文字了</li>
<li>这是无序列表，我也不改变文字了</li>
<li>这是无序列表，我也不改变文字了</li>
<li>这是无序列表，我也不改变文字了</li>
<li>这是无序列表，我也不改变文字了</li>
</ul>
<!--有序列表-->
<ol>
<li>这是有序列表，</li>
<li>这是有序列表，</li>
<li>这是有序列表，</li>
<li>这是有序列表，</li>
<li>这是有序列表，</li>
</ol>
<!--定义列表-->
<dl>
<dt>定义列表</dt>
<dd>现在看见的就是所谓的定义列表</dd>
</dl>
<hr>
<!--表格-->
<table border="1" cellpadding="5" cellspacing="0" width='500' height='150'>
<caption >简单做一个表格吧</caption>
<thead bgcolor="#aaa">
<tr align="center">
<td>序号</td>
<td>名称</td>
<td>价格</td>
</tr>
</thead>
<tbody>
<tr align="center">
<td>1</td>
<td>白菜</td>
<td>3.5元</td>
</tr >
<tr align="center">
<td>2</td>
<td>罗布</td>
<td>1.2元</td>
</tr>
<tr align="center">
<td>3</td>
<td>眨巴</td>
<td>1万元</td>
</tr>
</tbody>
</table>
<hr>
<!--表单-->
<form acction='' method="GET">
<div>
<label for="username">用户名</label>
<input type="text" id="username" name="username" value="" placeholder="想写什么就些什么吧">
</div>
<div>
<label>
密码:<input type="password" name="password" value="" placeholder="至少输入一百个字符的密码" size="45">
</label>
</div>
<div>
<label>
确认密码:<input type="password" name="password" value="" placeholder="至少输入一百个字符的密码" size="40">
</label>
</div>
<div>
性别：
<input type="radio" name="gander" id="male" value="male" checked><label for="male">女</label>
<input type="radio" name="gander" id="fomale" value="fomale"><label for="fomale">男</label>
</div>
<div>
<label >爱好：</label>
<input type="checkbox" name="hobby[]" value="game" id="game" checked><label for="game">打球</label>
<input type="checkbox" name="hobby[]" value="smoke"id="smoke" ><label for="smoke">抽烟</label>
<input type="checkbox" name="hobby[]" value="hejiu"id="hejiu" checked ><label for="hejiu">喝酒</label>
<input type="checkbox" name="hobby[]" value="head"id="head" ><label for="head">烫头</label>
</div>
<div>
<label for="home">您的家乡是：</label>
<select id="home" value="" name="" >
<option value="1">拉萨</option>
<option value="2" selected>山南</option>
<option value="3">昌都</option>
<option value="4">那曲</option>
<option value="5">阿里</option>
</select>
</div>
<label for="common">有啥想告诉我的吗？</label>
<br>
<textarea id="common" value="" cols="100" rows="15" placeholder="写下你要写的的那个东西，但是不要超过500000字，不然我们念不完"></textarea>
<div>
<input type="submit" value="提交">
<input type="reset" value="重置">
<button type="button" >注册 </button>
</div>
<hr>
<div>
<img src="images/zly.jpg" alt="这是一个美女的图片">
<video src="images/demo.mp4" controls="controls" width="500" ></video>
</div>
<hr>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css优先级</title>
<style>
h2{background-color: darkslategrey;}
.biaoqian {background-color: darkblue;}
#jinghao{background-color: darkmagenta;}
</style>
</head>
<body>
<!--css的常用选择器与优先级-->
<h1 style="background-color: cadetblue; color: crimson;" >我们练习一下css的行内修饰</h1>
<h2 class="biaoqian" id="jinghao" sty le="background-color:indianred;" >练习几个选择器的优先级吧
id选择权大于类选择器
类选择权>标签选择器
内联样式（行内）>id选择器</h2>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：
难点在于，<input>表单里加的 name=“”value=“” id=“”等因为太多，还是搞不清楚为什么要加，因为自己实验以后不加也程序可以正常弄。希望老师能解答。
