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. vue 的模拟数据

    首先分析需要什么数据,然后在build下 找到dev-server.js 在里面有一个var 项目名 = express() 在后面添加我们自己需要模拟的数据路由 // 自己添加路由 读取数据 sta ...

  2. Centos610安装Oracle

    官方安装参考 第一部分 依赖包 依赖包安全前先桌面安装 安装依赖包 yum -y install gcc gcc-c++ make binutils compat-libstdc++-33 elfut ...

  3. 五年C语言程序员，是深耕技术还是走管理？

    从进入程序员行列开始(2013年6月),到现在为止(2019年2月),已经有五年半了.    一路波折,已经从无知菜鸟走到了意识觉醒的老鸟了.    薪资变化情况如下: 2013年:2000元/月 ( ...

  4. DNS域名解析，内网

    1.登录DNS服务器 windows系统 2.打开dns程序,新建区域.如下图 按默认的选项就行 2.点击空白处的右键,新建主机 具体如下图 3.可以测试访问了 ,如果做过hosts文件的修改,本机的 ...

  5. PTA的Python练习题（七）

    不知不觉一个星期过去了,继续从 第3章-12 求整数的位数及各位数字之和 开始做题 1. 我原来想用题目漏洞做题的,不过想想还是算了自己写个完整的: a=int(input()) b=len(str( ...

  6. 华为事件对A股的影响思考

    美国对华为实施禁商令: 利好:自主可控-替代品 软件:国产操作系统(中国软件,浪潮软件,湘邮科技...) 芯片:国产芯片(士微兰,国民技术...) 利好:华为优势产品 5G: 利好:反制资源 稀土永磁 ...

  7. LeetCode 445. Add Two Numbers II（链表求和）

    题意:两个非空链表求和,这两个链表所表示的数字没有前导零,要求不能修改原链表,如反转链表. 分析:用stack分别存两个链表的数字,然后从低位开始边求和边重新构造链表. Input: (7 -> ...

  8. day22-Python运维开发基础(正则函数 / 异常处理)

    1. 正则函数 # ### 正则表达式 => 正则函数 import re # search 通过正则匹配出第一个对象返回,通过group取出对象中的值 strvar = "5*7 9 ...

  9. mysql mvcc 的理解

    mvcc 全称 multiple version concurrency control 多版本并发控制,是数据库领域比较常用的一种非锁并发技术. mysql 的innodb中,在RR.RC级别会使用 ...

  10. Linux centosVMware apache 限定某个目录禁止解析php、限制user_agent、php相关配置

    一.限定某个目录禁止解析php 核心配置文件内容 vim /usr/local/apache2.4/conf/extra/httpd-vhosts.conf 先创建.编辑一个php 配置 vim /u ...