web前端笔记，表格，五彩导航练习

最新推荐文章于 2024-08-23 21:32:35 发布

zyt8258

最新推荐文章于 2024-08-23 21:32:35 发布

阅读量293

点赞数 5

文章标签：笔记

本文链接：https://blog.csdn.net/2202_75327256/article/details/136954004

版权

本文详细介绍了HTML的基本结构，包括标签使用规则，如h1-h6标题、p段落、br换行、hr水平线等。重点讲解了表单元素如input、textarea、select等的用法，以及CSS样式应用，如颜色、布局和导航链接的hover效果。最后展示了用户注册表单和五彩导航的设计实例。

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

笔记：

骨架：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
   

</body>

</html>

需要有包裹的内容，用双标签，不需要包裹内容就可以完成的操作用单标签
标签之间的关系只有父子关系和兄弟关系
标题标签只有h1-h6，且大小依次递减，独占一行
在段落标签“<p> </p>”里进行换行，只会在浏览器里面多一个空格，段落与段落之间默认存在空隙。
换行<br>,水平线<hr>
<a></a>点击跳转
音乐：audio，视频：video
<input>：输入（表单输入）元素
注释文字，解释说明，不影响程序
<label> 元素（标签）表示用户界面中某个元素的说明
<marquee> 元素用来插入一段滚动的文字
<select> 元素表示一个提供选项菜单的控件
<option> 用于定义在 <select>, <optgroup> 或 <datalist> 元素中包含的项
placeholder 表示 <input> 或 <textarea> 元素中的占位文本
<li> 元素（或称 HTML 列表条目元素）用于表示列表里的条目
<textarea> 元素表示一个多行纯文本编辑控件
<button> 元素表示一个可点击的按钮，可以用在表单或文档其他需要使用简单标准按钮的地方
<caption> 元素展示一个表格的标题
<tr>：表格行元素
<table>：表格元素
<title> 元素定义文档的标题，显示在浏览器的标题栏或标签页上。
<style>：样式信息元素
<ul>：无序列表元素
background-color 会设置元素的背景色，color 属性设置元素的文本以及文本装饰的颜色值
font-size 设置字体大小
font-weight 指定了字体的粗细程度
text-align 设置块元素或者单元格框的行内内容的水平对齐
ont-style 允许选择 font-family 字体下的 italic 或 oblique 样式
font-family 允许通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体
line-height 用于设置多行元素的空间量，如多行文本的间距

表格：

<!DOCTYPE html>

<head>



    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>Document</title>

</head>



<body>

    <h1>用户注册</h1>

    <from action="">

    用户名：<input type="text" name="usename">

    <br />

    密码：<input type="password" name="password" required>

    <br />

    性别：<label><input type="radio" name="sex" value="nan">男</label>

    <label><input type="radio" name="sex"  value="nv">女</label>

    <br />

     爱好：<label><input type="checkbox" name="hobby">写作</label>

        <label><input type="checkbox" name="hobby">听音乐</label>

        <label><input type="checkbox" name="hobby">体育</label>

     <br />

     省份:<select name="city" >

        <option value="shanxi"selected>陕西</option>

        <option value="guangzhou">广州</option>

        <option value="shanghai">上海</option>

        <option value="chongqing">重庆</option>

     </select>

     <br />

    自我介绍:<textarea name="liuyan" cols="10" rows="10" maxlength="10" placeholder=""></textarea>

    <br />



    <button>提交</button>

     <button>重置</button>

五彩导航：

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>



<style>

    .wucai a{

        display:inline-block;

        width: 120px;

        height: 60px;

        background-color: aqua;

        text-align: center;

        color: rgb(255, 132, 0);

        line-height: 50px;

        text-decoration: none;

    }

    .wucai .wucai1{

        background-color: rgb(156, 156, 22);
    }

    .wucai .wucai1:hover{

        background-color: rgb(169, 206, 100)
    }

    .wucai .wucai2{

        background-color: rgb(225, 176, 233);
    }
    .wucai .wucai2:hover{

        background-color: rgb(163, 231, 25);
    }
    .wucai .wucai3{
        background-color: rgb(17, 200, 228);
    }
    .wucai .wucai3:hover{

        background-color: rgb(188, 13, 13);

    }

        .wucai .wucai4{

        background-color: rgb(75, 67, 227);



    }

    .wucai .wucai4:hover{

        background-color: blanchedalmond;

    }



</style>


</head>



<body>


    <div class="wucai">

      <a href="#" class="wucai1">五彩导航</a>

      <a href="#" class="wucai2">五彩导航</a>

      <a href="#" class="wucai3">五彩导航</a>

      <a href="#" class="wucai4">五彩导航</a》


    </div>



</body>



</html>