HTML,CSS基础内容回顾

最新推荐文章于 2024-11-01 15:19:31 发布

astzk

最新推荐文章于 2024-11-01 15:19:31 发布

阅读量52

点赞数 1

文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_60654299/article/details/131520869

版权

本文是对HTML和CSS基础知识的复习，包括HTML的超链接、列表、表格、图片和表单，以及CSS的选择器应用。作者发现自己在超链接的内部跳转和CSS选择器方面还需巩固。示例代码展示了各种标签和属性的用法。

摘要由CSDN通过智能技术生成

在今天的学习中，我们复习了html以及css的基础内容。这些内容是我大一所学习的，由于太久没有使用，所以有些记不清语法该如何使用，好在本轮复习中在陈勋老师的讲解下，基本上将其基础内容都过了一遍，再结合之前上课所打下的代码才回顾起之前学习的基础内容。在复习过程中，我发现我对于超链接中的跳转界面还不够熟练，总是把name和id打混，对于css选择器的基础知识还是不够扎实以至于我在刚接触是还以为是新的知识。在本轮回顾中我还需要巩固css选择器的先后顺序以及代码应用。以下为代码内容。

html回顾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3 id="top">顶部</h3>
    <h3>标题</h3>
    <p>
        p标签是一个段落标签，我们在此段落标签中描述一下标签的含义
        标题标签分h1-h6 <br>
        从h1-h6逐渐变小
    </p>
    <h1>标题</h1>
    <h2>标题</h2>
    <h3>标题</h3>
    <h4>标题</h4>
    <h5>标题</h5>
    <h6>标题</h6>
    <hr>
    <!--hr是水平线-->

    <h3>列表</h3>
    <p>
        列表标签是html中核心的标签，有三种：无序列表，有序列表，自定义列表
    </p>
    <h4>1.无序列表</h4>
    <ul>
        <li>曹操</li>
        <li>刘备</li>
        <li>孙权</li>
    </ul>
    <h4>2.有序列表</h4>
    <ol>
        <li>吕布</li>
        <li>关羽</li>
        <li>赵云</li>
    </ol>
    <h4>3.自定义列表</h4>
    <dl>
        <dt>常玩的游戏</dt>
        <dd>王者荣耀</dd>
        <dd>英雄联盟</dd>
        <dd>坦克世界</dd>
    </dl>
    <hr>


    <h3>表格</h3>
    <p>
        表格用于展示数据库中的数据，是非常核心的标签
    </p>
    <table border="1" cellspacing="0" cellpadding="20">
        <thead>
            <tr>
                <th>序号</th>
                <th>名称</th>
                <th>战力</th>
            </tr>
        </thead>
        <tbody>
            <tr bgcolor="purple">
                <td>1</td>
                <td>火箭炮</td>
                <td>100</td>
            </tr>
            <tr bgcolor="red">
                <td>2</td>
                <td>坦克</td>
                <td>80</td>
            </tr>
            <tr bgcolor="yellow">
                <td>3</td>
                <td>榴弹炮</td>
                <td>60</td>
            </tr>
        </tbody>
        <tfoot>
            <tr align="center" bgcolor="">
                <td colspan="3">武器型号展示</td>
            </tr>
        </tfoot>
    </table>
    <hr>


    <h3>超链接</h3>
    <p>
        超链接的作用：
        <ul>
        <li>1.跳转到某个网页</li>
        <li>2.在页面内部锚定跳转，例如：回到顶部或者底部</li>
        <li>target="_blank"表示新开一个页面</li>
        <li>href属性为空则会刷新当前页面</li>
        <li>href="#top"其中#表示在当前页面寻找：id值为top的标签</li>
    </ul>
    </p>
    <a href="http://www.bailiban.com" target="_blank">百里半</a><br>
    <!--br是空排-->
    <a href="#top">回到顶部</a>
    <hr>


    <h3>图片</h3>
    <p>
        图片标签是img,用来在网页中嵌入一个图片文件，需要了解：路径，宽高
    </p>
    <img src="../imgs/3.jpg" alt="这是xxx的图片" width="500" height="300">
    <!--../表示上一级文件夹-->
    <hr>


    <h3>表单</h3>
    <p>
        表单标签分父元素和子元素
        <ul>
            <li>父元素是form,子元素有很多，以input为核心</li>
            <li>可以实现登录，注册等功能</li>
            <li>用于向后台服务器提交数据</li>
            <li>单选和复选的默认选中关键字是checked</li>
            <li>下拉框的默认选中关键词是selected</li>
            <li>所有的表单项想要把参数提交到后台服务器，必须要有name和value值</li>
        </ul>
    </p>
    <form action="02.我是服务器.html" method="">
        <!--action是按钮点击后的地址，传输后网址栏出现填进去的数据-->
        姓名：<input type="text" name="username"><br>
        密码：<input type="password" name="password"><br>
        年龄：<input type="number" name="age"><br>
        生日：<input type="date" name="birth"><br>
        性别：<input type="radio" name="sex" value="男" checked>男
        <!--checked在radio和checkbox中是指默认选择-->
              <input type="radio" name="sex" value="女">女<br>
        爱好：<input type="checkbox" name="like">洗碗
              <input type="checkbox" name="like">洗衣服
              <input type="checkbox" name="like">做饭
              <input type="checkbox" name="like" checked>坐牢
              <input type="checkbox" name="like" checked>逛街<br>
        头像：<input type="file"><br>
        省份：
        <select name="province">
            <option>--请选择省份--</option>
            <option>--湖北--</option>
            <option>--河南--</option>
        </select>
        城市：
        <select name="province">
            <option>--请选择城市--</option>
            <option selected>--武汉--</option>
            <!--selecetd在option中是指默认选择-->
            <option>--洛阳--</option>
        </select><br>
        简介：<textarea></textarea><br>
        <button>按钮</button>
        <input type="submit">
        <input type="reset">
    </form>


    <br>
    <br>
    <br>
    <br>
    <br>

</body>
</html>

css回顾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        /*无明显优先级，后者覆盖前者*/
        /*子代*/
        p>span{
            color: blueviolet;
        }
        /*后代,包括子代以及子代的子代等*/
        div span{
            color: green;
        }
        p{
            color: royalblue;
        }
        .a{
            color: yellow;
        }
        /*交集是为了缩小选中范围*/
        p.a{
            color: red;
        }
        /*并集是为了扩大选中范围*/
        p,.a{
            color: black;
        }
        input{
            width: 200px;
            height: 30px;
            outline:none;
            border:2px solid gray;
            border-radius: 5px;/*圆角*/
            font-size:large;
        }
        /*属性选择器*/
        input[name="bb"]{
            color:rebeccapurple;
        }
        button{
            width: 100px;
            height: 30px;
            border: none;
            background-color: royalblue;
            border-radius: 200px;
            font-size: large;
            color: seashell;
            cursor: pointer;
        }
        /*鼠标放上去出现阴影*/
        button:hover{
            box-shadow: 10px 10px 10px rebeccapurple;
        }
        /*鼠标点击后动一动*/
        button:active{
            transform: translate(50px,-20px);
        }
    </style>
</head>
<body>
    <h3>css选择器</h3>
    <ul>
        <li>优先级：id选择器>class选择器>元素选择器</li>
        <li>后代 自带 交集 并集</li>
        <li>属性选择器</li>
        <li>伪类选择器</li>
    </ul>
    <div>
        <p>
            <span>文本</span>
        </p>
        <span>文本2</span>
        <p class="a">
            第2个p
        </p>
        <p>
            第3个p
        </p>
        <div class="a">
            这是个div
        </div>
        <hr>
        <h4>属性选择器</h4>
        <input type="text" name="aa" value="aa">
        <input type="text" name="bb" value="bb">
        <h4>伪元素选择器</h4>
        <button>按钮</button>
    </div>
</body>
</html>