小菜鸡的html初步教程(六--十章)

小菜鸡的第一篇博客

首先来谈谈是如何认识到自己是真的菜的:

  1. 我想把标题加粗 但是我只能弄出来上面的那种效果
    因为我想用加粗和center语句输出
    标题

    但是我只能输出带有加粗标识的标题就像我上面的那样

这就是在这里插入图片描述让人十分尴尬的情况(摊手)

2.昨晚本想大展宏图,根据自学的东西写一个网页,却发现meta标签
<meta name="viewport" content="width=device-width, initial-scale=1">
完全不知道是什么鬼东西(就上面这个)
然后想用点高级的东西,就要学习jsp

<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

你别问我,我也不知道这个是不是jsp,我是菜鸡我啥都不知道
3.到这儿你是不是发现123这三个标签不是一起的,对,我也发现了,我写完1之后,我再点有序列表,他就给我重新生成一个1,所以后面的序号都是直接输入的,(发现阿拉伯数字在这个字体太不明显了,我加了下粗),别说 我发现这个编译器有的地方还挺好玩,比如这个 😐 😃 😦
在这里插入图片描述
我文本编译是图片里面的,不过他生成了emoji,不过注意要先有一个空格才能输入第一个表情,要不然就会是:|:(😃 emmmm(最后的那个是怎么生成的??)
输出

言归正传
好的,我明白了,必须在这个标题的前面输入“输出”这俩字,它才能正常显示(有毒吧)。啊啊 我终于明白了,要在前面输入#加space键 这样就能生成一级标题了(就是现在的标题的效果)嘿嘿嘿(mdzz)
再来一个
言归正传

我终于要开始叭叭关于html5的事情了(谜之话废)
这个星期大概是从第八章 操作样式表 开始学的,然后学到了第十四章 使用CSS3进行增强(但是我发现我前面的都快忘了,所以我从第六章开始好了)

第六章

那么第六章讲了什么呢,这个就
在这里插入图片描述
ps:你猜猜我在百度这个图片的时候发现了什么(不简单)
在这里插入图片描述
再次言归正传:第六章讲的是链接,就是为一个图片,一段文字创建一个链接,或者是通过一个链接指引一个网站,图片,以便跳转(这两句话好像听起来怪怪的)操作具体如下图

<a href="index.asp"  target="_blank">Home</a>

然后在网站中就会显示如图所示的样式,文本为home,然后点击home,他会转到相应的界面,其中target="_blank"这个是用来创建新标签页来加载链接内的内容,而不是在原界面加载新网页。
然后关于图片的引用

<img src="corner-market.png" width="130" height="139" alt="Oranges,bananas,apples."/>

src指向具体图片,width height指向图片的宽和高,alt 属性是一个必需的属性,它规定在图像无法显示时的替代文本。
在这里插入图片描述就像这样(我那个加载不出来 我直接用的网图,具体的链接我放在了后面)HTML 标签的 alt 属性
而后就是,就是对于网页的一个跳转

<a href="#question-01">can id have</a>

<h1 id="question-01">can id have more</h1>

其中,a标签中href就是对后面的文字定位,定位在后面的拥有同样标识符的位置,就像a中的#question-01和h1中的id=question-01,如果点击“can id have”那么界面会自动跳转到“can id have more”的位置

第七章

第七章的标题是CSS构造块,从现在开始便正式开始从html5向结合css的html转变了。

  1. 构造样式规则
  2. 为样式添加注释
  3. 理解继承
  4. 当规则发生冲突
  5. 属性的值

现在开始讲第一个构造样式规则,

 p{
    background-color:rgb(60,143,0);
    font-size:1em;
    padding:.5em;}/*所有使用<p>的元素都会使用这个背景色*/

就是这样的,在>中声明此类的元素,便可以对整个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;}/*所有使用<p>的元素都会使用这个背景色*/

就是/* */里面的这些东西
3.理解继承
怎么说呢,就是父类中的定义,在之类中可以继承,大概意思就是,如果我在上文的p标签中加入一个div(应该能加吧) div中的元素依旧会有背景图片,而不是光秃秃的。
4.当规则发生冲突时
具体定义为:如果两个或两个以上的规则拥有相同的特殊性,则使用后出现的规则,除非某条规则标记了!important,例如:

<style>
    .example{
		color:red;
	}
    .example.example-2{
		color:magenta;<!--此条规则会被下一条规则覆盖-->
	}
	.example.example-2{
		color:green;
	}
</style>

5.属性的值
就是各个属性的值,例如

border:none;
font-size:.875em;
width:80%;
background:url(2.jpg);
color:rgb(89,0,127);

诸如此类,其中,需要注意的是,none表示的是初始值。
RGBARGB的拓展,Aalpha透明度,当RGBA(R,G,B,A)A的值为0时为不透明,为1时为完全透明。
HSL和HSLA的差别也是A透明度的差别,其中A代表色相(hue)S代表饱和度(saturation)L代表亮度(lightness)

第八章

第八章的标题是操作样式表,现在就开始进入外接css的阶段了,具体内容为:

  1. 创建外部样式表
  2. 链接到外部样式表
  3. 创建嵌入样式表
  4. 应用内联样式
  5. 样式的层叠和顺序
  6. 使用与媒体相关的样式表
  7. 借鉴他人的灵感

其实我发现html5的东西 在这个网页也能用
比如
哈哈哈哈
好的 他只是隐藏了标签,我加了一个marquee标签,在html5中可以让他滚动显示,但是在这里用不上。
1.创建外部样式表
就是在DW上创建一个css文件,内部用来存储style标签内的内容
2.链接到外部样式表
顾名思义,就是你创建了一个css文件,你需要让你的html文件链接到你创建的css文件去

<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="style.css"/>
</head>

其中rel标签的用法太多了
HTML中rel属性分析
如果想了解的话可以看看这篇文章,或者等我把他拷贝到我自己的博客中,href
指向的是你在DW上创建的CSS文件。
3.创建嵌入样式表
emmmmmm非常尴尬的是,他讲的是style标签在html文件中的使用,就不做更多的解释了
4.应用内联样式
就是不头文件中加style标签,直接在body中的标签内加(往后翻可以看到style标签)

<img src="corner-market.png" width="130" height="139" alt="Oranges,bananas,apples." style="border:4px solid red"/>

5 .样式的层叠和排序
就是上面提到的,如果同时用了两个样式,那么以后面的样式为准。

<link rel="stylesheet" href="style.css"/>
<style>
img{
	border-style:dashed;
	}
	</style>

此条代码,以后面的style为准,前面链接的样式表将会被后面的style覆盖。
6.使用与媒体相关的样式表
就是讲一些关于显示的问题,比如屏幕显示,打印显示之类的,不做讲解,如果有兴趣的话可以自行百度,
7.借鉴他人的灵感
emmmm(就和要多看书,多看看别人是怎么做的一个意思。。。。。。。)

第九章 定义选择器

CSS样式规则有两个主要部分:选择器决定要将格式化应用到哪些元素,而声明则决定要应用的格式化。这一章的学习内容为如何定义CSS选择器。

  1. 构造选择器
  2. 按名称选择元素
  3. 按类或ID选择元素
  4. 按上下文选择元素
  5. 选择第一个或者最后一个元素
  6. 选择元素的第一个字母或者第一行
  7. 按状态选择连接元素
  8. 按属性选择元素
  9. 指定元素组
  10. 组合使用选择器
    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. 选择字体系列
  2. 指定替代字体
  3. 创建斜体
  4. 应用粗体格式
  5. 设置字体大小
  6. 设置行高
  7. 同时设置所有字体值
  8. 设置颜色
  9. 设置背景
  10. 控制间距
  11. 添加缩进
  12. 对齐文本
  13. 修改文本的大小写
  14. 使用小型大写字母
  15. 装饰文本
  16. 设置空白属性
    (这个小标题数要死人的-😦)、

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面,还有一百面。下篇文章再见(应该没人在乎我这个更新的吧)

没有更多推荐了,返回首页