html+css初学总结整理及应用

最新推荐文章于 2024-10-04 06:11:34 发布

是陌狗狗啊

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量114

点赞数

分类专栏： web学习文章标签： html css

本文链接：https://blog.csdn.net/weixin_44593531/article/details/108472171

版权

web学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html常用标签及元素性质

基本标签
<h1>-<h6>标题：必不可少的物件，数字从小到大分别对应着字体从大到小，也就是h1是最大的，理解为n级标题，一级标题大小大于二级标题等等。标题的字体大小基本上是已经决定好的，一般我们不需要修改标题的字号。
<p>定义段落，一般用于书写正文，一般将该标签内置于块级元素中以方便布局。
<br>换行符，话不多说。
<hr>定义一条贯穿页面的水平线
<form>表单标签，一边用于用户的输入并提交到后端对数据进行操作，例如登录注册功能等。主要类型包括：
<input>定义输入控件。
<textarea>文本框输入组件。
<button> 定义按钮。
<select> 定义选择列表（下拉列表）。
<optgroup> 定义选择列表中相关选项的组合。
<option> 定义选择列表中的选项。
<label> 定义 input 元素的标注。
<fieldset> 定义围绕表单中元素的边框。
<legend> 定义 fieldset 元素的标题。
<isindex> 不赞成使用。定义与文档相关的可搜索索引。
<datalist> 定义下拉列表。
<keygen> 定义生成密钥。
<output> 定义输出的一些类型。
链接标签<a>标签主要是用来链接的标签，通过他的href属性实现外链某一个属性<link>则主要是用来定义文档和外部资源的关系。
样式元素：
<style> 定义文档的样式信息。
<div> 定义文档中的节。
<span> 定义文档中的节。
<header> 定义 section 或 page 的页眉。
<footer> 定义 section 或 page 的页脚。
<section> 定义 section。
<article> 定义文章。
<aside> 定义页面内容之外的内容。
<details> 定义元素的细节。
<dialog> 定义对话框或窗口。
<summary> 为元素定义可见的标题。
其实在这里，这几种元素和div几乎完全一样，只不过更加精细化，各自有各自的表示的东西，方便爬虫，所以在html5中一般使用这种方式。
表格标签：
标签描述
<table> 定义表格
<caption> 定义表格标题。
<th> 定义表格中的表头单元格。
<tr> 定义表格中的行。
<td> 定义表格中的单元。
<thead> 定义表格中的表头内容。
<tbody> 定义表格中的主体内容。
<tfoot> 定义表格中的表注内容（脚注）。
<col> 定义表格中一个或多个列的属性值。
<colgroup> 定义表格中供格式化的列组。
列表标签
<ul> 定义无序列表。
<ol> 定义有序列表。
<li> 定义列表的项目。
<dir> 不赞成使用。定义目录列表。
<dl> 定义定义列表。
<dt> 定义定义列表中的项目。
<dd> 定义定义列表中项目的描述。
<menu> 定义命令的菜单/列表。
<menuitem> 定义用户可以从弹出菜单调用的命令/菜单项目。
<command> 定义命令按钮。

html+css实战导航栏项目

项目需求：建立一个包含两级标题的导航栏，即鼠标放在第一级标题时，会产生下拉的二级标题。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .top{
            width: auto;
            text-align: center;
        }

        .top ul{
            list-style-type: none;
        }

        .top ul li{
            float:left;
            
        }

        .top ul li ul{
            position: relative;
            display: none;
        }

        .top ul li:hover ul{
            display: block;
        }

        .top ul li ul li{
            float:none;
        }
    </style>
</head>
<body>
    <header class="top">
        <ul>
            <li>
                <a link="#">一级菜单</a>
                <ul>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                </ul>
            </li>
            <li>
                <a link="#">一级菜单</a>
                <ul>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                </ul>
            </li><li>
                <a link="#">一级菜单</a>
                <ul>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                </ul>
            </li><li>
                <a link="#">一级菜单</a>
                <ul>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                </ul>
            </li>
            <li>
                <a link="#">一级菜单</a>
                <ul>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                </ul>
            </li>
        </ul>
    </header>
</body>
</html>