文本标题元素注意: 在一个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>代码分析图:
