学习HTML中的常用标签及属性的第八节课

原创 2018-11-07 23:38:31 229
摘要:学习了8小节课,感觉需要时长回顾,多多练习,要不然就忘了~1、要对标签内部的内容进行样式编辑,可以在style标签下进行,字体大小用font-size,颜色用color;间隔用margin;边框用border;2、超链接可以用<a>标签来写,href后加目标地址;超链接样式可以用text-decoration来写:none/underline;移上去变色用伪标签hover;3、<

学习了8小节课,感觉需要时长回顾,多多练习,要不然就忘了~

1、要对标签内部的内容进行样式编辑,可以在style标签下进行,字体大小用font-size,颜色用color;间隔用margin;边框用border;

2、超链接可以用<a>标签来写,href后加目标地址;超链接样式可以用text-decoration来写:none/underline;移上去变色用伪标签hover;

3、<form>标签可以用来写页面上的登录框部分,input/button,placeholder可以设置登录框内部的备注

小米官方商城

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

<title>学习HTML中的常用标签及属性</title>

<link rel="shortcut icon" type="image/x-icon" href="image/1.jpg">

<link rel="stylesheet" type="css" href="css/index.css">

<style type="text/css">

    ul li{list-style: none;font-size: 35px}

ul li:before{content: url(image/3.png);margin-right: 30px}

a{text-decoration: none;color: #000;}

a:hover{color: red}

form  input{height: 48px;width: 298px;border: 1px solid #ccc;margin-top: 5px}

form  button{height: 50px;width: 300px;background: orange;color: #fff;font-size: 15px;border: none;margin-top: 5px;}

</style>


</head>

    <i>小米官方商城</i>

    <p>小米官方商城</p><br>

<body>

    <img src="image/3.png">

    <ul>

    <li>小米官方商城</li>

      <ul>

      <li>让每个人都能享受科技的乐趣</li>

      </ul>

    </ul>

   <a href="http://www.mi.com"><img src="image/3.png"></a>

   <a href="http://www.mi.com">小米官方商城</a>

   <form>

       <input type="text" name="username" placeholder=":请输入用户名"><br>

       <input type="password" name="password" placeholder="请输入密码"><br>

      <button>登录</button><br>

   </form>

</body>

  

</html>


批改老师:灭绝师太批改时间:2018-11-08 09:00:09
老师总结:可以将所学到的属性及标签都测试体会一下,有利于记忆,标签用熟悉了也可以熟能生巧

发布手记

热门词条