前端学习第二次

最新推荐文章于 2024-07-25 22:24:14 发布

早日暴富！

最新推荐文章于 2024-07-25 22:24:14 发布

阅读量154

点赞数

文章标签：学习

本文链接：https://blog.csdn.net/Li20221120/article/details/130782407

版权

本文介绍了HTML中的列表标签如无序列表和自定义列表，以及表单元素如select下拉表单和textarea文本域。还探讨了label标签的作用，以及CSS的基础知识，包括颜色、尺寸设置和类选择器的应用。

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

五.各种标签

5.列表标签

列表，是用来布局的。

例如：无序列表

<!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>
</head>
<body>
    <h4>您最喜欢的食物？</h4>
    <ul>
        <li>芒果</li>
        <li>西瓜</li>
        <li>荔枝</li>
    </ul> 
</body>
</html>

自定义列表，dd是对dt的解释。

6.表单标签

在HTML中，一个完整的表单通常由表单域、表单控件和提示信息三个部分构成。

表单域：<form>会把范围内的表单元素信息提交给服务器

表单元素：

select下拉表单元素

<!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>
</head>
<body>
    籍贯
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
    </select>
   
</body>
</html>

在<option>中定义selected="selected"，默认选中当前选项

textarea文本域元素：用户输入内容较多时使用


<!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>
</head>
<body>
   <form>
    今日反馈：
    <textarea>
        今天想吃芒果！
    </textarea>
   </form>
   
</body>
</html>

7.label标签

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>css</title>
    <style>
    p{
        color:blue;
    }
    </style>
</head>
<body>
   <p>今天想吃芒果</p>
</body>
</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>css</title>
    <style>
        .red {
            width: 100px;
            height: 100px;
            background-color:red;
        }
        .green {
            width: 100px;
            height: 100px;
            background-color:green;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="red"></div>
</body>
</html>

早日暴富！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习第二次

是一种标记语言，主要用于设置HTML页面中的文本内容、图片外形以及版面布局和外观显示样式。在<option>中定义selected="selected"，默认选中当前选项。在HTML中，一个完整的表单通常由表单域、表单控件和提示信息三个部分构成。表单域：<form>会把范围内的表单元素信息提交给服务器。textarea文本域元素：用户输入内容较多时使用。空格规范：属性值前面，冒号后面，保留一个空格。自定义列表，dd是对dt的解释。select下拉表单元素。列表，是用来布局的。
复制链接

扫一扫