[已收纳]网页文本基础笔记

15195775117 · 发表于 2019-11-8 17:04:07

登录后查看更多精彩内容~

您需要登录才可以下载或查看，没有帐号？立即注册

x

本帖最后由 15195775117 于 2021-2-13 19:19 编辑

HTML中有很多基础文本设置功能：
标题级别、横线分割线、粗体、斜体、下划线、删除线、换行、上下标、居中....

其中，
段落<p>可取代换行<br>，
还有包含式写法：<p>吃<big>苹果</big>！</p>
360截图20191108164845537.jpg

用<strong><em>代替<b>
<i><em>都是斜体
标签嵌套多级缩小：
<small>小<small>更小<small>最小</small></small></small>
360截图20191108165454881.jpg

<ul>
<li>第1条：XXXX</li>
<li>第2条：XXXX</li>
<li>第3条：XXXX</li>
</ul>

360截图20191108170211359.jpg

参考格式：

<!DOCTYPE html>
<html dir ="ltr" xml:lang="zh-CN">
<meta charset="UTF-8">
<title>文档标题</title>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

<hr>
<b>粗体</b>
<dfn>斜体</dfn>
<i>斜体</i>
<u>下划线</u>

<br></br>
<sup>上标</sup>
<sub>下标</sub>
<center>居中</center>
<font>字体</font>
<del>删除线</del>
</html>

15195775117 · 发表于 2019-11-9 12:13:53

高亮<mark>：<p>我是<mark>传奇</mark></p>
高亮.jpg

abbr的作用：鼠标悬停注释
abbr标签的用处.jpg

15195775117 · 发表于 2019-11-9 12:29:53

无用的<time>标签

引用其他人的疑问：
学HTML5时遇到这样一个问题。我用time元素来表示时间的时候，我发现它本身没有任何的样式，而且浏览器也全部只显示标记内部的信息。这个时候我想问了：既然它只显示内部的信息，那么为什么不用div来代替呢？它的属性值的存在有何意义？或者说用time标记是为了干什么？难道仅仅是为了看代码的人懂这是标记的时间吗？求大神解答!!!

回答：
首先你要搞清楚一个概念，HTML并不是用来写页面样式的，而是用来表示一个网页的基本架构的，样式用CSS来实现
HTML5除了提出很炫的新效果以外还加强了语义化结构，其中这个time就是其中之一
用<time>来表示时间，并不是想要达到什么可见的效果，而是让网页的代码有条理，让机器——尤其是百度和谷歌的蜘蛛——能够理解你这个网页的意思。
HTML5新增的还有article、nav、header、footer.....等等等，其实现实效果都是和div一样没有效果，但是合理使用却能让页面结构更加清晰有逻辑

总结：<time>的存在，只是为了方便机器理解网页

15195775117 · 发表于 2019-11-9 12:59:06

文字加超链接：
<address>
<a href="https://www.fengniao.com/">点击进入</a>
</address>
超链接.jpg

15195775117 · 发表于 2019-11-9 15:18:38

字体设置

font可设置字体、大小、粗细等多种属性
注意：
1、字大小和字体名不可颠倒，
2、我电脑装的是“迷你简隶书”，没有“隶书”

<style type="text/css">
p{font:30px "迷你简隶书"}
</style>
<p>隶书段落</p>

字体设置.jpg

15195775117 · 发表于 2019-11-9 15:45:45

颜色设置有3种写法：
1、十六进制：p{font:2em "迷你简隶书";color:#FF0000}
2、十进制：big{color:rgb(255,0,0)}
3、百分比（不能写成小数哟）：small{color:rgb(0%,0%,100%)}

15195775117 · 发表于 2019-11-11 14:36:14

字体粗细用font-weight，赋值一般是整百，默认粗细是400，bold是700
p{font-weight:bold}=p{font-weight:700}
p{font-weight:normal}=p{font-weight:400}

斜体：p{font-style:italic}

上划线、下划线、删除线：
p{text-decoration:underline overline line-through}
划线.jpg

这样，<b><i><u>这些HTML标签就可以被取代了

15195775117 · 发表于 2019-11-11 15:27:08

左对齐：p{text-align:left}
右对齐：p{text-align:right}
居中对齐：p{text-align:center}
行距：p{line-height:2em}
首行缩进：p{text-indent:2em}

------特效------

红字绿阴影：
p{color:red;text-shadow:green 0.1em 0.1em 0.2em}
文字阴影.jpg

火焰阴影配方：
<style type="text/css">
body{background:#000;}
p{color:red;
text-shadow:0 0 4px white,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;}
</style>

火焰阴影.jpg

阳刻字特效：
p{color:#D1D1D1;
font-size:80px;
background:#CCC;
text-shadow:-1px -1px white,
1px 1px #333}

浮雕.jpg

阴刻字特效：
p{color:#D1D1D1;
font-size:80px;
background:#CCC;
text-shadow:1px 1px white,
-1px -1px #333}

阴刻字.jpg

描边：
p{color:#D1D1D1;
font-size:80px;
background:#CCC;
text-shadow:-1px 0 black,
0 1px black,
1px 0 black,
0 -1px black}

描边.jpg

外发光：
p{color:green;
font-size:80px;
background:#CCC;
text-shadow:0 0 0.2em #F87,
0 0 0.2em #F87}

外发光.jpg

		自动登录	找回密码
密码			立即注册