[19/06/06-星期四] HTML基础_文本标签、列表(有序、无序、定义)、文本格式化(单位、字体、大小写、文本修饰、间距、对齐文本)...
一、文本标签
em:用来表示一段内容的着重点,语气上的强调。一般显示为斜体
i:是斜体显示,和em显示效果一样。h5规定不需要着重的内容而是单纯加粗或斜体可以用i或b。用的不多
strong:用来表示一个内容的重要性。一般显示为粗体。与em可以单独使用,也可以一起使用。
b:加粗显示,跟strong显示效果一样。
small:标签中的内容会比他的父元素中内容小一点。在h5中来表示一些细则中内容,如版本声明,合同条款。
big:没什么语义,很少使用。
cite:网页中所有加书名号的内容都可以使用cite标签,表示参考内容。比如书名、电影名等
q:表示短的引用(行内运用) ,自动加个引号。是通过css的before和after自动加的。样式几乎不用。
blockquote:表示长引用(块级引用)。块元素,独占一行。b乎中用的多。
sup:把内容设置成上标显示。如,数学中符号。或者在上标中加入超链接,如论文中、百度百科中。supremum的缩写
sub:把内容设置成下表显示。如,化学中分子式。subtitle字幕、下边的意思
del:给内容中间加个横杠,常用于原来价格的改变。购物网站中常用,如淘宝打折时。
ins:在内容下边加个横线,插入的一个内容。填空题的效果,英文insert
pre:预格式标签,将代码中的格式保存,不会弄成一行显示,不会忽略空格,源代码怎么写,网页就怎么显示。技术博客中常用。
code:专门用来表示代码,但是不会保留格式。往往结束使用,技术博客中常用。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>文本标签</title><style type="text/css"></style></head><body><!--em:主要表示语气上强调。在浏览器中默认显示斜体strong:表示强调的内容。比em更强烈,默认粗体显示。--><div>你做事真像个<em>傻逼</em>。 <br /><strong>警告:小心灯火!</strong> <br /><p> <cite> 《史记》 </cite>是汉代司马迁所著。 </p> <!--cite表示参考内容--><p> 子曰:<q>己所不欲勿施于人</q> </p> <!--q引用的内容浏览器自动加个引号--><blockquote> 子曰:有朋自远方来,2333</blockquote>3的平方:3<sup>2</sup>=9 <br />周杰伦<sup><a href="http://www.baidu.com"> [1]</a> </sup>出席电影开幕式。水的分子式:H<sub>2</sub>O <br />原价:<del>9.9</del> 现价:6.9 <br />猫的英文是<ins>Cat</ins> <br />java举例:<pre><!--shift+table 往回缩 。public前边的也算是预格式的一部分-->public class Test{public static void main(String[] args){System.out.println("hello,world");}}</pre> </div></body> </html>
二、列表(无序和有序列表之间都可以相互嵌套)
1、无序列表(使用ul-li标签,ul和li都是块元素)
默认前边有个小圆点,即无序的项目列表。通过type属性可以修改前边的小圆点。
disc:默认值,实心的圆点; square:实心小方块;circle:空心的圆圈。几乎都不用。去掉项目符号,使用css。如果需要设置符号,可以为li设置背景图片。
2、有序列表(使用ol-li标签,也是块元素)
默认前边有类似1、2、3的项目编号。通过type属性可以改变默认值。
可选择: 阿拉伯数字1,默认值;大写字母A;小写字母a ;罗马字母I;作为开头
3、定义列表(dl-dt/dd,dt被定义的内容,dd对内容进行解释,也可以相互嵌套)
用来对一些词汇或内容进行定义。显示效果,dt一行,dd一行,前面有空格
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>列表</title><style type="text/css">ul{list-style: none;/*去掉项目符号*/}</style></head><body><!--无序列表--><ul><li>李白</li><li>杜甫</li><li>王维</li></ul><!--有序列表--><ol type="A"><li>打开冰箱</li><li>把大象装进去</li><li>关上冰箱</li></ol><!--相互嵌套--><ul><li>鱼香肉丝</li><li>酸菜鱼<ol type="1"><li>买鱼</li><li>做菜</li><li>刷碗</li></ol></li><li>京酱肉丝</li></ul><!--定义列表--><dl><dt>胡萝卜</dt><dd>一种蔬菜,兔子最爱</dd><dd>一种腹黑的动物</dd><dt>西安</dt><dd>一座古都,位于陕西省。</dd></dl></body> </html>
三、文本格式化
1、单位
像素
长度单位:px(像素)一个像素就相当于屏幕中的一个小点(小方块),屏幕就是由像素点组成。像素点事不能肉眼识别,因为太小了。
分辨率:1366*768 不同显示器的一个像素大小也不同,显示效果好的,像素点就小。计算机中1个像素约是手机中的4倍。但是手机浏览器默认乘以4倍显示,所以不会有问题
百分比
也可以设置成百分比,这浏览器会根据父元素的样式来计算该值。
好处是当父元素属性值发生变化时,子元素也会发生改变。创建自适应页面,经常使用这种。
em
和百分比类似,根据当前元素的字体大小来计算的。1em=1font-size(字体大小)。font-size变em也变。设置字体相关的样式时,使用em.
颜色(取色工具:FastStone)
1、使用颜色的单词来表示颜色。
2、使用RGB值表示颜色。是指美术的三原色:Red、Green、Blue(红、绿、蓝),通过三原色的不同的浓度来表示不同颜色。
如:rgb(红色的浓度,绿色的浓度、蓝色的浓度),颜色的浓度需要一个0-255之间的值。使用截图工具来看浓度的调配,rgb(255,250,232) 豆沙绿
浓度也可以使用百分数来表示,使用百分数最终也可以转成0-255之间的值。
3、使用16进制的rgb值来表示颜色。三组两位的16进制来表示颜色,#红色绿色蓝色,范围#000000(黑色)-#FFFFFF(白色),FF转成10进制就是255
每两位重复的可以简写:如#ff0000(红色)简写成#f00。#bfa 豆沙绿
2、字体
浏览器中默认的字体大小是16px。font-size设置的不是文字本身的大小,页面中每个文字处于一个看不见的格中,我们设置的font-size设置的是格子的高度,一般情况
下文字都要比这个格小点,也有时比格子大。根据字体(微软雅黑、宋体等)的不同显示的效果不同。
font-family:可以指定浏览器中显示的字体类型。当采用某种字体,如果浏览器支持则使用该字体,不支持(如采用英文字体去设置汉字)则采用默认字体。该样式可同
时指定多种字体,font-family:arial,微软雅黑。浏览器优先使用前边,前边没有则使用下一个,还没有使用默认。
浏览器中使用的字体使用的是电脑中安装过的字体,没有就不用。开发中字体用的太少,尽量不要使用。,有可能用户电脑中没有。
字体的分类:serif 衬线字体 ;sans-serif 非衬线字体;monospace 等宽字体;cursive 草书字体;fantasy 虚幻字体。
我们可以将字体设置为大的分类。大类中会微软雅黑、宋体等具体的类。当设置为大的分类,浏览器会自动选出一种字体去使用。
font-style: 可以设置文字的斜体。
none:文字正常显示;italic :文字斜体显示;oblique:文字倾斜显示。大部分浏览器不会做区分,区别效果不大,人眼看不出区别。一般使用第二个。
font-weight :设置文本的粗细。
bold:文字加粗显示;normal:正常显示;也可以设置数字100-900这9个级别的9个值,但是用户的计算机没有这么多级别的字体,不能达到效果。也就是200可能比100粗
也可能一样,基本没什么用。
font-variant :设置小写字母的大写显示,将所有字母大写显示,但是小写字母比大写字母的显示小一点
normal:正常显示;small-caps: 文本以小型大写字母显示。
3、大小写
text-transform可将元素中的字母按样式改变。
uppercase 所有字母全部大写; lowercase 全部小写;capitalize :首字母大写 none,正常显示,大小写分明。浏览器通过空格识别单词。
4、文本修饰
text-decoration 给文本加修饰,通过他给文本上方、下方、中间加线条。
underline下方,下划线 ; overline上方; line-through 中间,删除线; none 正常显示。
超链接自带下划线,因为它text-decoration默认值是underline ,自己可以更改,如设置为none,去掉下划线
5、间距
letter-spacing 设置字符之间的间距
Word-spacing 设置单词之间的间距。实际设置词与词之间空格大小,但是中文词语是词语是连着的,没啥意义,不起作用。
6、对齐文本
text-align:设置文本对齐方案
left:左对齐,默认值; right 右对齐;justify 两边对齐,通过调整文本之间空格的大小来实现;center 居中对齐
7、首行缩进
text-indent 用来设置首行缩进。在采取默认字体大小时,设置为32px表示首行空出2个字符的位置。
text-indent:2em 表示跟随字体变化永远空出2个字符的位置。
当给它一个正数,表示向右移动指定的像素,负数表示向左移动指定的像素(这样可以将一些字符隐藏起来,不希望用户看见,但搜索引擎可以看见)
8、行高
在css中没有直接提供设置行间距方式,可以通过使用设置行高的方式来设置。
line-height:设置行高。行高类似上学时的单线本,单线本是一行一行的,线与线之间的距离就是行高,网页中文字也是处在两行之间去显示,默认垂直居中显示。
所以行间距(文字之间的行间距)=行高-字体大小。从上到下:行的横线—线与第1行文字的间距—第1行文字—线与第1行文字的间距—行的横线—线与第2行文字间距—第2行
文字—线与第2行文字的间距—行的横线。行高指2个横线之间的距离,行间距指两行文字之间的距离。
行高可以接受一个像素或者百分数。百分数是相对于字体的大小去计算
行高也可以指定数字n,则行高会设置字体大小的n倍。
对于单行文本,可将行高设置与父元素一样,这样可以在父元素垂直居中。原理是文字在两行之间默认垂直居中。
写法:font:30px/30px 表示字体30px,行高30px,若不指定,有默认值
转载于:https://www.cnblogs.com/ID-qingxin/p/10986530.html
[19/06/06-星期四] HTML基础_文本标签、列表(有序、无序、定义)、文本格式化(单位、字体、大小写、文本修饰、间距、对齐文本)...相关推荐
- AI公开课:19.03.06何晓冬博士《自然语言与多模态交互前沿技术》课堂笔记以及个人感悟
AI公开课:19.03.06何晓冬博士<自然语言与多模态交互前沿技术>课堂笔记以及个人感悟 导读:AI与产业界结合,算法还是很重要的. 计算机能不能思考?会不会思考?把哲学问题转为科学问题 ...
- (06)Vivado约束基础
(06)Vivado约束基础 1 文章目录 1)文章目录 2)时序约束引言 3)FPGA时序约束课程介绍 4)Vivado约束基础 5)技术交流 6)参考资料 2 时序约束引言 1)什么是静态时序分析 ...
- 计算机应用制作ppt,计算机应用基础_幻灯片制作.ppt
计算机应用基础_幻灯片制作.ppt (37页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 14.90 积分 多媒体演示文稿 PowperPoint的制作* ...
- 华南理工计算机基础知识题,华南理工_计算机应用基础_随堂练习答案(2017年)
华南理工_计算机应用基础_随堂练习答案(2017年) (18页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 19.9 积分 . . . .华南理工-计算 ...
- python基础_格式化输出(%用法和format用法)(转载)
python基础_格式化输出(%用法和format用法) 目录 %用法 format用法 %用法 1.整数的输出 %o -- oct 八进制 %d -- dec 十进制 %x -- hex 十六进制 ...
- 【转】傅里叶分析之掐死教程(完整版)更新于2014.06.06
转自:傅里叶分析之掐死教程(完整版)更新于2014.06.06 - 知乎 作 者:韩 昊 知 乎:Heinrich 微 博:@花生油工人 知乎专栏:与时间无关的故事 谨以此文献给大连海事大学的吴楠老师 ...
- [转载]傅里叶分析之掐死教程(完整版)更新于2014.06.06 - 与时间无关的故事 - 知乎专栏...
傅里叶分析之掐死教程(完整版)更新于2014.06.06 Heinrich 作 者:韩 昊 知 乎:Heinrich 微 博:@花生油工人 知乎专栏:与时间无关的故事 谨以此文献给大连海事大学的吴楠老 ...
- 计算机应用有作业吗,计算机应用基础_作业1
计算机应用基础_作业1 (10页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 11.90 积分 . . .选择题1(5分).下列关于计算机外部设备的说法 ...
- 计算机网络——网络基础_网络命令的使用(配置主机IP、ipconfig、ping、tracert、arp实战)
实验二 网络基础_网络命令的使用 一.配置主机的IP地址 实验目的 1.能打开Windows 10的命令窗口,在窗口中执行命令. 2.掌握IP设置的基本方法. 实验装置和工具 一台连入本地局域网或互 ...
最新文章
- 你和你的好友,正在免费帮微信训练神经网络
- 打造开发者的win7
- IP Precedence DSCP、TOS
- ajax请求是宏任务还是微任务_微服务-如何解决链路追踪问题
- c语言 申请1k内存,怎么解决函数内申请内存,函数外释放的问题
- c6011取消对null指针的引用_C/C++学习笔记——C提高:指针强化
- C++11新特性之右值引用
- app嵌入jsp页面的项目工作量_好程序员Java学习路线分享jsp为什么用的不多了
- Oracle统计某一年中的1-12个月的数据总和
- 利用new Object创建对象
- OpenCV之滑动条的创建和使用
- windows-更新包
- 汽车洒水器的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告
- HDU-4747 Mex
- LDN的蓝牙双模键盘帮助文档
- 网吧游戏更新与保护解决方案
- Perl_Tkx_Canvas绘图功能函数介绍
- drawArc 画扇形 画弧线
- Android项目猜纸牌游戏之一 界面设计和资源文件的设计
- 21个小故事,21个启示