HTML学习笔记day2

最新推荐文章于 2024-07-21 12:22:43 发布

alicelmx

最新推荐文章于 2024-07-21 12:22:43 发布

阅读量270

点赞数

分类专栏：前端学习文章标签： html

本文链接：https://blog.csdn.net/alicelmx/article/details/78680104

版权

前端学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

HTML块

HTML块元素

块元素在显示时，通常会以新行开始

<h1> <p> <ul>

HTML内联元素

通常不会以新行开始

<a> <b> <img>

HTMLdiv元素

也被称为块元素，其主要是组合HTML元素的容器
本身没有任何含义，可以设置样式属性、进行文档布局

HTMLspan元素

是内联元素，可以做文本的容器

HTML布局

使用div元素布局

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div布局</title>
    <style type="text/css">
        body{
            margin: 0px;
        }
        div#container{
            width: 100%;
            height: 950px;
            background-color: gray;
        }
        div#heading{
            width: 100%;
            height: 10%;
            background-color: aquamarine;
        }
        div#content_menu{
            width: 30%;
            height: 80%;
            background-color: azure;
            float: left;
        }
        div#content_body{
            width: 70%;
            height: 80%;
            background-color: transparent;
            float: left;
        }
        div#bottom{
            width: 100%;
            height: 10%;
            background-color: cadetblue;
            clear: both;
        }
    </style>
</head>
<body>
   <div id="container">
       <div id="heading">头部</div>
       <div id="content_menu">内容菜单</div>
       <div id="content_body">内容主体</div>
       <div id="bottom">底部</div>
   </div>
</body>
</html>

浮动

浮动：float：left；right；none
浮动的模块是没有高度，不占用位置的
关于浮动的清除有以下几种：clear （clear:both;）

使用table元素

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table布局</title>
</head>
<body marginheight="0px" marginwidth="0px">
   <table width="100%" height="950px" style="background-color: gray">
        <tr>
            <td colspan="2" width="100%" height="10%" style="background-color: cadetblue">这是头部</td>
        </tr>
        <tr>
            <td width="30%" height="80%" style="background-color: aquamarine">
                <ul>
                    <li>ios</li>
                    <li>android</li>
                    <li>html</li>
                </ul>
            </td>
            <td width="70%" height="80%" style="background-color: aliceblue"></td>
        </tr>
        <tr>
            <td width="100%" height="10" colspan="2" style="background-color: brown">这是底部</td>
        </tr>
   </table>
</body>
</html>

HTML表单

HTML 表单用于搜集不同类型的用户输入。
常用表单

复选框

 <form>
    你喜欢的水果有？
    <br/>
    苹果<input type="checkbox">   
    橘子<input type="checkbox">
    柠檬<input type="checkbox">
</form>

单选按钮

<form>
    请选择你的性别：
    <!-- name指定二者为一组 -->
    男<input type="radio" name="sex">
    女<input type="radio" name="sex">
</form>

文本域

<textarea cols="30" rows="30">请在此填写个人信息</textarea>

创建按钮

<form>
    <input type="button" value="按钮">
    <input type="submit" value="提交">
</form>

下拉列表

<form>
    <select>
        <option>www.baidu.com</option>
        <option>www.sina.com</option>
        <option>www.bilibili.com</option>
    </select>
</form>