文本
标题元素
- 注意: 在一个HTML页面中最好只使用一个<h1>标题
- 因为浏览器只会抓取一个多了没用
示例代码:
<body>
<!--
标题元素 - <h1> ~ <h6>元素
* 默认效果是 <h1>显示最大 <h6>显示最小
* 默认效果是由浏览器自带样式提供 可以通过CSS进行修改
* <h1> ~ <h6> 每个标题元素是独占一行 并且是垂直排列
* 在实际开发中 - 常用的标题元素 <h1> <h2> <h3>
* 最重要的是 <h1> - 表示一级标题
* 作用: 是有利于搜索引擎抓取 - 顺序是 <title> -关键字 - <h1>
* 注意: 在一个HTML页面中最好只出现一个 <h1> 标题 (多了没用)
-->
<h1>一花一世界</h1>
<h2>一叶一孤城</h2>
<h3>娃哈哈</h3>
<h4>爽歪歪</h4>
<h5>加多宝</h5>
<h6>王老吉</h6>
</body>段落元素
示例代码:
<body>
<p>一花一世界,一叶一孤城,阿里路亚,哈哈哈哈哈哈哈,个嘎嘎嘎嘎嘎嘎嘎嘎</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad aperiam asperiores consectetur ea, ex exercitationem explicabo harum illum laboriosam laudantium, libero necessitatibus, nulla provident quae quidem rerum soluta totam.</p>
</body>效果分析图:
其他语义化元素
- < b >元素 - 表示粗体，指的是效果加粗 -> 目前多被CSS替代
- < i >元素 - 表示斜体，指的是效果倾斜 -> 目前多被CSS替代
-
上标与下标元素
- < sup >上标元素
- < sub >下标元素
- < hr >元素 - 表示水平线 -> 目前多被CSS替代
示例代码:
<body>
<p>Lorem ipsum <b>dolor sit amet</b>, consectetur adipisicing elit. Enim fuga <i>fugiat illo</i> repellat totam?</p>
<p>这就是上标元素 E=MC<sup>2</sup>公式。</p>
<p>这就是下标元素 H<sub>2</sub>O。</p>
<hr>
</body>效果示例图:
换行元素
- < br> 表示换行
- 空元素 - 只有开始元素,灭有结束元素
- < br> 是html5版本的写法
- < br /> 是html4的写法 - 不推荐使用
空白
-
注意:
- 浏览器对空个的处理 - 又称空白折叠
- 如果空格的数量是一个的话 - 那么浏览器会自动识别
- 如果空格的数量大于一个或多个的话 - 浏览器只会识别一个
- 总结: 空格多了没用,浏览器默认识别一个
示例代码:
<p>一 花 一 世 界</p>效果显示图:
语义化元素
- 备注: 不是太常用 - 因为在CSS中可以实现这些效果
示例代码:
<body>
<!-- <strong>元素 - 加粗元素(css替代) -->
<strong>一花</strong>一世界
<!-- <em>元素 - 强调元素(css替代) -->
<em>一叶</em>一孤城
<br>
<!-- <blockquote>引用元素 - 缩进效果 -->
<blockquote>
<p>这个就是传说中的缩进效果</p>
</blockquote>
<!-- <q>引用元素 - 添加双引号 -->
<p>说明：<q>这个就是传说中的添加双引号。</q></p>
<br>
<!-- <cite>引文元素 - 斜体效果 -->
<p><cite>这是传说中的斜体</cite>那里是斜体这里不是</p>
<br>
<p><dfn>还是斜体</dfn>还是那里是斜体</p>
<br>
<address>
<p>黑龙江在这里</p>
<p>地址：这里是地址</p>
</address>
</body>内容修改
- 用法:
- < del >表示删除线
- < ins >改正线
示例代码:
<p>马上出错了,<del>删除在这里</del>,<ins>改正在这里</ins>,完美</p>效果图:
字体系列
- 备选字体系列 - 用户电脑中已安装的字体
- 问题 - 必须选择使用用户电脑中存在的字体系列
- 问题 - 一般存在的字体可选数量不多
- 解决: 可以一次性指定多个字体系列 - 中间使用逗号分隔
示例代码:
<style>
h1, p{
/*
字体系列 - font-family
* 备选字体系列 - 用户电脑中已安装的字体
* 问题 - 必须选择使用用户电脑中存在的字体系列
* 问题 - 一般存在的字体可选数量不多
* 解决: 可以一次性指定多个字体系列 - 中间使用逗号分隔
*/
font-family: Consolas, "Comic Sans MS","Calibri Light";
}
</style>
</head>
<body>
<h1>一花一世界</h1>
<p>一叶一孤城</p>
</body>字体大小
- 字体大小分两个值:
- 像素值
- 百分比值 - 相对于浏览器页面默认字体大小(16px)
- 注意: 一般不建议使用相对值,因为不知道相对值的大小 - 无法确定字体到底是多大!
字体加粗
- 字体加粗 - 建议使用数字值 (原因跟字体大小相似)
font属性
- font属性 - 必须是按顺序排列否则无效
- 顺序是:
- font-style(字的斜体) - font-weight(字体加粗) - font-size(字体大小) - font-family(字体类型)
font: bold italic large serif ;文本装饰
<style>
p {
/* !* text-decoration提供下划线、上划线及删除线 */
text-decoration: line-through lightcoral dashed;
/*
备注:
* 简写属性最好按顺序写
添加线的位置 - 线的颜色 - 线的样式
!*
text-decoration-line: 表示提供的下划线、上划线及删除线
text-decoration-color: 表示线的颜色
text-decoration-style: 表示线的样式
*!*/
/*
下划线
text-decoration-line: underline;
线的颜色
text-decoration-color: lightcoral;
线的样式
text-decoration-style: dashed;*/
}
</style>
</head>
<body>
<p>一花一世界</p>
</body>行间距
- 行间距就是设置每行之间的距离
- 也可以称之为行高 - 可以实现垂直居中
示例代码:
<style>
span{
line-height: 100px;
}
/*
行间距可以说是行高 - 可以实现垂直居中
*/
</style>
</head>
<body>
<span>一花一世界</span>
<br>
<span>一花一世界</span>
</body>效果图分析:
字母间距和单词间距
- 备注: 调整字母间距允许设置汉字之间的间距
- 因为浏览器会把汉字默认成为字母
示例代码:
<style>
#d1{
/* 调整字母间距 */
letter-spacing: 20px;
}
#d2{
/* 调整单词间距 */
word-spacing: 20px;
}
#d3{
/*
注意: 调整字母间距允许设置汉字之间的间距
* 因为浏览器会把汉字默认成为字母
*/
letter-spacing: 20px;
}
</style>
</head>
<body>
<p id="d1">woshidashuaige</p>
<p id="d2">one static style</p>
<p id="d3">亚古兽变身</p>
</body>效果显示图:
水平方向对齐方式
- 注意: 浏览器默认向左对齐
示例代码:
<style>
/* 水平方向对齐方式默认 - 左对齐 */
#p1 {
/* 水平方向 - 向右对齐 */
text-align: right;
}
#p2 {
/* 水平居中对齐 */
text-align: center;
}
#p3 {
/* 两边对齐 */
text-align: justify;
}
</style>
</head>
<body>
<p>花花世界</p>
<p id="p1">一花一世界</p>
<p id="p2">一叶一孤城</p>
<p id="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam aut facere fugit ipsa iste laboriosam natus nulla, sapiente sint soluta tenetur voluptas voluptatem? Assumenda cupiditate ipsa laborum minus modi?</p>
</body>效果显示图:
垂直方向对齐方式
- 注意: 垂直方向对齐 - 是指图片的某个位置与文本对齐
示例代码:
<style>
/* 垂直方向对齐方式默认 - 底部对齐 */
img {
/* 设置图片以什么方式与文字对齐 */
vertical-align: top;
}
/*
垂直方向对齐 - 是指图片的某个位置与文本对齐
*/
</style>
</head>
<body>
<p>Lorem ipsum <img src="imgs/frame_image.svg"> dolor sit amet, consectetur adipisicing elit. </p>
</body>效果显示图:
文本缩进
- text-indent(文本缩进)
- 文本缩进效果只控制首行 - 使用像素值控制
示例代码:
<style>
p{
/*
text-indent(文本缩进)
* 文本缩进效果只控制首行 - 使用像素值控制
*/
text-indent: 40px;
}
</style>效果显示图:
文本阴影
-注意: 文本阴影设置偏移量时需要水平和垂直同时设置否则无效
示例代码:
<style>
h1{
/*
设置文本阴影效果 - 关键参数
* 水平方向的偏移量 - 左和右
* 向左偏移 - 为负值
* 向右偏移 - 为正值
* 垂直方向的偏移量 - 上和下
* 向上偏移 - 为负值
* 向下偏移 - 为正值
* 模糊程度
* 阴影的颜色
注意：
* 要么不设置水平方向和垂直方向的偏移量
* 要么同时设置水平方向和垂直方向的偏移量
设置文本阴影的值顺序
1.水平方向偏移量
2.垂直方向偏移量
3.模糊程度
4.阴影颜色
*/
text-shadow: 5px 5px 3px #00ffff;
}
</style>
</head>
<body>
<h1>一花一世界</h1>
</body>- 注意: 当需要多个阴影效果时中间用逗号隔开
示例代码:
text-shadow: 5px 5px #00FFFF,-5px -5px #33FF33;效果显示图:
文本换行
- word-break:break-all - 是强行将单词进行拆分
- 注意: 这个属性只对英文有效
示例代码:
<style>
p {
/* 为了测试效果 */
width: 100px;
height: 100px;
background-color: yellowgreen;
/*
* HTML的换行元素<br> - 人为换行(并不拆分单词)
* CSS的overflow-wrap - 强行将单词进行拆分
*/
overflow-wrap: break-word;
/* 也表示强行换行(将单词进行拆分) */
word-break: break-all;
}
</style>
</head>
<body>
<!--<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br> Alias id illum in labore laborum magni, modi non quod repudiandae tempora ullam unde! Cupiditate id ipsum maxime minus ratione? Minima, voluptates.</p>-->
<p>http://www.chinanews.com/gn/2018/07-18/8570713.shtml</p>
</body>效果显示图:
嵌入Web字体
-
CSS3新增引入Web字体
- 在当前工程中，导入指定字体文件
- 当用户访问HTML页面时，加载指定的字体文件
- 可以在HTML页面使用指定字体系列
示例代码:
<style>
/*
CSS3新增引入Web字体
* 在当前工程中，导入指定字体文件
* 当用户访问HTML页面时，加载指定的字体文件
* 可以在HTML页面使用指定字体系列
*/
/*
@font-face是CSS的一种规则
* 作用 - 用于引入Web(在线)字体
* 语法结构
@font-face {
font-family: 指定当前Web字体系列的名称
src: 指定当前Web字体文件的路径
}
不同浏览器识别的Web字体文件不同 - 全部提供
* 问题：如何同时引入多个字体文件
* 解决：多个字体文件路径之间使用逗号分隔
*/
/* 只是引入和设置名称 - 不能直接用 */
@font-face {
/* 给当前Web字体设置名称 - 尽量不用中文 - 不要和系统字体名称重复 */
font-family: FELIXTI;
/* 引入Web字体路径 - 如果引入多个时可以省略一个引入路径 */
src: url("font/FELIXTI.eot");
/* 引入多个字体文件时之间用逗号隔开 */
src: url("font/FELIXTI.eot") format("embedded-opentype"), url("font/FELIXTI.ttf") format("woff"), url("font/FELIXTI.woff") format("truetype"), url("font/FELIXTI.svg") format("svg");
}
h1 {
/* 使用上面引入的Web字体 */
font-family: FELIXTI;
}
</style>
</head>
<body>
<h1>yihuayishijie</h1>
</body>代码分析图:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。