HTML5列表、块和布局

最新推荐文章于 2024-03-08 15:37:52 发布
最新推荐文章于 2024-03-08 15:37:52 发布
阅读量531 收藏 1
点赞数
分类专栏： 肉身之HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/siwuxie095/article/details/74996621
版权

-----------------siwuxie095

  

  

  

  

  

  

  

  

  

HTML5 列表

  

  

标签

描述

<ol>

有序列表

<ul>

无序列表

<li>

列表项

<dl>

列表

<dt>

列表项

<dd>

描述

  

  

  

1、无序列表

  

标签：<ul>、<li>

  

属性：disc、circle、square

  

  

  

2、有序列表

  

标签：<ol>、<li>

  

属性：A、a、I、i、start

  

  

  

3、嵌套列表

  

标签：<ul>、<ol>、<li>

  

  

  

4、自定义列表

  

标签：<dl>、<dt>、<dd>

  

  

  

  

  

HTML5 块

  

  

1、HTML 块元素

  

块元素在显示时，通常会以新行开始，如：<h1>、<p>、<ul>

  

  

  

2、HTML 内联元素

  

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

  

  

  

3、HTML <div> 元素

  

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

  

  

4、HTML <span> 元素

  

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

  

  

  

  

  

HTML5 布局

  

  

1、使用<div>元素布局

  

2、使用<table>元素布局

  

  

  

如下：

  

（1）DIV 布局

  

<!DOCTYPE html>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>div布局</title>

<style type="text/css">

body{

margin:0px;

}

#container{

width:100%;

height:950px;

background-color: darkgray;

}

#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: brown;

clear: both;

}

</style>

</head>

<body>

<divid="container">

<divid="heading">头部</div>

<divid="content_menu">内容菜单</div>

<divid="content_body">内容主体</div>

<divid="footing">底部</div>

</div>

</body>

</html>

  

  

  

（2）TABLE 布局

  

<!DOCTYPE html>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>table布局</title>

</head>

<bodymarginwidth="0px"marginheight="0px">

<tablewidth="100%"height="950px"style="background-color: darkgray">

<tr>

<tdcolspan="2"width="100%"height="10%"style="background-color: aqua">头部</td>

</tr>

<tr>

<tdwidth="30%"height="80%"style="background-color: aquamarine">内容菜单</td>

<tdwidth="70%"height="80%"style="background-color: blueviolet">内容主体</td>

</tr>

<tr>

<tdcolspan="2"width="100%"height="10%"style="background-color: brown">底部</td>

</tr>

</table>

</body>

</html>

  

  

  

  

  

  

  

  

  

【made by siwuxie095】

siwuxie095
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML列表、块和布局
TF_LIU的博客
09-09 1362
HTML列表   有序列表 无序列表 列表项 列表 列表项 描述 1、无序列表 使用标签：、 属性：disc、circle、square 2、有序列表 使用标签：、 属性：A、a、l、i、start 3、嵌套列表 使用标签：、、 4、自定义列表 使用标签：、、 代码如下： html> html lang="en"> he
HTML5布局
qq_40942058的博客
05-19 156
一.div布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div布局</title> <style type="text/css"> body{ margin:0px; } div#container{ wid
HTML5-布局篇( 总结 )
weixin_33947521的博客
11-03 223
1）像&lt;span&gt;这样的行内标记，定义它的margin-top和margin-bottom是无效的，除非你把它设置为块状元素才可以。Display:block 2）对于块状元素，你可以自由的使用外边距来定义版式和元素之间的距离。类似 DIV 等等， 3）无论什么元素，一旦设置为是浮动显示，就拥有了完整的盒模型结构，我们就可以使用外边距，内边距，边框，高和宽来控制的大小以及与其他对象...
Html5 布局方式
weixin_34111790的博客
11-27 353
在Html5之前，统一采用的是Div+css的方式进行布局，但是却和开发人员的命名方式，喜好有关。在新的Html5中，布局却显得更加人性化，更易理解了。如增加了Header，Footer，Section，Aside标签，很容易一眼就知道对应的功能是什么。布局效果如下： 涉及的元素，说明如下：HTML5 提供的新语义元素定义了网页的不同部分： HTML5 语义元素 head...
HTML5-布局
luckxing的博客
09-27 1261
absolute  绝对坐标 relative 相对坐标 padding: 0; margin: 0; style=" font-size: 16px; position:absolute;right: 5px; top: 30px;" 左右放置 span id="">span>  组合文档中的行内元素 上下放置 div id="">div>
HTML5系列教程-HTML5列表、块和布局
11-28
通过学习和理解HTML5中的列表、块级元素以及布局技术，开发者可以创建出更加高效、易用且美观的网页。无论是用于传统的桌面端，还是适应不断增长的移动端市场，HTML5的这些特性都能为网页设计带来显著的提升。在这个...
黑白块HTML5游戏源码
06-23
黑白块HTML5游戏源码是一种基于HTML5技术开发的互动娱乐程序，主要利用了HTML5的Canvas元素和JavaScript语言来创建图形用户界面和处理游戏逻辑。HTML5是超文本标记语言的第五个版本，它引入了许多新特性，使得在网页...
家居沙发布局html5网站模板
04-08
【家居沙发布局HTML5网站模板】...综上所述，"家居沙发布局HTML5网站模板"是一个综合运用HTML5、CSS3和JavaScript技术，注重用户体验、响应式设计和SEO优化的网站解决方案，为家居行业提供了便捷的在线展示和营销工具。
html和html5网站布局
10-21
在实际项目中，应根据具体需求选择合适的HTML5标签，遵循语义化原则，使页面结构清晰，利于搜索引擎抓取，同时配合CSS3实现灵活的响应式布局，以适应不同设备和屏幕大小。通过合理运用HTML5的新特性，可以创建出更...
Pyqt5自适应布局实例
01-20
在pyqt5中要做到自适应布局，必须应用Layout类 下面列出类似于 html 中 float 功能的布局方法： 实现原理： PyQt5中的布局中，stretch 属性类似于一个可自适应的空白布局。会尽可能将周围的组件布局向外挤压 from ...
html5布局大全
12-26
html5是今后网站制作的发展方向，现在发一些html的布局给大家做参考
HTML5布局之路
01-24
《HTML5布局之路》是清华大学出版社，于2017年6月出版的，涉及HTML、CSS、HTML5、CSS3的编程语言书籍
HTML5 布局
Lyajpunov的博客
12-07 368
两栏布局 方案一 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0px; padding: 0px; } body,html{
HTML5列表、布局和链接
Yang_Sun_shine的博客
04-07 1047
HTML5列表、链接
HTML5 ----- 布局
qq_64227183的博客
12-20 429
布局，绝对定位，相对定位
HTML5页面布局
最新发布
atarik@163.com
03-08 611
双飞翼布局和圣杯布局的实现效果完全一样，不同在于圣杯布局需要修改父元素的padding值，而双飞翼布局可以回避掉padding设置，改为使用margin值，在低版本浏览器能够避免一些额外的hack代码。双飞翼的缺点是在页面添加了一项额外的DOM层级。左右固定，中间自适应（圣杯布局）
html5网页布局
FreeeLinux's blog
11-16 1410
index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>immoc</title> <link rel="stylesheet" href="css/style.css"> </head> <body><header> <div class="container">
html列表、块
King的博客
04-18 465
无序列表 标签：、 属性：disc、circle、square 有序列表 标签：、 属性：A、a、l、start 嵌套列表 标签：、、 自定义列表 标签：、、 html块元素 块元素在显示的时候会以新的一行开始 如：h1、p、ul html内联元素 内联元
HTML5基本布局
p312011150的博客
09-18 674
HTML5基本布局 HTML4布局 HTML5布局   基本的HTML5文档的模式为： DOCTYPE html> html lang = "en"> head> meta charset = "utf-8"> title>HTML5 Demotitle> body> header>h1>h1>h2>h2>header> nav>ul>li>li>li>l
HTML5响应式网页设计及其布局技巧
"这份文档详细介绍了HTML5响应式网页设计的相关知识，涵盖了HTML5中的基本元素、样式表的使用、布局结构的选择以及网站开发的基本流程和CSS3动画等概念。" 在HTML5响应式网页设计中，理解块级元素至关重要。块级...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值