小菜鸡的html初步教程（六--十章）
小菜鸡的第一篇博客
首先来谈谈是如何认识到自己是真的菜的：
- 我想把标题加粗 但是我只能弄出来上面的那种效果
因为我想用加粗和center语句输出标题
但是我只能输出带有加粗标识的标题就像我上面的那样
让人十分尴尬的情况（摊手）
2.昨晚本想大展宏图，根据自学的东西写一个网页，却发现meta标签
完全不知道是什么鬼东西（就上面这个）
然后想用点高级的东西，就要学习jsp
你别问我，我也不知道这个是不是jsp，我是菜鸡我啥都不知道
3.到这儿你是不是发现123这三个标签不是一起的，对，我也发现了，我写完1之后，我再点有序列表，他就给我重新生成一个1，所以后面的序号都是直接输入的，（发现阿拉伯数字在这个字体太不明显了，我加了下粗），别说 我发现这个编译器有的地方还挺好玩，比如这个 ? ? ?
我文本编译是图片里面的，不过他生成了emoji，不过注意要先有一个空格才能输入第一个表情，要不然就会是:|:(? emmmm(最后的那个是怎么生成的？？)
输出
再来一个
我终于要开始叭叭关于html5的事情了（谜之话废）
这个星期大概是从第八章 操作样式表 开始学的，然后学到了第十四章 使用CSS3进行增强（但是我发现我前面的都快忘了，所以我从第六章开始好了）
第六章
那么第六章讲了什么呢，这个就
ps：你猜猜我在百度这个图片的时候发现了什么（不简单）
再次言归正传：第六章讲的是链接，就是为一个图片，一段文字创建一个链接，或者是通过一个链接指引一个网站，图片，以便跳转（这两句话好像听起来怪怪的）操作具体如下图
Home
然后在网站中就会显示如图所示的样式，文本为home，然后点击home，他会转到相应的界面，其中target="_blank"这个是用来创建新标签页来加载链接内的内容，而不是在原界面加载新网页。
然后关于图片的引用
src指向具体图片，width height指向图片的宽和高，alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。
就像这样（我那个加载不出来 我直接用的网图，具体的链接我放在了后面）HTML 标签的 alt 属性
而后就是锚，就是对于网页的一个跳转
can id have
can id have more
其中，a标签中href就是对后面的文字定位，定位在后面的拥有同样标识符的位置，就像a中的#question-01和h1中的id=question-01，如果点击“can id have”那么界面会自动跳转到“can id have more”的位置
第七章
第七章的标题是CSS构造块，从现在开始便正式开始从html5向结合css的html转变了。
- 构造样式规则
- 为样式添加注释
- 理解继承
- 当规则发生冲突
- 属性的值
现在开始讲第一个构造样式规则，
p{
background-color:rgb(60,143,0);
font-size:1em;
padding:.5em;}/*所有使用的元素都会使用这个背景色*/
就是这样的，在
中声明此类的元素，便可以对整个body中的p进行定义，上端的定义为，为所有标签为P的元素（反正就是这个意思，我也不知道该怎么称呼）添加一个背景，样式为background-color:rgb(60,143,0); font-size:1em; padding:.5em;其中，background-color是定义背景颜色，rgbRGB(R,G,B)定义如下，取值范围为0-255或者0%-100%
| R | G | B |
|---|---|---|
| 红色 | 绿色 | 蓝色 |
| 60 | 143 | 0 |
font-size标签为字体大小，此处为1em 为正常大小，还可以定义为smaller（比上一段小），larger（比上一段大），如果是继承父类的则为inherit
padding标签为定义边距，此处为文本内容与背景上下左右均为0.5个标准长度示例如下：（第一个为.5em 第二个为5em）
2.为样式规则添加注释，这个没什么好说的
padding:.5em;}/*所有使用的元素都会使用这个背景色*/
就是/* */里面的这些东西
3.理解继承
怎么说呢，就是父类中的定义，在之类中可以继承，大概意思就是，如果我在上文的p标签中加入一个div（应该能加吧） div中的元素依旧会有背景图片，而不是光秃秃的。
4.当规则发生冲突时
具体定义为：如果两个或两个以上的规则拥有相同的特殊性，则使用后出现的规则，除非某条规则标记了！important，例如：
5.属性的值
就是各个属性的值，例如
border:none;
font-size:.875em;
width:80%;
background:url(2.jpg);
color:rgb(89,0,127);
诸如此类，其中，需要注意的是，none表示的是初始值。
RGBA是RGB的拓展，A是alpha透明度，当RGBA（R，G，B，A） 中 A的值为0时为不透明，为1时为完全透明。
HSL和HSLA的差别也是A透明度的差别，其中A代表色相（hue）S代表饱和度（saturation）L代表亮度（lightness）
第八章
第八章的标题是操作样式表，现在就开始进入外接css的阶段了，具体内容为：
- 创建外部样式表
- 链接到外部样式表
- 创建嵌入样式表
- 应用内联样式
- 样式的层叠和顺序
- 使用与媒体相关的样式表
- 借鉴他人的灵感
其实我发现html5的东西 在这个网页也能用
比如
哈哈哈哈
好的 他只是隐藏了标签，我加了一个marquee标签，在html5中可以让他滚动显示，但是在这里用不上。
1.创建外部样式表
就是在DW上创建一个css文件，内部用来存储style标签内的内容
2.链接到外部样式表
顾名思义，就是你创建了一个css文件，你需要让你的html文件链接到你创建的css文件去
无标题文档
其中rel标签的用法太多了
HTML中rel属性分析
如果想了解的话可以看看这篇文章，或者等我把他拷贝到我自己的博客中，href
指向的是你在DW上创建的CSS文件。
3.创建嵌入样式表
emmmmmm非常尴尬的是，他讲的是style标签在html文件中的使用，就不做更多的解释了
4.应用内联样式
就是不头文件中加style标签，直接在body中的标签内加(往后翻可以看到style标签)
5 .样式的层叠和排序
就是上面提到的，如果同时用了两个样式，那么以后面的样式为准。
此条代码，以后面的style为准，前面链接的样式表将会被后面的style覆盖。
6.使用与媒体相关的样式表
就是讲一些关于显示的问题，比如屏幕显示，打印显示之类的，不做讲解，如果有兴趣的话可以自行百度，
7.借鉴他人的灵感
emmmm（就和要多看书，多看看别人是怎么做的一个意思。。。。。。。）
第九章 定义选择器
CSS样式规则有两个主要部分：选择器决定要将格式化应用到哪些元素，而声明则决定要应用的格式化。这一章的学习内容为如何定义CSS选择器。
- 构造选择器
- 按名称选择元素
- 按类或ID选择元素
- 按上下文选择元素
- 选择第一个或者最后一个元素
- 选择元素的第一个字母或者第一行
- 按状态选择连接元素
- 按属性选择元素
- 指定元素组
- 组合使用选择器
1.构造选择器
h1{最简单的
}
h1 em{使用了上下文，即只能在h1中使用这个em
}
.error{所有的class=error都可以使用
}
#gaudi{ID选择器
}
a:link{伪类，即页面上还未访问的链接
}
a[title]{添加关于目标元素的属性
}
2.按名称选择元素
就是按找你已经定义好的元素，然后系统再加以利用。
3.按类或ID选择元素
和2类似
4.按上下文选择元素
这里引进了祖先意思是包含目标元素的任何元素，不管他们之间隔了多少代
article p{
color:red;}
任意article祖先的所有p元素
.architect> p{
color:red;}
仅仅选择architect类元素的子元素（不包含子子元素等）
.architect p+p{
color:red;}
相邻同胞元素结合符只选择直接跟在同胞p元素之后的元素
5.选择第一个或者最后一个子元素
li:first-child{
color:red;}
这个选择器会选择作为父元素的第一个子元素的li元素
li:last-child{
color:red;}
这个选择器会选择作为父元素的最后一个子元素的li元素
6. 选择元素的第一个字母或者第一行
p:first-letter{
color:red;}
这个选择器会选择每一个p元素的第一个字母
p:first-line{
color:red;}
这个选择器只选择每个p元素的第一行
7.按状态选择连接元素
a:link{
color:red;未被访问的呈现红色
}
a:visited{
color:orange;以访问过的呈现橙色
}
a:focus{
color:purple;链接获得焦点时（例如tab键）呈现紫色
}
a:hover{
color:green;当鼠标停留在链接上时，为绿色
}
a:active{
color:blue;当链接被激活时呈现蓝色
}
8，按属性选择元素
这个内容太多了 需要等到后面再开一篇文章
9.指定元素组
h1,h2{
color:red
}
h1{
color:red
}
h2{
color:red
}
关于选择器的简写，这俩一样的作用
10.组合使用选择器
em是嵌套在p元素中的
选择器理论上是越简单越好
这一章怎么说呢，因为知识点开始复杂化，所以可能标题与内容的联系没有之前的大，较为分散。
第十章 为文本添加样式
这一章主要内容为：为文本添加格式（废话 ?）本章每小章小标题将会适当修改，而不是原版，将会使用大量代码取代文字，建议看的时候实时将代码添加至编译器以查看实际效果
- 选择字体系列
- 指定替代字体
- 创建斜体
- 应用粗体格式
- 设置字体大小
- 设置行高
- 同时设置所有字体值
- 设置颜色
- 设置背景
- 控制间距
- 添加缩进
- 对齐文本
- 修改文本的大小写
- 使用小型大写字母
- 装饰文本
- 设置空白属性
（这个小标题数要死人的-?）、
1.选择字体
body{
font-family:Georgia;}
2.指定替代字体
body{
font-family:Georgia, "Times New Roman", Times, serif}
3.创建斜体
body{
font-style:italic;
}
取消斜体
body{
font-style:normal;
}
4.应用粗体格式
body{
font-weight:bold;
}
取消斜体
body{
font-weight:normal;
}
5.设置字体大小
body{
font-size:35px;使用像素值指定大小
font-size:50%;使用百分比指定大小
}
6.设置行高
body{
font-weight:normal;
line-height:1.65;为1.65倍的默认行高
}
7.同时设置所有字体值
body{
font:100% Geneva,Tahoma,Verdana,sans-serif;
}
下图的这个例子包含了所有的可能性
body{
font:italic samll-caps bold 100% Geneva,Tahoma,Verdana,sans-serif;
}
8.设置颜色
见9-7
9.设置背景
body{
background-color:#88b2d2;背景色
color:#fff;文本颜色 与背景区分开
background-image:url(2.jpg);加入背景图片
background-repeat:repeat-x;在x方向上不断重复
background-repeat:repeat-y;在y方向上不断重复
background-repeat:no-repeat;不重复
background-repeat:repeat;在全屏幕不断重复
background-position:left bottom;图片从左下方开始重复
background-position:right top;图片从右上方开始重复
background-attachment:fixed;附着在浏览器窗口
background-attachment:sroll;访问者滚动页面时背景图像会移动
background-attachment:local;只有访问者滚动背景图像所在的元素时，背景图像才会移动
background-size:contain;铺满屏幕
background-size:cover;把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
font:100% Georgia, "Times New Roman", Times, serif；
}
background-size
background-attachment
10.控制间距
div{
word-spacing:5px;字间距
letter-spacing:0.4em;行间距
}
11.添加缩进
div{
text-indent:2em; 添加缩进，即文本前的空格
}
12.对齐文本
h1{
text-align:center;文本居中
text-align:left;文本左对齐
text-align:right;文本右对齐
text-align:justify;文本两端对齐
}
13.修改文本的大小写
h2{
text-transform:uppercase;所有字母大写
text-transform:lowercase;所有字母小写
text-transform:none;让文本保持初始值
}
14。使用小型大写字母
h3{
font-variant:small-caps;使用小型大写字母
font-variant:none;取消
}
15.装饰文本
h4{
text-decoration:overline;添加下划线
text-decoration:none;取消
}
16.设置空白属性
h5{
white-space:pre;显示文本中所有的空格和回车
white-space:nowrap;文本全部显示在同一行
white-space:normal;按正常方式处理空格
}
好了
本来打算一口气到第十四章的，花了上午加一个下午只更到了第十章，更了88面，还有一百面。下篇文章再见（应该没人在乎我这个更新的吧）