颜色
十六进制颜色表示方法#FFFFFF(其中前两个FF对应红色(R),中间两个FF对应绿色(G),最后两个FF对应蓝色(B))。范围为#000000FFFFFF等同于#000#FFF，可以在网上查阅各种十六制颜色。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>google demo</title>
</head>
<body>
<!-- 以下是行内样式，只能单独设置各个h1的css样式 -->
<h1 style="color: #ab46e6;">G</h1>
<h1 style="color: #042f42;">O</h1>
<h1 style="color: #efbdac;">O</h1>
<h1 style="color: #7df339">G</h1>
<h1 style="color: #ec3746">L</h1>
<h1 style="color: #f39c2b">E</h1>
</body>
</html>
RGB颜色
rgb(255,221,100),范围为rgb(0,0,0)~rgb(255,255,255)。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>google demo</title>
<style>
/* 以下是内部样式，h1为标签选择器，选择body中为h1标签的内容并为其设置css样式 */
h1{
color: rgb(241, 220, 198);
}
</style>
</head>
<body>
<h1>G</h1>
<h1>O</h1>
<h1>O</h1>
<h1>G</h1>
<h1>L</h1>
<h1>E</h1>
</body>
</html>
RGBA颜色
rgba(241,220,138,0.2),此种颜色表示方法可设置颜色的透明度，透明度为最后一位，范围在01(完全透明完全不透明)之间。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>rgba demo</title>
<style>
</style>
</head>
<body>
<p style="color:rgba(10, 71, 109, 0.5);">Lorem ipsum dolor sit amet.</p>
</body>
</html>
字体
技巧：将字体的height与line-height设置为相同高度，可使字体垂直居中。
五大字体系列：
1.sans-serif /,sæn 'serif/
无衬线字体：笔画粗细一致，在计算机屏幕上显示更容易阅读
2.serif /'sɛrɪf/
有衬线字体：笔画的末端都有装饰性的线条或凸起，我们常常在报纸的正文中看到这样的字体
3.Monospace /'mɑnospes/
等宽字体：每个字母的宽度一致，用于显示软件代码示例（VS Code 中的字体设置用的就是这个字体系列）
4.Cursive /'kɜːsɪv/
手写体
5.fantasy /'fæntəsi/
设计感较强的装饰性字体
e1b2a974-ff92-4ac7-98fe-cce401334a8e.jpg
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字 demo</title>
<style>
h1{
/* font-style--定义字体风格，斜体一般推荐是用italic，浏览器找到设置的字体，首先查询此种字体有没有原本斜体风格的样式，如果有则直接显示，如果没有则会将字体在显示之前变为斜体，再显示在页面中。 */
font-style: italic;
font-size: 30px;
color: #3d40f0;
text-align: center;
}
p{
/* font-family各部分解释：第一个值为显示英文是所采用的字体，第二个值是中文所采用的字体，第三个值是字体系列(当用户的电脑中没有安装所设置的字体时，浏览器会自动从字体系列中找一个字体样式来显示文本) */
/* 字体有5个系列：sans-serif(无衬线字体)、serif(无衬线字体)、Monospace(等宽字体)、Cursive(手写字体)、fantasy(设计感较强的装饰字体) */
font-family: Arial, "微软雅黑", sans-serif;
text-decoration: #3d40f0;
text-indent: 2em;
line-height: 150%;
/* font-weight可以将字体设置为粗体bold(700)，稍细lighter(200),正常normal,其他的大小浏览器不支持 */
font-weight: lighter;
}
</style>
</head>
<body>
<h1>title</h1>
<p>浏览器默认字体大小为16像素，行高设置为150%，则相对于body的默认字体大小的1.5倍行高。Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque debitis, maxime ducimus illo dolor, recusandae voluptatem fugiat eligendi obcaecati laboriosam repellat iusto animi cum, ex consectetur exercitationem blanditiis est explicabo! A tenetur quia fuga, maxime, suscipit ratione cupiditate fugiat esse necessitatibus facere, illum reprehenderit ut corrupti veritatis nostrum sequi ipsa.</p>
</body>
</html>
Unicode字体
在 CSS 中设置字体名称，直接写中文是可以的。但是有些浏览器会解释不了中文字体样式，导致识别字体乱码，显示不了正确的字体。
方案一： 使用英文，比如 font-family:"Microsoft Yahei"。
方案二：使用 Unicode 编码， font-family: "\5FAE\8F6F\96C5\9ED1"，表示设置字体为“微软雅黑”。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字-02 demo</title>
<style>
/* 将字体的各个样式写在同一行 */
.a{
/* 将字体样式写在同一行，须按以下顺序写字体的样式--font:font-style font-weight font-size/line-height font-family。其中font-size和font-family为必写项，其他的可以省略，但这两项不能省略 */
font: italic, bold, 20px/30px, "黑体";
text-align: center;
}
.b{
/* 这是字体格式的最小集合 */
font: 30px, "微软雅黑";
}
h1{
/* 字体名为中文，或字体名中间用空格连接时，或用unicode编码代替字体名时，必须用" "括起来 */
font: 25px, "simsun";
}
</style>
</head>
<body>
<p class="a">Lorem ipsum dolor, sit amet consectetur adipisicing elit. In quae natus soluta nesciunt. In vero doloremque dicta sit, nostrum ducimus?</p>
<p class="b">yoyo,切克闹</p>
<h1>但在开发时，字体名最好用英文或字符编码来表示</h1>
</body>
</html>
image.png
字体的其他样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字-03 demo</title>
<style>
p{
/* capitalize--每个单词的首字母大写 */
/* 除了capitalize外，还有lowercase--每个单词都变为小写，uppercase--每个单词都变为大写 */
text-transform: capitalize;
/* text-transform: lowercase; */
/* text-transform: uppercase; */
/* 字符间距 */
letter-spacing: 0.2em;
/* 单词之间的间距 */
word-spacing: 1.5em;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, ad!</p>
</body>
</html>
HTML的实体
image.png
<和>符号的实体转换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> < and > demo</title>
</head>
<body>
<h2>HTML实体</h2>
<p>前端课程</p>
<p>第一节<p>标签的使用</p>
</body>
</html>
空格实体转换
空格的实体。如果在开发环境中连续敲10个空格，在显示该页面之前，浏览器会删掉其中9个空格，如需连续几个空格，则需要使用空格实体。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>这是一段测试 文字</p>
<p>这是一段测试 文字</p>
</body>
</html>
版权声明实体转换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>版权 demo</title>
</head>
<body>
<p>©2018课程版权均归谷粒学院所有 京ICP备17055252号</p>
<h3>实现©的实体转换</h3>
<p>©2018课程版权均归谷粒学院所有 京ICP备17055252号</p>
</body>
</html>
名词解释
Structure:结构。通常指一个网页的HTML部分。
Presentation:表现。通常指一个网页的CSS部分。
Bhavior:行为。通常指一个网页的JavaScript部分。
C/S：Client/Service--客户端/服务器。此种架构用于桌面程序。特点：使用前必须安装，更新维护复杂，无法跨平台（如：windows、linux）。平台也就是系统的意思。
B/S：Browser/Service--浏览器/服务器。此种架构用于浏览器。特点：使用浏览器作为客户端，更新维护不需要在客户端操作，可以跨平台。
WWW(World Wide Web):万维网，也称W3C。
web page:网页。用超链接连接起来的文档。
HTML：Hyper Text Markup Language--超文本标记语言。
SEO：搜索引擎优化。
XML：EXtensible Markup Language--可扩展标记语言。被设计用来传输和存储数据。
parent：父标签。
child：孩子标签。
children：孩子标签的复数。
sobling：兄弟标签。
网友评论