整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
绍得比较粗略,大家只要有个印象就可以,后边我们会在详细的在具体的前段开发项目中来讲解.
一 css3伪类
css3中的伪类允许我们在不适用于JavaScript等脚本的情况下去设置web页面中某些特定的元素的属性.
伪类通常以":"(冒号)开头. :first-child和:last-child是较为常用的伪类.
:first-child将会匹配该元素中的第一个子元素.
html代码:
<div id="parent">
<p>又见雪飘过</p>
<p>飘于伤心记忆中</p>
<p>让我再想你</p>
<p>却掀起我的痛</p>
</div>
css代码:
#parent p:first-child{color:green; text-decoration:underline; }
执行结果如下:
:last-child则是选取最后一个元素.
二 伪元素
伪元素用于选取元素的特定部分.
在css中有五个伪元素,每个都以一个双冒号(::)开头
::first-line 选择器中文本的第一行
::first-letter 选择器中文本的第一个字母
::selection 选择用户选择的元素部分
::before 在元素之前插入一些内容
::after 在元素之后插入一些内容
在下面的例子中,::first-line伪元素用于为文本的第一行设置样式.
html代码:
<div id="parent1">
<p>早经分了手
<br>为何热爱尚情重
<br>独过追忆岁月
<br>或许此生不会懂</p>
</div>
css代码:
#parent1 p::first-line{color:#AE4141;}
效果如下:
::selection伪元素用于对选定的文本进行设置样式.
css代码:
#parent1 p::-webkit-selection{background:#AE4141; color:#fff;}
#parent1 p::selection{background:#AE4141; color:#fff;}
效果如下:
使用了浏览器前缀-webkit-.有的浏览器会不支持::seleciton伪元素
使用::before和::after伪元素允许我们向页面添加各种各样的内容.
在下面的例子中,::before伪元素用于在段落之前添加图像.
html代码:
<div class="parent">
<p>又再想起你</p>
<p>抱拥飘飘白雪中</p>
<p>让你心中暖</p>
<p>去驱走我冰冻</p>
</div>
css代码:
div.parent p::before{ content:url("before.jpg");}
效果如下:
请注意样式中使用的content关键字
::after则会在末尾增加样式.
三 css3自动换行
word-wrap属性允许对长单词进行自动换行处理.它有两个属性值:normal和break-word.
html代码:
<p id="word-wrap">冷风催我醒,原来共你是场梦,像那飘飘雪泪下,弄湿冷清的晚空.原来是那么深爱你.</p>
css代码:
#word-wrap{width:100px; height:100px; border:2px solid #000000; word-wrap:normal; }
效果如下:
由于是段落内容是中文,所以word-wrap:normal; 和word-wrap:break-word; 效果是一样的都会自动换行.
四 @font-face
@font-face允许将自定义字体加载到网页中.借助于此规则,设计不再局限于安装在用户计算机上的字体
在IE8和更低版本中,url必须指向Embedded OpenType(eot)文件,而firefox,chrome等支持True Type(ttf)字体和OpenType(otf)字体.
定义一个名为"text"的新字体
@font-face{font-family:"text"; src:url("text.otf"); }
然后这个新的字体可以使用了如p{font-family:text;}
HTML文本格式化通常使用一系列特定的标签来改变文本的外观或结构。这些标签可以控制文本的字体、大小、颜色、对齐方式等，也可以用来标记文本的逻辑结构（如段落、标题、列表等）。除了这些基本的格式化标签，HTML还支持通过CSS（级联样式表）来更精细和灵活地控制文本的格式和样式。
参考文档：https://www.cjavapy.com/article/3306/
HTML中，文本格式化和结构化主要通过一系列标签来完成，其中标题（Headings）标签是最常用于定义文本格式的元素之一。HTML提供了六级标题标签，从 <h1> 到 <h6>，<h1> 表示最高级别的标题，而 <h6> 表示最低级别的标题。这些标题标签不仅帮助改善网页的结构和可读性，还对搜索引擎优化（SEO）至关重要，因为搜索引擎使用这些标签来识别网页上的不同部分和内容的层次结构。每个级别的标题都有默认的样式，通常是不同的大小和加粗，以显示它们的层次结构
<h1>这是一个 H1 标题</h1>
<h2>这是一个 H2 标题</h2>
<h3>这是一个 H3 标题</h3>
<h4>这是一个 H4 标题</h4>
<h5>这是一个 H5 标题</h5>
<h6>这是一个 H6 标题</h6>HTML中，文本格式化通常涉及使用特定的标签来控制文本的显示方式。段落和换行是两个基本但非常重要的文本格式化概念。用<p>创建段落，<br>插入换行。
1）段落 (<p> 标签)
<p> 标签自带上下边距，用以区分不同的段落。
<p>这是一个段落。</p>
<p>这是另一个段落。</p>2）换行 (<br> 标签)
<br> 标签只是简单地添加一个换行点，不添加任何额外的空间或边距，并且通常用于诗歌或地址等需要精确控制换行位置的文本。
这是文本行的开始。<br>这是新的一行，但在同一个段落内。使用<em>和<strong>强调文本。HTML中，强调文本通常使用 <em> 和 <strong> 标签来实现。这两个标签既有语义意义，也影响文本的表现形式。
<em> 标签用于表示强调文本，通常表现为斜体，用以表示文本的轻度强调。
<strong> 标签用于表示更强烈的强调，通常表现为加粗，表示文本的高度强调。
<p>This is <em>emphasized</em> text.</p>
<p>This is <strong>strongly emphasized</strong> text.</p>HTML 提供了两种主要的列表类型：有序列表（<ol>）和无序列表（<ul>）。两种类型都使用列表项（<li>）来定义列表中的实际项。
1）有序列表
有序列表以 <ol> 标签开始。每个列表项都放在 <li> 标签内。列表是有序的，也就是每个项目都是编号的。这适用于项目顺序很重要的列表，如食谱或待办事项列表。
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>2）无序列表
无序列表以 <ul> 标签开始。像有序列表一样，每个项都放在 <li> 标签内。然而，无序列表中的项目不是编号的。使用圆点符号进行表示。这适用于项目顺序不重要的列表，如购物清单。
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul><!DOCTYPE html>
<html>
<head>
<title>文本格式化示例</title>
</head>
<body>
<h1>HTML 文本格式化</h1>
<p>这是一个<em>斜体</em>和<strong>加粗</strong>的示例。</p>
<p><u>这段文本下划线</u>和<s>这段文本是删除线</s>。</p>
<p>化学水分子公式为H<sub>2</sub>O，E=mc<sup>2</sup>。</p>
<pre>
这是预格式化文本，
保留了空格和
换行符。
</pre>
<blockquote>这是一个长引用的示例，可能包含多个段落。</blockquote>
<p>这是一个<q>短引用</q>的示例。</p>
<p>使用<code>HTML</code>和<code>CSS</code>进行网页设计。</p>
<p>按<kbd>Ctrl</kbd> + <kbd>C</kbd>复制文本。</p>
<p><samp>这是计算机程序的输出。</samp></p>
<p>在JavaScript中，<var>x</var>可以作为变量。</p>
</body>
</html>参考文档：https://www.cjavapy.com/article/3306/
段落是通过 <p> 标签定义的。
实际例子
<p>This is a paragraph</p> <p>This is another paragraph</p>
注释：浏览器会自动地在段落的前后添加空行。（<p> 是块级元素）
提示：使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它！（但是不要用 <br /> 标签去创建列表。）
不要忘记结束标签
即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来：
实际例子
<p>This is a paragraph <p>This is another paragraph
上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。
注释：在未来的 HTML 版本中，不允许省略结束标签。（现在开发已经不允许了）
提示：通过结束标签来关闭 HTML 是一种经得起未来考验的 HTML 编写方法。清楚地标记某个元素在何处开始，并在何处结束，不论对您还是对浏览器来说，都会使代码更容易理解。
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：
<p>This is<br />a para<br />graph with line breaks</p>
<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
<br> 还是 <br />
你会发现 <br> 与 <br /> 很相似。
在 XHTML、XML 以及未来的 HTML 版本中，不允许使用没有结束标签（闭合标签）的 HTML 元素。
即使 <br> 在所有浏览器中的显示都没有问题，使用 <br /> 也是更长远的保障。
我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。
对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
标签 描述
<p> 定义段落。
<br /> 插入单个折行（换行）。
如果您觉得有用，麻烦点个赞，支持一下！！
欢迎提问与建议。
*请认真填写需求信息，我们会在24小时内与您取得联系。
