那些酷炫的网页你也可以做到——第三篇(HTML字体列表标签)

简介: 那些酷炫的网页你也可以做到——第三篇(HTML字体列表标签)

HTML的字体标签


字体标签

<font></font>:字体标签
属性:(1)color  字体颜色
(2)size    字号大小
大小:1-7
(3)face 字体类型:隶书、楷书、宋体


标题标签

<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3>


粗体和斜体标签

<b>粗体</b><i>斜体</i>.


滚动标签

<marquee>滚动的字幕</marquee>


HTML列表标签


列表标签

功能:把数据封装成列表

<dl></dl><dl><dt>上层的项目</dt><dd>下层的项目</dd><dd>下层的项目</dd></dl>实例:<dl><dt>计算机</dt><dd>用来计算的仪器 ... ...</dd><dt>显示器</dt><dd>以视觉方式显示信息的装置 ... ...</dd></dl>

image.png

有序列表:<ol></ol>封装了一个范围,里面要有数据条目。数据条目标签:<li></li>属性:1) type  :标号类型:数字(1.2.3. ...)、字母(a.b.c. ...)
    2) start  :从第几个编号开始
实例:
<oltype="a"start="5"><li>条目1</li><li>条目2</li><li>条目3</li></ol>

image.png

无序列表:<ul></ul>属性:type:标号的类型,例如:圆、方块、三角
<ultype="square"><li>条目1</li><li>条目2</li></ul>

image.png

网页效果:

<!DOCTYPE html><html><head><title>这是头部标签</title><metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"><metahttp-equiv="description"content="this is my page"><metahttp-equiv="content-type"content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--></head><body>    这是主体标签 <br>    感谢关注,共同学习。 <br><p><pre>              静夜诗
           床前明月光, 
           疑是地上霜,
           举头望明月,
           低头思故乡。
</p><hrcolor="red"width="300"align="center"><div><pre>                                                      大家好,我是静静的雨,感谢大家点开这篇文章,希望我的文章可以帮助到你,加油,一起学习。
</div><hrcolor="red"width="300"align="center"><span>留个关注,避免迷路。
</span><dl><dt>计算机</dt><dd>用来计算的仪器 ... ...</dd><dt>显示器</dt><dd>以视觉方式显示信息的装置 ... ...</dd></dl><oltype="a"start="5"><li>条目1</li><li>条目2</li><li>条目3</li></ol><ultype="square"><li>条目1</li><li>条目2</li></ul></body></html>


目录
相关文章
|
11天前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
38 19
|
2天前
|
UED
HTML无序列表、有序列表的巧妙使用
HTML 的无序列表(`&lt;ul&gt;`)和有序列表(`&lt;ol&gt;`)不仅用于简单罗列信息,还能增强网页的可读性和用户体验。无序列表适合列出相关项目或概念,如产品特点、待办事项、导航链接等;有序列表则适用于表示有明确顺序的项目,如步骤说明、排行榜等。合理使用这些列表可以使信息更清晰易懂。
|
11天前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
28 13
|
10天前
|
搜索推荐 SEO
HTML中各种标题标签的正确使用方法及其特点
在HTML中,标题标签(`&lt;h1&gt;`至`&lt;h6&gt;`)用于定义文档的标题结构。`&lt;h1&gt;`表示主标题,每个页面应只有一个;`&lt;h2&gt;`至`&lt;h6&gt;`分别表示不同层级的子标题,可用于细分内容。正确使用这些标签不仅有助于文档的层次分明和可读性提升,还能优化SEO。使用时需注意保持层级结构连续、内容描述清晰。
|
10天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
22天前
|
数据安全/隐私保护
新年快乐鞭炮祝福html网页源码
新年快乐鞭炮祝福html网页源码,动态点燃鞭炮动画祝福新年快乐,带新年背景音乐,无加密完整可用,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面。
31 0
新年快乐鞭炮祝福html网页源码
|
2天前
|
移动开发 HTML5
这些年没来得及学习的一些 HTML5 标签
【9月更文挑战第16天】HTML5 引入了许多新标签,增强了网页的功能与便利性。这些标签包括结构标签如 `&lt;header&gt;`(定义页眉)、`&lt;footer&gt;`(定义页脚)、`&lt;nav&gt;`(定义导航链接)、`&lt;section&gt;`(定义文档节)和 `&lt;article&gt;`(定义独立内容),以及多媒体标签 `&lt;audio&gt;` 和 `&lt;video&gt;`,用于播放音频和视频。此外,还有表单相关标签,如 `&lt;datalist&gt。
|
4月前
|
存储 移动开发 前端开发
HTML5列表标签、多媒体和语义化标签
列表标签、多媒体和语义化标签
67 0
HTML教程6——列表标签
无序列表用<ul>标签表示,无序列表的每一项前默认都是用圆点标识,<ul>标签中比较重要的属性为type(列表前的符号),默认为disc(圆点),还有circle(空心圆),square(实心正方形),<ul>标签中只能有<li>标签,<li>标签的元素代表列表每一行的内容,<ul>标签中可以允许有任意个<li>标签。
HTML教程6——列表标签