5、HTML5列表、块和布局

2022-01-26 02:40:27

1.块元素

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

　　如：<h1> <p> <ul>

<!-- 块—>注释

　　　　<p>hello</p>

　　　　<h1>world</h1>

　　出来的结果是:

　　hello

　　空一行

　　world

　　hello 和world 之间有新的一行

2.HTML内联元素

　　内联元素通常不会以新行开始如<b> <a> <img>　

<b>这是一个加重标签</b>
<a>哈哈</a>

　　结果是　　这是一个加重标签哈哈

　　没有再起一行

3. HTML <div>元素

　　<div>元素也被称为块元素，其主要是组合HTML元素的容器

4.HTML<span>元素

　　<span>元素是内联元素，可作为文本的容器.

　　例子：

　　代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 块-->
    <title>块元素</title>
    <style type = text/css>
        span{
            color: aqua;
        }
    </style>
</head>
<body>
    <p>大家好!</p>
    <h1>的第三款了你的扣篮考虑到那看的扣篮了卡单身快乐你登陆看两三款单你卡上</h1>
    <b>这是一个加重标签</b>
    <a>哈哈</a>
    <div>
        <p>
            极客学院
        </p>
    </div>
    <div>
        <p>
           <span>
            这是一个测试结果
           </span>
            span 是一个什么样子
        </p>
    </div>
</body>
</html>

5.DIV元素布局和 table元素布局

DIV布局：

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

    </div>
</body>
</html>

其中：
在html中常用于布局、定位、区分。DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。
个人感觉像OC里面的View。
在上面 container 为最外层的View 相当于OC一个ViewController的View，id = "container" 个人CO理解的是 这块View 的name 叫 container，

<div id="heading">头部</div> 理解的是 一块叫heading的view 里面 加了一个label ， label的内容显示的是 头部，

  #footing{
            width: 100%;
            height: 10%;
            background-color: black;
            clear: both;
        }

这块代码的OC理解就是拿到footing的地址，对这块View做布局和颜色等等的操作。
# 就相当于 OC 里面的 *

footing 就相当于下面的 view（地址名字）

UIView *view = [UIView new];
CGRect frame = controller.view.bounds;

frame.size.width = controller.view.frame.size.width

frame.size.height = controller.view.frame.size.height * 0.1
view.backGroundColor = [UIColor blackColor];

得在body 使用DIV标签（标签里面声明 view），在head 里面设置 DIV标签的一些属性.
浏览器的结果是： 去掉 黑色上面 那一栏 就把2个图片综合一下

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: lightgray">
    <tr>
        <td colspan="3" width="100%" height="10%" style="background-color: aqua">这是头部</td>
    </tr>
        <tr>
            <td width="30%" height="80%"style="background-color: blue">
                <ul>
                    <li>iOS</li>
                    <li>HTML5</li>
                    <li>swift</li>
                </ul>

            </td>
            <td width="60%" height="80%" style="background-color: blueviolet">主题内容</td>
            <td width="20%" height="80%" style="background-color: deeppink">右菜单</td>
        </tr>
        <tr>
            <td width="100%" height="10%" colspan="3" style="background-color: darkcyan">这是底部</td>
        </tr>
    </table>

</body>
</html>

<body>里面给一个table

<table width="100%" height = "950px" style="background-color: lightgray"> 设置tale 的 宽和高 PX就像素

100%就是全屏的宽度 * 1

<tr>是表格的一行,放在table或者body标签里面的

<td> 标签定义 HTML 表格中的标准单元格。td 元素中的文本一般显示为正常字体且左对齐。

HTML 表格有两类单元格：

表头单元 - 包含头部信息（由 th 元素创建）
标准单元 - 包含数据（由 td 元素创建）

码农公寓

相关文章