博客列表 >html标签练习和css样式优先级练习-2019年1月16日补1月14日作业

html标签练习和css样式优先级练习-2019年1月16日补1月14日作业

藏族设计师博客
藏族设计师博客原创
2019年01月17日 17:07:50687浏览

 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=“”等因为太多,还是搞不清楚为什么要加,因为自己实验以后不加也程序可以正常弄。希望老师能解答。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议