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. 21. Regular Expressions--from Apache

    转自: http://jmeter.apache.org/usermanual/regular_expressions.html 21.1 Overview¶ JMeter includes the ...

  2. 一个高级PHP工程师所应该具备的(转自元如枫博客)

    初次接触PHP,就为他的美所折服,于是一发不可收拾. 很多面试,很多人员能力要求都有“PHP高级工程师的字眼”,如果您真心喜欢PHP,并且您刚起步,那么我简单说说一个PHP高级工程师所应该具备的,希望 ...

  3. 关于Debug Assertion Failed问题

    书上代码: #include<stdio.h> #include<stdlib.h> /* 提供malloc().free()函数 */ #include<string. ...

  4. 输入url到展示页面过程发生了什么?

    输入网址,首先在书签或者历史记录里面去搜索相关的网址推荐给你 浏览器查找域名的IP的地址(在hosts文件有没有对应IP  ->  浏览器发出一个DNS请求到本地DNS服务器,本地服务器一般是网 ...

  5. Unknown column '××' in 'where clause',出现这个问题,如何处理?

    stmt.executeQuery("select * from user where username = " + name); 执行上述代码就会引发该错误. 原因是:拼凑sql ...

  6. PAT T1002 Business

    背包问题,把任务按截止日期排序,再按背包问题处理~ #include<bits/stdc++.h> using namespace std; ; struct node { int c; ...

  7. mysql操作之密码的那点小事

    mysql 修改密码的2种方式: 进入mysql库的user表中修改 update mysql.user password = password("新密码") where 条件; ...

  8. 「HNOI2002」营业额统计

    「HNOI2002」营业额统计 传送门 这题比较板子吧应该... 有几个需要注意的地方: 第一次插入时就要贡献答案 在每次计算贡献时,注意分裂出来的子树是否为空,并且要对两边的相邻元素之差取 \(\m ...

  9. java实现经典排序算法

    前言 博主最近在恶补基础知识,算法必然是必不可少的,那么就从经典排序算法开始吧!(图源网络,侵删),没有列出全部,因为在期末考试囧 代码太多,就只显示了最关键的部分 1. 冒泡排序 实现思路: (1) ...

  10. [转]ubuntu备份与恢复

    在 使用Ubuntu之前,相信很多人都有过使用Windows系统的经历.如果你备份过Windows系统,那么你一定记忆犹新:首先需要找到一个备份工 具(通常都是私有软件),然后重启电脑进入备份工具提供 ...