[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，若不指定，有默认值
[19/06/06-星期四] HTML基础_文本标签、列表(有序、无序、定义)、文本格式化(单位、字体、大小写、文本修饰、间距、对齐文本)的更多相关文章
- [19/06/09-星期日] CSS基础_示例
一.图片格式&Hack(尽量不要使用) IE6对图片png-24的透明效果不支持,IE6中背景会发灰,可以使用png-8来代替.但是使用png-8代替之后清晰度会有所下降. 使用js来解决该问 ...
- Python基础(三)——集合、有序 无序列表、函数、文件操作
1.Set集合 class set(object): """ set() -> new empty set object set(iterable) -> n ...
- JavaSE学习总结第06天_Java语言基础2 & 面向对象1
06.01 二维数组概述和格式1的讲解 二维数组概述:二维数组其实就是一个元素为一维数组的数组 格式1:数据类型[][] 变量名 = new 数据类型[m][n]; m表示这个二维数组有多少个一维 ...
- python基础_格式化输出（%用法和format用法）(转载)
python基础_格式化输出(%用法和format用法) 目录 %用法 format用法 %用法 1.整数的输出 %o -- oct 八进制%d -- dec 十进制%x -- hex 十六进制 &g ...
- SQL日期格式转换（经常用又经常忘记的东西）转载自http://www.cnblogs.com/wangyuelang0526/archive/2012/06/06/2538224.html
Select CONVERT(varchar(100), GETDATE(), 8):14:53:14Select CONVERT(varchar(100), GETDATE(), 9): 06 6 ...
- 算法基础_递归_求杨辉三角第m行第n个数字
问题描述: 算法基础_递归_求杨辉三角第m行第n个数字(m,n都从0开始) 解题源代码(这里打印出的是杨辉三角某一层的所有数字,没用大数,所以有上限,这里只写基本逻辑,要符合题意的话,把循环去掉就好) ...
- Flutter实战视频-移动电商-05.Dio基础_引入和简单的Get请求
05.Dio基础_引入和简单的Get请求 博客地址: https://jspang.com/post/FlutterShop.html#toc-4c7 第三方的http请求库叫做Dio https:/ ...
- Flutter实战视频-移动电商-08.Dio基础_伪造请求头获取数据
08.Dio基础_伪造请求头获取数据 上节课代码清楚 重新编写HomePage这个动态组件 开始写请求的方法 请求数据 .但是由于我们没加请求的头 所以没有返回数据 451就是表示请求错错误 创建请求 ...
- [Zlib]_[0基础]_[使用zlib库压缩文件]
场景: 1. WIndows上没找到系统提供的win32 api来生成zip压缩文件, 有知道的大牛麻烦留个言. 2. zlib比較经常使用,编译也方便,使用它来做压缩吧. MacOSX平台默认支持z ...
随机推荐
- ZROI 19.08.02 杂题选讲
给出\(n\)个数,用最少的\(2^k\)或\(-2^{k}\),使得能拼出所有数,输出方案.\(n,|a_i|\leq 10^5\). 显然一个绝对值最多选一次.这个性质非常强. 如果所有都是偶数, ...
- mysql 查询碎片的方法
mysql 查询碎片的方法 mysql length,engine,data_free,table_rows group by table_name order by table_rows asc; ...
- postgresql查询栅格数据范围(extent)
栅格数据: SELECT ST_Extent(rast::geometry) as bextent FROM tmean_19; 矢量数据: SELECT ST_Extent(way) as bext ...
- postman—创建collection，执行collection和批量执行
接口测试中,可以在 Postman 逐个创建请求.但当请求逐渐增多时,如果我们不采取任何措施管理,散乱的请求维护起来就比较麻烦了.这个时候我们可以创建测试集 Collection 来对这些请求进行管理 ...
- js中[]、{}、()区别
一.{ } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数体 {}表示对象.[]表示对象的属性.方法,()如果用在方法名后面,代表调用 如:var LangShen = {&quo ...
- Linux入门培训教程 linux下拷贝cp删除rm移动mv命令参数以及说明
拷贝移动删除在windows中看起来这么简单,但linux经常使用的文字界面,所以对于linux系统 下拷贝cp删除 rm 移动mv命令参数就不得不需要了解和学习了 cp 该命令的功能是将给出的文件或 ...
- XML 验证器
XML 错误会终止您的程序 XML 文档中的错误会终止你的 XML 程序. W3C 的 XML 规范声明:如果 XML 文档存在错误,那么程序就不应当继续处理这个文档.理由是,XML 软件应当轻巧,快 ...
- [luogu]P1026 统计单词个数[DP][字符串]
[luogu]P1026 统计单词个数 题目描述 给出一个长度不超过200的由小写英文字母组成的字母串(约定;该字串以每行20个字母的方式输入,且保证每行一定为20个).要求将此字母串分成k份(1&l ...
- Task的用法
创建任务 无返回值的方式 方式1: var t1 = new Task(() => TaskMethod("Task 1")); t1.Start(); Task.WaitA ...
- 初始化String,System,OutOfMemoryError
对于String, System而言,其初始化过程和 Thread一致.而对于OutOfMemoryError而言,其继承结构如下: 因此对于OutOfMemoryError,会首先将状态改为4,然后 ...