学习HTML（六）——＜body＞内部可用标签介绍

最新推荐文章于 2023-03-27 21:42:30 发布
原创 最新推荐文章于 2023-03-27 21:42:30 发布 · 465 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了HTML中有序列表和无序列表的使用方法，并通过具体示例展示了如何创建基本的列表，以及如何进行多级列表的嵌套。此外，还探讨了列表在不同场景下的应用。
1）有序列表标签<ol>
和列表标签相关的标签有两类，<ol>和<li>标签。<ol>和</ol>标签定义总的列表区域。<li>和</li>表示的是
在列表区域中的列表项。列表区域内可以包含多个列表项。浏览器在显示列表项时会自动为每个列表项添加序号。
具体的例子和示意图如下：
<!DOCTYPE html>
<html>
<head>
<title>Test Lists</title>
</head>
<body>
<h1>中国古代著名诗人</h1>
<ol>
<li>李白</li>
<li>杜甫</li>
<li>王勃</li>
<li>李商隐</li>
</ol>
</body>
</html>
 
2）无序列表标签<ul>
无序列表标签和有序列表标签的唯一区别就是有序列表标签的每个列表项都是有编号的，而无序列表标签
则没有编号，编号位置显示的是圆点。其他的都是一样的。下面是例子和示意图。
<!DOCTYPE html> 
<html> 
 <head>
 <title>Unordered Lists</title> 
 </head>
 <body>
 <h1>Some random thoughts</h1> 
 <p>underneath are things i randomly thought</p> 
 <ul>
 <li>sleep</li>
 <li>do sports</li> 
 <li>watch TV</li> 
 <li>play computer games</li> 
 </ul>
 </body>
 </html>
 
3）标签嵌套
<ul>、<ol>和<li>内部都可以互相嵌套，这样就可以形成多级标签。下面是例子和示意图.
<!DOCTYPE html> 
<html>
 <head>
 <title>Nested lists</title>
 </head>
 <body>
 <ol>
 <li>Dad's interests
 <ul>
 <li>football</li>
 <li>knitting</li> 
 </ul>
 </li>
 <li>Mom's interests
 <ul>
 <li>hating football</li> 
 <li>skydiving</li>
 </ul>
 </li>
 </ol>
 <ul>
 <li>Favorite Boys' Names 
 <ol>
 <li>孟星魂</li>
 <li>郭靖</li>
 <li>狄云</li>
 </ol>
 </li>
 <li>Favorite Girls' Names 
 <ol>
 <li>木婉清</li>
 <li>小昭</li>
 <li>双儿</li>
 </ol>
 </li> 
 </ul>
 <ul>
 <ol>
 <li>孟星魂</li>
 <li>郭靖</li>
 <li>狄云</li>
 </ol>
 </ul>
 </body> 
</html>
 
 
参考文献：
前端——HTML
LiLiLiLaLa的博客
04-22 8243
1.前端三门技术 学习Web前端技术需要掌握三门基本技术：HTML，CSS，JavaScript： HTML：HTML是网页内容的载体。内容就是网页制作者放在页面上想要用户浏览的信息，可以包含文件、图片、视频等 CSS：CSS样式是表现，就像网页的外衣比字体、颜色变化等 JavaScript：JavaScript用来实现网页上的特效效果。比如鼠标滑过弹出下拉菜单、鼠标滑过北京颜色改变等 使用工...
HTML基础教程（三十七）常用标签整理：《码农福音！HTML标签全家桶爆笑开席：从＜html＞到＜footer＞，一次吃到撑！》
最新发布
jxf_jxfcsdn的博客
09-08 606
嘿，程序员！是否曾面对上百个HTML标签感到头皮发麻？别慌，这篇终极指南就是你的“防脱发”秘籍！我们将以庖丁解牛的方式，深度剖析HTML5标签宇宙，从定义宏图的<section>到耍帅的<canvas>，从接地气的<a>到神秘的<template>。不仅以清晰列表形式全网罗，每个标签还附上“秒懂”示例代码，让你在爆笑与实践中彻底征服网页结构的每一寸领土。准备上车，直达前端高手村！
学习HTML（五）——＜body＞内部可用标签介绍
gc_2299的博客
11-12 796
本文接着上一篇，继续介绍body标签中常用的标签 1）图形标签 图形标签用于添加一幅图形到网页中，在使用这个标签时，并不是说像其它标签那样把图形放到开始和闭合标签之间，而是把图形的地址放到标签的属性当中。并且img标签没有对应的独立的闭合标签，使用时采用 的形式。img标签有几个属性可用，包括src、alt，width、height等，具体可以参照参考文献1，这里最重要的是src属性，它指明浏览器
html的body标签
dtf1026536690的博客
09-06 2616
1 标题标签 h1~h6 2 文本样式标签 3 段落标签 p 4 超链接标签 a 5 列表标签 ul ol 6 盒子标签 div 7 图片标签 img 8 span标签 9 表格标签 table 10 表单标签 form 11 表单控件 button textareaselect option input label <!DOCTYPE html> <ht...
HTML5常用标签（2-1）标签内部标签
icbc66的博客
11-25 2152
1.meta   &lt;meta&gt; 标签用于描述页面内容，关键词，作者，最新修订时间以及其它元信息 &lt;meta&gt; 标签的内容不会显示在网页中，但经常被机器（比如网页爬虫）解析。 元信息可以被浏览器（指导它如何加载和显示页面）所使用，也可以有利于搜索引擎收录页面（指定关键词）。 HTML5 通过 &lt;meta&gt; 标签引入一个新的方法，让网页尺寸实现自适应。 ...
学习HTML（十）——HTML可用标签介绍
gc_2299的博客
11-12 355
1）表格标签 如果一个网页中只有图片、标题、段落，那可能看着比较单调，如果再加上一些表格数据，看着可能就比较饱满了。而且在表格中不仅可以包含文本，也可以包含我们前几章提到的那些标签，比如图片、超链接等。通过包含不同的内容，就可以使网页变得丰富多彩。 表格标签按照层层嵌套方式分为三层，首先定义表格结构，在这两个标签内，我们可以定义表格行，tr是table row的缩写。每个tr标签内又可以包含多个t
学习HTML（十一）——HTML可用标签介绍
gc_2299的博客
11-12 237
1）区块划分标签 到目前为止，我们的网页内容都是在同一个标签内部，即之间，如果要设置这一部门的样式，则可以直接在标签内进行设置。但是，如果想body内容不同的区域有不同的样式，比如body分为三段，每段都有不同的背景颜色等类似设置，目前设置起来比较麻烦。标签就可以解决这类问题。 标签用于将body分为不同的区域，每个区域可以单独设置自己的样式。下面是代码和截图 ： Test Div
<?xml version="1.0" encoding="UTF-8"?> <ui version="4.0"> <class>Login</class> <widget class="QWidget" name="Login"> <property name="windowModality"> <enum>Qt::ApplicationModal</enum> </property> <property name="geometry"> <rect> <x>0</x> <y>0</y> <width>652</width> <height>385</height> </rect> </property> <property name="windowTitle"> <string>图书馆管理系统</string> </property> <widget class="QLabel" name="label"> <property name="geometry"> <rect> <x>20</x> <y>20</y> <width>111</width> <height>41</height> </rect> </property> <property name="text"> <string><html><head/><body><p><span style=" font-size:16pt;">用户登录</span></p></body></html></string> </property> <property name="textFormat"> <enum>Qt::AutoText</enum> </property> </widget> <widget class="QLabel" name="user"> <property name="geometry"> <rect> <x>150</x> <y>90</y> <width>60</width> <height>41</height> </rect> </property> <property name="text"> <string><html><head/><body><p><span style=" font-size:12pt;">用户名</span></p></body></html></string> </property> </widget> <widget class="QLabel" name="password"> <property name="geometry"> <rect> <x>160</x> <y>150</y> <width>60</width> <height>26</height> </rect> </property> <property name="text"> <string><html><head/><body><p><span style=" font-size:12pt;">密码</span></p></body></html></string> </property> </widget> <widget class="QLabel" name="identify"> <property name="geometry"> <rect> <x>140</x> <y>180</y> <width>91</width> <height>59</height> </rect> </property> <property name="text"> <string><html><head/><body><p><span style=" font-size:12pt;">身份类型</span></p></body></html></string> </property> </widget> <widget class="QLineEdit" name="userline"> <property name="geometry"> <rect> <x>290</x> <y>100</y> <width>191</width> <height>21</height> </rect> </property> </widget> <widget class="QLineEdit" name="pwline"> <property name="geometry"> <rect> <x>290</x> <y>150</y> <width>191</width> <height>21</height> </rect> </property> <property name="echoMode"> <enum>QLineEdit::Password</enum> </property> </widget> <widget class="QComboBox" name="idbox"> <property name="geometry"> <rect> <x>320</x> <y>200</y> <width>121</width> <height>22</height> </rect> </property> <item> <property name="text"> <string>读者</string> </property> </item> <item> <property name="text"> <string>图书管理员</string> </property> </item> <item> <property name="text"> <string>系统管理员</string> </property> </item> </widget> <widget class="QPushButton" name="loginbt"> <property name="geometry"> <rect> <x>250</x> <y>270</y> <width>93</width> <height>28</height> </rect> </property> <property name="text"> <string>登录</string> </property> </widget> <widget class="QPushButton" name="exitbt"> <property name="geometry"> <rect> <x>420</x> <y>270</y> <width>93</width> <height>28</height> </rect> </property> <property name="text"> <string>退出</string> </property> </widget> </widget> <resources/> <connections/> </ui>添加自适应大小
05-15
而对于那些仅需维持特定比例或者保持一定边距者来说，则应当明确写出相应数值作为默认值的一部分存入标签内部。 另外值得注意的是，如果目标设备屏幕分辨率较低(如嵌入式系统)，那么可能还需要额外处理字体大小等...
<!DOCTYPE html><!--STATUS OK--><html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script> window.alert = function() { confirm("完成的不错！"); window.location.href="level4.php?keyword=try harder!"; } </script> <title>欢迎来到level3</title> </head> <body> <h1 align=center>欢迎来到level3</h1> <h2 align=center>没有找到和123相关的结果.</h2><center> <form action=level3.php method=GET> <input name=keyword value='123'> <input type=submit name=submit value=搜索 /> </form> </center><center><img src=level3.png></center> <h3 align=center>payload的长度:3</h3></body> </html>
03-27
尽管最初的尝试失败了，因为某些特定标签如 `<embed>` 不支持 `onerror` 事件，但研究者发现了另一种方法——利用 `onmouseover` 事件作为更有效的手段[^3]。这意味着只要鼠标悬停到目标对象上即可激活隐藏的...
HTML标签列表——按字母顺序排列
12-14
- **标签**: `<body>` - **描述**: 定义文档的主体部分，是所有可见内容的容器。 #### 折行 (Break) - **标签**: `<br>` - **描述**: 定义简单的折行，用于换行而不形成新的段落。 #### 按钮 (Button) - **标签**:...
HTML中基本标签
weixin_56319791的博客
01-04 627
标签的分类 块级标签： 独占一行，可以设置宽高 行内标签：在一行内显示，不会独占一行，并且不能设置宽高，一般在行内 标签内不包含块级标签，会影响页面布局 行内块标签：也是在一行内展示，不会独占一行，但是行内块标签可以设置宽高 虽然行内标签不能设置宽高，但是可以使用样式中的display属性将行内标签转换为块级标签，或者转换为行内块标签，这样就可以对行内标签设置宽高了 display: block 表示将行内标签转换为块标签 inline-block 表示将行内标签转换为行内块标签 2. 页面基.
js样式操作、累加、快速获取body标签、boolean、流程控制语句
weixin_69474097的博客
08-03 613
js样式操作、累加、快速获取body标签、boolean、流程控制语句
HTML中的常见标签
weixin_43641202的博客
03-24 1038
HTML中常见的标签基本标签块元素 基本标签 上一章说了常见标签有： 标题标签<h1>~<h6> 段落标签<p> 水平线标签<hr> 强制换行标签<br> 强调标签<strong>标签（字体加粗） 特别强调标签 <em>标签（字体倾斜） 还有两个没有特别意思的标签，分别是： <div>和<samp> 这两个标签没有特别标注是段落标签还是标题标签之类， 他们两唯一的区别就是，一个是行内元素，一个是块
body里嵌套html,iframe标签嵌套的子页body不能重合，如图：_html/css_WEB-ITnose
weixin_35891744的博客
06-18 279
html css web 红色框记是iframe边,蓝色框记是子页body边图一：图二：回复讨论(解决方案)我想要达到的是：蓝色框记与红色框记重合蓝色框记是子页body边re:子页？也是一个iframe?不是，是指iframe内嵌页面设置iframe的frameborder=0iframe的连接页(你的子页)的样式为body {margin:0;padding:0;}设置iframe的fram...
【如何获取html，body标签】【如何封装函数】【如何将字符串分隔为数组】
m0_57517704的博客
09-14 157
​​
HTML常用标签详解
热门推荐
淘小欣的博客
03-04 2万+
HTML常用标签详解 一、head内常用标签 1.基本标签（非meta标签） <!--title: 定义网页标题--> <title>Title</title> <!--style: 定义内部样式表. 内部用来书写css代码--> <style> h1 { color: greenyellow; } </style> <!--script: 内部用来书写js代码--> <script
获取html元素和body元素
m0_61555747的博客
10-19 1617
获取html元素 需要通过document.documentElement，这是一个固定写法。
JS高级编程 - - day03
m0_48625424的博客
02-16 1737
js,dom
原生获取DOM节点
03-27 1840
原生获取DOM节点
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值