HTML5学习第四天

一、HTML列表

HTML列表，有无序表，有序表以及自定义表，列表于列表之间可以实现嵌套

列表相关操作

   <ul>

        <li>（多选）谁世界第二可爱？</li>

        <ol type="A">

            <li>荔枝</li>

            <li>荔枝</li>

            <li>荔枝</li>

            <li>荔枝</li>

            <li>荔枝</li>

        </ol>

        <li>（多选）谁世界第一可爱？</li>

        <ol type="A">

            <li>不是荔枝</li>

            <li>就不是荔枝</li>

            <li>还是不是荔枝</li>

            <li>怎么都不是荔枝</li>

            <li>别看了，和上面一样</li>

        </ol>

    </ul>
二、HTML5块标签的使用

HTML块元素在显示时，通常会换行，HTML内联元素通常不会新行开始

HTML<div>元素主要作为HTML其他元素组合的容器，便于CSS文件对其进行样式表定义，一般会带有ID

HTML<span>元素也是一种内联元素，可以作为文本的容器，小说网站里的文字基本以<span>作为标签

HTML块

    <!-- 块 -->

    <p>荔枝</p>

    <h1>标题荔枝</h1>

    <b>加化荔枝</b>

    <a href="index01.html">转跳荔枝</a>

    <div id="divID">

        <!-- div元素一般u用于搭配css样式搭配-->

        <p>div荔枝</p>

        <h1>DIV里的标题荔枝</h1>

    </div>

    <div id="divspan">

        <p><span>这是一个span荔枝测试</span>这个荔枝长什么样</p>

    </div>
三、HTML5布局的使用

布局方式有<div>元素布局和<table>元素布局两种方式

<div>比较常用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>div布局</title>

    <link rel="stylesheet" type="text/css" href="MyCSSstyle.css">

</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>

CSS文件：

body{

    margin: 0px;

}

#container{

    width: 100%;

    height: 1080px;

}

#container{

    background-image: url("img/16.jpg");

}

#heading{

    width: 100%;

    height: 10%;

    background-color: #ffffffbf;

}

#content_menu{

    width: 30%;

    height: 80%;

    background-color: #ffffffbf;

    float: left;

}

#content_body{

    width: 70%;

    height: 80%;

    background-color: #ffffffbf;

    float: left;

}

#footing{

    width: 100%;

    height: 10%;

    background-color: #ffffffbf;

    clear: both;

}

div实现布局

table布局

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>table布局</title>

</head>

<body marginheight="0px" marginwidth="0px">

    <table cellspacing="15px" width="100%" height="1080px" style="background-image: url(img/16.jpg)">

        <tr>

            <td colspan="3" width="100%" height="10%" style="background: #ffffffbf" align="center">我不管</td>

        </tr>

        <tr>

            <td width="25%" height="80%" style="background: #ffffffbf" align="center"><ul>荔枝世界第二可爱</ul></td>

            <td width="50%" height="80%" style="background: #ffffffbf" align="center" style="font-size: xx-large;"><ul>祖张依世界第一可爱</ul></td>

            <td width="25%" height="80%" style="background: #ffffffbf" align="center"><ul>荔枝世界第二可爱</ul></td>

        </tr>

        <tr>

            <td colspan="3" width="100%" height="10%" align="center" style="background: #ffffffbf">嘿嘿嘿</td>

        </tr>

    </table>

</body>

</html>

table实现布局

HTML5学习第四天的更多相关文章

  1. HTML5学习笔记<四>: 列表, 块和布局

    HTML列表 列表标签 标签 描述 <ol> 定义有序列表. <ul> 定义无序列表. <li> 定义列表项. <dl> 定义定义列表. <dt& ...

  2. Html5学习进阶四 表单元素和表单属性

    HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性. 本章介绍以下新的表单元素: datalist keygen output 浏览器支持 Input type IE Firefo ...

  3. HTML5学习笔记四 HTML文本格式化

    HTML 格式化标签 HTML 使用标签<b> 与<i> 对输出的文本进行格式, 如:粗体 or 斜体 这些HTML标签被称为格式化标签 通常标签 <strong> ...

  4. HTML5学习笔记四：html5结构

    一.大纲:大纲即文档中各内容区块的结构编排 1. 显示编排内容区块:使用section等元素创建文档结构,每个内容区块使用标题(h1~h6,hgroup); 2. 隐式编排内容区块:根据页面所书写的各 ...

  5. Html5 学习系列（四）文件操作API

    原文:Html5 学习系列(四)文件操作API 引言 在之前我们操作本地文件都是使用flash.silverlight或者第三方的activeX插件等技术,由于使用了这些技术后就很难进行跨平台.或者跨 ...

  6. HTML5学习笔记（四）：H5中表单新增元素及改良

    方便布局 表单内容可以放在表单标签之外,这样做的好处是方便设计时不用考虑一定要将表单元素放在指定的form标签之下,只要指定元素适用于哪个表单即可,如下: <form id="test ...

  7. HTML5 学习总结（一）——HTML5概要与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...

  8. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  9. HTML5 学习笔记（一）——HTML5概要与新增标签

    目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

随机推荐

  1. C/C++ scanf和gets 区别 , printf和puts区别

    ref 1. scanf和gets区别 | 博客园 2. printf和puts区别 | CSDN scanf和gets都能从输入流stdin读取字符串,那么它们有什么区别呢? scanf 留回车:开 ...

  2. log4j2 异步多线程打印日志

    log4j2 异步多线程打印日志 Maven依赖 <dependency> <groupId>org.apache.logging.log4j</groupId> ...

  3. 机器学习基础系列--先验概率 后验概率 似然函数 最大似然估计(MLE) 最大后验概率(MAE) 以及贝叶斯公式的理解

    目录 机器学习基础 1. 概率和统计 2. 先验概率(由历史求因) 3. 后验概率(知果求因) 4. 似然函数(由因求果) 5. 有趣的野史--贝叶斯和似然之争-最大似然概率(MLE)-最大后验概率( ...

  4. centos将celery写入系统服务

    第一步: 在/etc/下创建目录 celery/celery.conf 代码如下: CELERYD_NODES='w1 w2 w3' # 启动的celery进程的进程名 CELERY_BIN='/ro ...

  5. .NET精彩博文

    vs2019安装和使用教程(详细) 为什么选择.NETCore? C#中Socket的简单使用

  6. CDC学习

    最近在建立CDC环境,在网上看到一些不错的学习链接,粘贴如下: 1.https://blog.csdn.net/u011729865/article/details/52931366 属于https: ...

  7. A way to use NAT network by using Oracle virtualBox

    That is true. Vmware  is easy and confortable tools to make vitrual machines than Oracle virtual box ...

  8. 「AMPPZ2014」The Captain

    传送门: 这是一道bzoj权限题 Luogu团队题链接 解题思路 直接连边的话边数肯定会爆炸,考虑减少边数. 我们画出坐标系,发现一个东西: 对于两个点 \(A,B\),\(|x_A-y_A|\) 可 ...

  9. python关键日期计算

    在coding的过程中有时候会需要用到一些特殊日期,比如说是一个月的最后一天的日期,昨天的日期等等. def first_day_of_next_month(self, old_date): old_ ...

  10. RF之目录结构、执行参数、用例标签 -6

    自动化项目的目录结构:        建议的目录结构... 以robot --pythonpath .  tc命令执行tc用例下面所有的用例 builtin库里面的Run Keywords方法实现初始 ...