搭建静态页面
1.文档类型声明
<!doctype html>
2.定义标签
1.页面头部
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>标题</title>
<link rel="stylesheet" type="text/css" href=""/>
<script src=""></script>
</head>
注意 ：用 <link> 标签引入外部链接css，用 <script src="">``</script>标签引入外部链接js。
使用这种外部引入的方法，可以使结构和样式分离，便于维护，代码可重用性高。
2.页面主题
<body></body> //主题内容写在body里面
在body里面，有多个html标签和语义化标签包裹着网页的内容，例如标题标签 <h1> ~ <h6> ，无序列表标签 <ul> <li>，有序列表 <ol> <li> 等，还有语义化标签 <header> </header>、<footer> </footer> 标签等，在 <body> 中我们还定义 <script> 书写控制行为的JavaScript语句
ps:补充为什么要语义化标签：
标签语义化：
- 可以方便代码的阅读和维护
- 同时让网络爬虫更好的解析从而更好的分析其内容
- 更好的优化引擎
如何做到标签语义化：个人理解是，首先，网页的HTML主要作用在网页的结构上面，W3C规范定义了很多标签，标签都具有它的意义，例如： <p> 定义的是一个段落 <h1>~<h6>分别定义了标题的大小；这些一个一个的标签都有它的使用用途，根据相应的定义来使用它，使得我们能够有上图的一些结构方面语义化后带来的网页优势。
3.html 的基本标签讲解
html需要注意点:
html不是一种变成语言，是一种标志语言- 标记语言是由一套标识标签组成的
html使用标签来描述网页html的结构如下：
<html>
<head></head>
<body></body>
</html>
- html的标签基本都是成对出现的，但也有个别列外
<br> //换行
<hr> //在页面上输出一条横线
<meta> //提供有关某个HTML元素的元信息
<img> //图片标签
<input> //输入框标签
<link> //链接样式表
- html的一些标签可以对文本产生效果
<strong> //用于强调文本，强度更深，表示重要文本—>用于SEO优化
<b> //只是视觉加粗效果—>单纯为了产生加粗
<em> // em用于强调文本
<i> // i只是视觉斜体效果
<strong>比<em>强调更强
- 特殊符号：
// 空格
> // 大于号
<； // 小于号
"； // 引号
© // 版权号
- 功能标签
span //对被用来组合文档中的行内元素,注意：span没有固定的格式表现，当对它应用样式时，才会产生视觉上的变化
pre //文字的格式按源码的排版来显示，我们称之为预处理格式
a //页面跳转，a 里面的href 属性用来接收跳转页面，target表示跳转的方式
target属性：
_self(在原来页面打开)
_blank（新窗口打开）
_top（打开时忽略所有的框架）
_parent（在父窗口中打开）
marquee //可以创建一个内容滚动效果里面有 direction和loop属性
direction 表示滚动方向，取值有（left,right,up,down,默认left）
loop表示滚动循环的次数，默认为无限循环
- img图片标签与路径
- 常见图片格式 jpg png gif
Gif （只支持全透明）
Jpeg /jpg
Png 半/全透明都支持
图片标签写法 ：
<img src="" alt="" width="" height="" />
图片四要素：
- src="" 图片路径.
- alt="" 图片含义
- width="" 图片宽度 和图片大小保持一致
- height="" 图片高度 和图片大小保持一致
- title=""
路径知识：
| 路径 | 介绍 | |
|---|---|---|
| 相对路径 | (Relative Path) 相对于该文件的路径； | ./ test.txt 代表了test.txt文件的相对路径 |
| 绝对路径 | (Absolute Path) 从磁盘出发的路径； | C:\xyz\test.txt 代表了test.txt文件的绝对路径 |
<img src="" align="" /> align属性–设置图片与后面文字的位置的关系值–top、bottom、middle、absmiddle、left、right
在静态页面中：
/开头表示根目录；
./表示当前目录；（斜画线前面一个点）
…/上级目录；（斜画线前面两个点）
直接用文件名不带/也表示同一目录
这些都是相对于当前文件的位置来说的，如果用绝对路径的话就是写全了。
- 列表标签
| 名称 | 标签 | 子标签 |
|---|---|---|
| 无序列表 | ul | li |
| 有序列表 | ol | li |
| 定义列表 | dl | dt、dd |
- 行内元素与块级元素
1）块级元素：有物理属性，width,height写值起作用，宽度自动填满其父元素宽度，占据一行。
2）行内元素：没有物理属性。但是margin，padding值有用。不占据一行，后边可以有兄弟元素。
3）行内元素和块级元素进行转换的话是给其加上display这个属性。行内→块级，display:block; 块级→行内，display：inline;
4）float就是隐性的把行内元素转化为块元素，对内的话拥有了物理特性。对外则还是是行内元素的属性，不占据一行。position也可以使行内元素转换为块级元素。
…
总结
非可视化标签：head meta style script …
可视化标签：img div span a ul li…
只有可视化标签，才能用css改变它
单标签：meta link base img input br hr …
双标签：html head body div a p span ul li ol dl ….
CSS：
1）网页常用字体颜色——很深的灰：#222（深）/ #333（常用）；深灰：#666；浅灰：#999；很浅的灰：#ccc。
2）css样式重置，将浏览器的默认样式去掉，更准确说就是通过重新定义标签样式，如 * { margin:0px; padding:0px; list-style:none; }
3）css优先级问题——!important：10000；行间样式：1000；ID选择器的特殊性值：100；类选择器、属性选择器或伪类：10；元素和伪元素：1。当不同选择器的样式设置有冲突时，会采用权重高的选择器设置样式。
4）css精灵——将一个页面涉及到的所有零星图片都包含到一张大图中去，利用CSS的background-position可以用数字精确的定位出背景图片的位置，不用多次向服务器发送请求，减少服务器压力。
5）display:none 和 visibility:hidden 区别——display:none; 脱离文档流，所以不占据页面空间；visibility:hidden; 只是改变可见性，并不脱离文档流，空间依然占据。
CSS（层叠样式表）是用于对网页样式的静态的修饰，是网页的表现标准。
我们通常使用CSS+div进行布局：div没有实际的语义
- css样式优先级顺序
CSS选择器如下：
1. 标签名选择器 div { color：Red;} /即页面中的各个标签名的css样式
2.类选择器 .divClass {color:Red;} /即定义的每个标签的class 中的css样式
3.ID选择器 #myDiv {color:Red;} /即页面中的标签的id
4.后代选择器（类选择器的后代选择器） .divClass span { color:Red;} /即多个选择器以逗号的格式分隔 命名找到准确的标签
5.群组选择器 div,span,img {color:Red} /即具有相同样式的标签分组显示
他们的优先级顺序如下：
！important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符
根据CSS规范，具体性越明确的样式规则，权重值越高
id选择器权重=100
类选择器权重=10
标签选择器权重=1
选择器相加最后的权重越高，优先级越高
/例如：id选择器+标签选贼=100+1=101/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
color: green;
}
.ni{
color: red;
}
div .ni{
color: pink;
}
.ni .p1 .u .si a{
color: black;
}
a{
color: #ccc;
}
</style>
</head>
<body>
<div class="ni">
<div class="p1">
<ul class="u">
<li class="si"><a>world</a></li>
</ul>
</div>
</div>
</body>
</html>
- CSS 伪元素用于向某些选择器设置特殊效果。
为什么要用伪元素
-
伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。
-
与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
css的伪类/元素类型
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| :link | a:link | 选择所有未访问链接 |
| :visited | a:visited | 选择所有访问过的链接 |
| :active | a:active | 选择正在活动的链接 |
| :hover | a:hover | 把鼠标放在连接上的状态 |
| :focus | input:focus | 选择元素输入后具有焦点 |
| :first-letter | p:first-letter | 选择每个<p>元素的第一个字母 |
| :first-line | p:first-line | 选择每个<p>元素的第一行 |
| :first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的<p>元素 |
| :before | p:before | 在每个<p>元素之前插入内容 |
| :after | p:after | 在每个<p>元素之后插入内容 |
| :lang(language) | p:lang(it) | 为<p>元素的lang属性选择一个开始值 |
- 文字属性
Font：
-
font-family : 宋体,sans-serif; /文字字体/
-
font-size : 9pt; /文字大小/
-
font-style:italic; /文字斜体/
-
font-variant:small-caps; /小字体/
-
font-weight:bold; /文字粗体/
设置字体颜色：
- color : #999999; /文字颜色/
设置字间距和行高：
- letter-spacing : 1pt; /字间距离/
- line-height : 200%; /设置行高/
vertical:
- vertical-align:sub; /下标字/
- vertical-align:super; /上标字/
text:
1.text-decoration: ;
- text-decoration:line-through; /加删除线/
- text-decoration: overline; /加顶线/
- text-decoration:underline; /加下划线/
- text-decoration:none; /删除链接下划线/
2.text-transform: ;
- text-transform : capitalize; /首字大写/
- text-transform : uppercase; /英文大写/
- text-transform : lowercase; /英文小写/
3.text-align: ;
- text-align:right; /文字右对齐/
- text-align:left; /文字左对齐/
- text-align:center; /文字居中对齐/
- text-align:justify; /文字分散对齐/
4.text-indent:2em；/首行缩进/
CSS文字外观属性总结
4. 定位
| 定位 | 样式 |
|---|---|
| 相对定位 | position:relative |
| 绝对定位 | position: absolute |
| 固定定位 | position: fixed |
- 布局
- 文本溢出的解决方法 ：
给属性添加一个overflow:hidden; - 改变盒子的顺序: z-index
7553
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
