HTML基础笔记_3列表和字体
2024-04-24 12:21:31
3种列表
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/*去掉项目符号* *//*ul{list-style: none;}*/</style></head><body><!-- 列表就相当于去超市购物时的那个购物清单，在HTML也可以创建列表，在网页中一共有三种列表：1.无序列表2.有序列表3.定义列表--><!--无序列表- 使用ul标签来创建一个无序列表- 使用li在ul中创建一个一个的列表项，一个li就是一个列表项通过type属性可以修改无序列表的项目符号可选值：disc，默认值，实心的圆点square，实心的方块circle，空心的圆注意：默认的项目符号我们一般都不使用！！如果需要设置项目符号，则可以采用为li设置背景图片的方式来设置ul和li都是块元素 --><!--定义列表用来对一些词汇或内容进行定义使用dl来创建一个定义列表dl中有两个子标签dt ： 被定义的内容dd ： 对定义内容的描述同样dl和ul和ol之间都可以互相嵌套 --><dl><dt>武松</dt><dd>景阳冈打虎英雄，战斗力99</dd><dd>后打死西门庆，投奔梁山</dd><dt>武大</dt><dd>著名餐饮企业家，战斗力0</dd></dl><ul><li>西门大官人</li><li>柴大官人</li><li>许大官人</li><li>唐僧大官人</li></ul><!-- 有序列表和无序列表类似，只不过它使用ol来代替ul有序列表使用有序的序号作为项目符号type属性，可以指定序号的类型可选值：1，默认值，使用阿拉伯数字a/A 采用小写或大写字母作为序号i/I 采用小写或大写的罗马数字作为序号ol也是块元素 --><ol type="I"><li>结构</li><li>表现</li><li>行为</li></ol><!-- 列表之间都是可以互相嵌套，可以在无序列表中放个有序列表也可以在有序列表中放一个无序列表--><p>菜谱</p><ul><li>鱼香肉丝<ol><li>鱼</li><li>香</li><li>肉丝</li></ol></li><li>宫保鸡丁<ul><li>宫保</li><li>鸡丁</li></ul></li><li>青椒肉丝</li></ul></body>
</html>
字体长度单位
<style type="text/css">/** 长度单位* 像素 px* - 像素是我们在网页中使用的最多的一个单位，* 一个像素就相当于我们屏幕中的一个小点，* 我们的屏幕实际上就是由这些像素点构成的* 但是这些像素点，是不能直接看见。* - 不同显示器一个像素的大小也不相同，* 显示效果越好越清晰，像素就越小，反之像素越大。* * 百分比 %* - 也可以将单位设置为一个百分比的形式，* 这样浏览器将会根据其父元素的样式来计算该值* - 使用百分比的好处是，当父元素的属性值发生变化时，* 子元素也会按照比例发生改变* - 在我们创建一个自适应的页面时，经常使用百分比作为单位* * em* - em和百分比类似，它是相对于当前元素的字体大小来计算的* - 1em = 1font-size* - 使用em时，当字体大小发生改变时，em也会随之改变* - 当设置字体相关的样式时，经常会使用em* */.box{width: 300px;height: 300px;background-color: red;}.box1{font-size: 20px;width: 2em;height: 50%;background-color: yellow;}</style>
字体样式及分类
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.p1{/*设置字体颜色,使用color来设置文字的颜色*/color: red;/** 设置文字的大小,浏览器中一般默认的文字大小都是16pxfont-size设置的并不是文字本身的大小，在页面中，每个文字都是处在一个看不见的框中的我们设置的font-size实际上是设置格的高度，并不是字体的大小一般情况下文字都要比这个格要小一些，也有时会比格大，根据字体的不同，显示效果也不能 * */font-size: 30px;/** 通过font-family可以指定文字的字体* 当采用某种字体时，如果浏览器支持则使用该字体，* 如果字体不支持，则使用默认字体* 该样式可以同时指定多个字体，多个字体之间使用,分开* 当采用多个字体时，浏览器会优先使用前边的字体，* 如果前边没有在尝试下一个*//*font-family: arial , 微软雅黑;*//** 浏览器使用的字体默认就是计算机中的字体，* 如果计算机中有，则使用，如果没有就不用* * 在开发中，如果字体太奇怪，用的太少了，尽量不要使用，* 有可能用户的电脑没有，就不能达到想要的效果。*//*font-family: 华文彩云 , arial , 微软雅黑;*/font-family: "curlz mt";<!-- 在网页中将字体分成5大类：serif（衬线字体）sans-serif（非衬线字体）monospace （等宽字体）cursive （草书字体）fantasy （虚幻字体）可以将字体设置为这些大的分类,当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式一般会将字体的大分类，指定为font-family中的最后一个字体 -->}</style></head><body><p class="p1">我是一个p标签，ABCDEFGabcdefg</p></body>
</html>
字体的其他样式
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.p1{color: red;font-size: 30px;font-family: "微软雅黑";/** font-style可以用来设置文字的斜体* - 可选值：* normal，默认值，文字正常显示* italic 文字会以斜体显示* oblique 文字会以倾斜的效果显示* - 大部分浏览器都不会对倾斜和斜体做区分，* 也就是说我们设置italic和oblique它们的效果往往是一样的* - 一般我们只会使用italic*/font-style: italic;/** font-weight可以用来设置文本的加粗效果：* 可选值：* normal，默认值，文字正常显示* bold，文字加粗显示* * 该样式也可以指定100-900之间的9个值，* 但是由于用户的计算机往往没有这么多级别的字体，所以达到我们想要的效果* 也就是200有可能比100粗，300有可能比200粗，但是也可能是一样的*/font-weight: bold;/** font-variant可以用来设置小型大写字母* 可选值：* normal，默认值，文字正常显示* small-caps 文本以小型大写字母显示* * 小型大写字母：* 将所有的字母都以大写形式显示，但是小写字母的大写，* 要比大写字母的大小小一些。*/font-variant: small-caps ;}.p2{/*设置一个文字大小*/font-size: 50px;/*设置一个字体*/font-family: 华文彩云;/*设置文字斜体*/font-style: italic;/*设置文字的加粗*/font-weight: bold;/*设置一个小型大写字母*/font-variant: small-caps;}.p3{/** 在CSS中还为我们提供了一个样式叫font，* 使用该样式可以同时设置字体相关的所有样式,* 可以将字体的样式的值，统一写在font样式中，不同的值之间使用空格隔开* * 使用font设置字体样式时，斜体 加粗 小大字母，没有顺序要求，甚至可写可不写，* 如果不写则使用默认值，但是要求文字的大小和字体必须写，而且字体必须是最后一个样式* 大小必须是倒数第二个样式* * 实际上使用简写属性也会有一个比较好的性能*/font: small-caps bold italic 60px "微软雅黑";}</style></head><body><p class="p3">我是一段文字，ABCDEFGabcdefg</p><p class="p1">我是一段文字，ABCDEFGabcdefg</p><p class="p2">我是一段文字，ABCDEFGabcdefg</p></body>
</html>
行高与行间距
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/** 在CSS并没有为我们提供一个直接设置行间距的方式，* 我们只能通过设置行高来间接的设置行间距，行高越大行间距越大* 使用line-height来设置行高 * 行高类似于我们上学单线本，单线本是一行一行，线与线之间的距离就是行高，* 网页中的文字实际上也是写在一个看不见的线中的，而文字会默认在行高中垂直居中显示* * 行间距 = 行高 - 字体大小*/.p1{font-size: 20px;/** 通过设置line-height可以间接的设置行高，* 可以接收的值：* 1.直接就收一个大小* 2.可以指定一个百分数，则会相对于字体去计算行高* 3.可以直接传一个数值，则行高会设置字体大小相应的倍数*//*line-height: 200%;*/line-height: 2;}.box{width: 200px;height: 200px;background-color: #bfa;/** 对于单行文本来说，可以将行高设置为和父元素的高度一致，* 这样可以是单行文本在父元素中垂直居中*/line-height: 200px;}.p2{/** 在font中也可以指定行高* 在字体大小后可以添加/行高，来指定行高，该值是可选的，如果不指定则会使用默认值*/font: 30px "微软雅黑";line-height: 50px;}</style></head><body><p class="p2">在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个</p><div class="box"><a href="#">我是一个超链接</a></div><p class="p1">在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春</p></body></html>文本样式
文本的英文大小写，文本修饰，对齐，首行缩进
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.p1 {/** text-transform可以用来设置文本的大小写* 可选值：* none 默认值，该怎么显示就怎么显示，不做任何处理* capitalize 单词的首字母大写，通过空格来识别单词* uppercase 所有的字母都大写* lowercase 所有的字母都小写*/text-transform: lowercase;}.p2 {/** text-decoration可以用来设置文本的修饰* 可选值：* none：默认值，不添加任何修饰，正常显示* underline 为文本添加下划线* overline 为文本添加上划线* line-through 为文本添加删除线*/text-decoration: line-through;}a {/*超链接会默认添加下划线，也就是超链接的text-decoration的默认值是underline如果需要去除超链接的下划线则需要将该样式设置为none* */text-decoration: none;}.p3 {/*** letter-spacing可以指定字符间距*//*letter-spacing: 10px;*//** word-spacing可以设置单词之间的距离* 实际上就是设置词与词之间空格的大小*/word-spacing: 120px;}.p4{/** text-align用于设置文本的对齐方式* 可选值：* left 默认值，文本靠左对齐* right ， 文本靠右对齐* center ， 文本居中对齐* justify ， 两端对齐* - 通过调整文本之间的空格的大小，来达到一个两端对齐的目的*/text-align: justify ;}.p5{font-size: 20px;/** text-indent用来设置首行缩进* 当给它指定一个正值时，会自动向右侧缩进指定的像素* 如果为它指定一个负值，则会向左移动指定的像素,* 通过这种方式可以将一些不想显示的文字隐藏起来* 这个值一般都会使用em作为单位，因为 1em=1font-size*/text-indent: -99999px;}</style></head><body><p class="p5">在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我</p><h1 class="p4">我是一个h1</h1><p class="p4">在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我</p><p class="p4">“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.” “Do the dead frighten you?” Ser Waymar Royce asked with just the hint of a smile. Gared did not rise to the bait. He was an old man, past fifty, and he had seen the lordlings come and go. “Dead is dead,” he said. “We have no business </p><p class="p3">在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红</p><p class="p3">“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.” “Do the dead frighten you?” Ser Waymar Royce asked with just the hint of a smile. Gared did not rise to the bait. He was an old man, past fifty, and he had seen the lordlings come and go. “Dead is dead,” he said. “We have no business </p><a href="#">我是超链接</a><p class="p2">“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.” “Do the dead frighten you?” Ser Waymar Royce asked with just the hint of a smile. Gared did not rise to the bait. He was an old man, past fifty, and he had seen the lordlings come and go. “Dead is dead,” he said. “We have no business with the dead.” “Are they dead?” Royce asked softly. “What proof have we?” “Will saw </p><p class="p1">“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.” “Do the dead frighten you?” Ser Waymar Royce asked with just the hint of a smile. Gared did not rise to the bait. He was an old man, past fifty, and he had seen the lordlings come and go. “Dead is dead,” he said. “We have no business with the dead.” “Are they dead?” Royce asked softly. “What proof have we?” “Will saw them,” Gared said. “If he says they are dead, that’s proof enough for me.” Will had </p></body></html>HTML基础笔记_3列表和字体相关推荐
- 升序排列python_Python3基础 sort 将一个列表中的值升序排列
镇场诗: ---大梦谁觉,水月中建博客.百千磨难,才知世事无常. ---今持佛语,技术无量愿学.愿尽所学,铸一良心博客. --------------------------------------- ...
- HTML5、CSS3基础笔记
HTML5 & CSS3基础笔记 HTML html的基本格式 实体 meta标签 语义化标签-01 块和行内 语义化标签-02 列表 超链接介绍 相对路径 超链接的其他用法 图片标签 图片格 ...
- HTML5基础——笔记
HTML5基础--笔记 近几年来,互联网+.大数据.云计算'物联网'虚拟现实'人工智能.机器学习.移动互联网等IT相关新名词.新概念层出不穷,相关产业发展如火如荼.互联网+移动互联网已经深入到人民日常 ...
- HTML-CSS基础笔记
HTML-CSS基础笔记 文章目录 HTML-CSS基础笔记 一.html的发展历程 二.常用声明方式 三. HTML的注释 四. 常用的标签 4.1.img标签 4.2. a标签 4.3. em标签 ...
- 萌新向Python数据分析及数据挖掘 第一章 Python基础 第三节 列表简介 第四节 操作列表...
第一章 Python基础 第三节 列表简介 列表是是处理一组有序项目的数据结构,即可以在一个列表中存储一个序列的项目.列表中的元素包括在方括号([])中,每个元素之间用逗号分割.列表是可变的数据类型, ...
- 【Python基础】零基础学习Python列表操作
作者:来自读者投稿 整理:Lemon 出品:Python数据之道 " 「Python数据之道」导读:本文来自读者投稿,Python数据之道早些时候也发过 Python 列表相关的文章,可以前 ...
- python列表和元组的应用_python学习笔记之列表(list)与元组(tuple)详解
前言 最近重新再看python的基础知识,感觉自己还是对于这些知识很陌生,需要用的时候还是需要翻书查阅,还是先注重基础吧--我要重新把python的教程阅读一遍,把以前自己忽略的部分学习,加强练习和记 ...
- Java基础笔记 – 枚举类型的使用介绍和静态导入
Java基础笔记 – 枚举类型的使用介绍和静态导入 本文由 arthinking 发表于404 天前 ⁄ Java基础 ⁄ 暂无评论 ⁄ 被围观 1,433 views+ 1.枚举(Enum): JD ...
- Linux C基础笔记（2）
Linux C基础笔记(2) **补充申明:Linux C基础笔记共分为四部分,第一部分是Linux下基本命令,以及vi编辑器的使用还有C中的数据类型,第二部分为运算符.常量变量和输入输出.第三部分是 ...
最新文章
- 通过分析 JDK 源代码研究 Hash 存储机制
- 描述符应用 -- 让python变成一个强类型的语言
- Ubuntu ls可以查看到文件，图形界面却看不到
- java ndk 在哪_NDK简介
- CentOS7 的开机自启动systemctl
- （7）Node.js 全局函数
- CSRF漏洞原理/防御
- SpringBoot-文件在线预览解决方案-基于OpenOffice及jacob
- iOS UITextField限制输入字数
- 电感升压（boost电路）感性理解
- 测试测量 | 【一】如何实现生产过程中的自动化测试？——成功的自动测试系统的目标及面临的问题
- 8421码转16进制的c语言,16进制数转换成8421BCD编码函数
- 华为彩信显示尚未激活服务器,华为手机无法接收彩信提示要开通gprs
- 源码之家（源代码下载分享）
- 用计算机对视频进行剪裁和编辑,爱剪辑怎么裁剪视频片段？
- 如何将图片变成GIF图？一键完成gif制作
- tensorflow 学习笔记使用CNN做英文文本分类任务
- 【QT-3】tableWidget控件
- JavaSE基础答案合集class篇
- Python 进度条带时间