HTML标签及属性的学习总结

原创 2018-11-12 19:41:59 237
摘要:通过HTML标签及其属性的学习,让我对HTML有了更好的认识,HTML首先学的是对文章字体的修饰,例如:对字体的加粗text-weight属性,段落标签<p></p>,以及首行缩进text-indent属性标题标签h1-h6等等;接下来超链接<a href="URL"></a>,伪类hover(text-decoration)的使

通过HTML标签及其属性的学习,让我对HTML有了更好的认识,HTML首先学的是对文章字体的修饰,例如:对字体的加粗text-weight属性,段落标签<p></p>,以及首行缩进text-indent属性标题标签h1-h6等等;接下来超链接<a href="URL"></a>,伪类hover(text-decoration)的使用;列表的基本结构,from表单的固定书写方式,表格table;

案例:登录框的不同写法

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>table</title>
<link rel="shortcut icon" type="image/x-icon" href="../picture/mi.png">
<!-- 在网页左上角加入图标 -->
<link rel="stylesheet" type="text/css" href="../css/css.css">
<style type="text/css">
table {border-collapse:collapse;background:white;}
/*相当于一个div登录器的总布局*/
tr td{height:60px;width:200px;text-align:center;}
tr td input{height:40px;width:300px;padding:10px 50px;border:0px;}
tr td button{height:60px;width:400px;font-size:40px;color:white;background:orange;border:none;}
</style>

</head>
<body>
<table>
<tr>
<td style="font-weight:bold; font-size:20px; color:orange;">账号登录</td>
<td style="font-weight:bold; font-size:20px; color:#ccc;">扫码登录</td>
</tr>
<tr>
<td colspan="2"><input type="text" name="username" placeholder="请输入用户名"></td>
</tr>
<tr>
<td colspan="2"><input type="password" name="pwd" placeholder="请输入密码"></td>
</tr>
<tr>
<td colspan="2"><button>登录</button></td>
</tr>
</table>

</body>
</html>


批改老师:韦小宝批改时间:2018-11-13 09:11:56
老师总结:总的来说很不错!下次的代码记得加上高亮显示哦!课后记得多多练习哈!继续加油吧!

发布手记

热门词条