一、HTML+CSS基础知识学习笔记

注:如果早点了解那率性的你或者晚一点遇见成熟的我。学计算机的应该早点确定自己的技术方向,一定要有一个擅长的能够用来吃饭的,其他的能掌握多少就是多少,像我这样的什么都学,什么都不知道没什么卵用的。

1.HTMLHyper Text Markup Language(超文本标记语言.)

文本:就是一个文件,包含一部分的文本内容.

标记语言:标记语言都是由标签组成. 一般情况下,标签分为开始和结束标签.

也有个别的标签:不需要结束. 例如
 

  • HTML的特点:
    • 不区分大小写
    • 个别的标签可以没有结束.
  • HTML的结构

   
   
   
   

写在headtitle中内容 会显示到标题栏.写在body标签中的内容  会显示到页面的内部.


2.meta 标记:
meta标记用于定义文件信息,是对网页文件进行说明,便于搜索引擎查找。放置于之间。
用meta设置关键字:
多个关键字用“,”分隔。
设置描述:
设置作者:
设置字符集:
编码格式:GB2312编码占用2个字节,UTF-8占用3个字节,如果网页文字较多,选择GB2312编码。
设置页面定时跳转:里面的2,代表2秒
上面的几个地方需要特别注意:
1.http-equiv之间不能加空格,否则没用,也就是不能写成“http - equiv”!
2.content-type也是一个整体,不能以空格分隔。


3.图片标记:
图片标记使用标签 就可以在页面中引入一张图片.

src: 就代表的是图片的路径
* Src 要注意图片的路径问题 .
图片与文件在同一层路径!
图片与文件不在同一层路径!
Width :代表图片的宽度
Height: 代表图片的高度
Alt: 图片的提示

美女!!!

4.语义标签

斜的字体

段落

字体加粗

没有语义的标签,作用为设置单独的样式

简短文本的引用

缩进文本,引用长段落


换行


水平分割线

  空格

地址

一行代码

多行代码,代码片段

无序列表:

  • 无序列表

  • 信息
  • 信息
  • ......
有序列表:
  1. 有序列表

  1. 信息1
  2. 信息2
  3. ......

栏目板块,作为容器

给网页独立板块增加ID标记

 html注释


5.表格

eg:





认识table表标签



2012年到2013年库存记录
产品名称 品牌 库存量(个) 入库时间
耳机 联想 500 2013-1-2
U盘 金士顿 120 2013-8-10
U盘 爱国者 133 2013-3-25

1)…
:整个表格以标记开始、
标记结束。

2)…:当表格内容非常多时,表格会下载一点显示一点,但如果加上标签后,这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。

3)…:表格的一行,所以有几对tr 表格就有几行。

4)…:表格的一个单元格,一行中包含几对...,说明一行中就有几列。

5)…:表格的头部的一个单元格,表格表头。

6)表格中列的个数,取决于一行中数据单元格的个数。

7)

8)


6.

1)本浏览器原窗口打开链接:

链接显示的文本

在新建浏览器窗口中打开链接:

click here!

2)对此影评有何感想,发送邮件给我

一、HTML+CSS基础知识学习笔记_第1张图片


7.标签,为网页插入图片

下载失败时的替换文本
alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;

src:就代表的是图片的路径

美女!!!


8.
1)
method="post"   action="save.php">
        
        
        
        

2)文本输入框、密码输入框

语法:

*type:

当type="text"时,输入框为文本输入框;

当type="password"时, 输入框为密码输入框。

*name:为文本框命名,以备后台程序ASP 、PHP使用。

*value:为文本输入框设置默认值。(一般起到提示作用)

3)文本域,支持多行文本输入

注意这两个属性可用css样式的width和height来代替:col用width、row用height来代替

4)使用单选框、复选框,让用户选择


*type:

当 type="radio" 时,控件为单选框

当 type="checkbox" 时,控件为复选框

*value:提交数据到服务器的值(后台程序PHP使用)

*name:为控件命名,以备后台程序 ASP、PHP 使用

*checked:当设置 checked="checked" 时,该选项被默认选中

注意:同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“radioLove”,这样同一组的单选按钮才可以起到单选的作用。





单选框、复选框


5)使用下拉列表框,节省空间





下拉列表框


selected="selected":设置selected="selected"属性,则该选项就被默认选中。

type:只有当type值设置为submit时,按钮才有提交作用

value:按钮上显示的文字

7)使用重置按钮,重置表单信息。

8)form表单中的label标签


注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

eg:



9)placeholder 属性提供可描述输入字段预期值的提示信息(hint)。
该提示会在输入字段为空时显示,并会在字段获得焦点时消失。
注释:placeholder 属性适用于以下的 类型:text, search, url, telephone, email 以及 password。

10.

1)

p:选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。

span{   }

2)CSS注释语句:用 /*注释语句*/ 来标明

3)内联式css样式,直接写在现有的HTML标签中。并且css样式代码要写在style=""双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开。

这里文字是红色。

4)外部式css样式,写在单独的一个文件中


5)CSS样式优先级就是--就近原则(离被设置元素越近优先级别越高)。


11. 1)选择器。

每一条css样式声明(定义)由两部分组成,形式如下:

选择器{
样式;
}

2)标签选择器

p{font-size:12px;line-height:1.6em;}
上面的css样式代码的作用:为p标签设置12px字号,行间距设置1.6em的样式。

3)类选择器

.stress{color:red;}/*类前面要加入一个英文圆点*/

胆小如鼠

4)ID选择器

认识html标签

绿色的字体

5)类和ID选择器的区别

相同点:可以应用于任何元素
不同点:

ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。

②可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。

如正确代码示范:

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}

到了三年级下学期时,我们班上了一节公开课...


错误代码示范:

#stressid{
    color:red;
}
#bigsizeid{
    font-size:25px;
}

到了三年级下学期时,我们班上了一节公开课...


6)子选择器

.food>li{border:1px solid red;}
添加边框样式(粗细为1px, 颜色为红色的实线
.first>span{border:1px solid red;}
7)包含(后代)选择器

.food li{border:1px solid red;}
总结:>作用于元素的第一代后代,空格作用于元素的所有后代。
8)通用选择器

* {color:red;font-size:20px;}

通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素,如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色:

9)伪类选择符

比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:

a:hover{color:red;font-size:20px;}

10)分组选择符

h1,span{color:red;}
它相当于下面两行代码:

h1{color:red;}
span{color:red;}

12.

1)继承。有些CSS样式具有继承性,但border:1px solid red;不具备。

2)特殊性。标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
3)层叠。层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。

p{color:red;}
p{color:green;}

三年级时,我还是一个胆小如鼠的小女孩。

理解为就近原则就好了。
4)重要性。 !important

p{color:red!important;}
p{color:green;}

三年级时,我还是一个胆小如鼠的小女孩。

这时 p 段落中的文本会显示的red红色。

13.
1)文字排版--字体。

body{font-family:"Microsoft Yahei";}
body{font-family:"微软雅黑";}
注意:第一种方法比第二种方法兼容性更好一些。

2)文字排版--字号、颜色。

body{font-size:12px;color:#666}

3)文字排版--粗体。

p span{font-weight:bold;}
4)文字排版--斜体。

p a{font-style:italic;}

三年级时,我还是一个胆小如鼠的小女孩。


5)文字排版--下划线。

p a{text-decoration:underline;}

6)文字排版--删除线。

.oldPrice{text-decoration:line-through;}

原价:300元 现价:230 元


7)段落排版--缩进。

p{text-indent:2em;}

8)段落排版--行间距(行高)。

p{line-height:2em;}

9)段落排版--中文字间距、字母间距。

h1{letter-spacing:50px;}
10)段落排版--对齐。

div{text-align:center;} /*可以为center、left、right*/

11)缩写

body{
    font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋体",sans-serif;
}


body{
    font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
}


14.CSS盒模型。

1)元素分类。

在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有:

...

标题文本


常用的内联元素有:


一、HTML+CSS基础知识学习笔记_第2张图片



5)盒模型--填充。

div{padding:20px 10px 15px 30px;}
相当于:
div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}
6)盒模型--边界。

div{margin:20px 10px 15px 30px;}
相当于:
div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

15.css布局模型。

1)流动模型(Flow)
2)浮动模型 (Float)

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}

div{
    width:200px;
    height:200px;
    border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}

3)层模型(Layer)

层模型有三种形式:

1、绝对定位(position: absolute)
div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}

2、相对定位(position: relative)

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}

3、固定定位(position: fixed)
#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}

文本文本文本文本文本文本文本文本文本文本文本文本。

4)Relative与Absolute组合使用。

1、参照定位的元素必须是相对定位元素的前辈元素:

相对参照元素进行定位
从上面代码可以看出box1是box2的父元素(父元素当然也是前辈元素了)
2、参照定位的元素必须加入position:relative;

#box1{
    width:200px;
    height:200px;
    position:relative;        
}

3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。

#box2{
    position:absolute;
    top:20px;
    left:30px;         
}
这样box2就可以相对于父元素box1定位了(这里注意参照物就可以不是浏览器了,而可以自由设置了)。


16、单位和值。

1)颜色值:

①英文命令颜色 。

p{color:red;}
②这个与 photoshop 中的 RGB 颜色是一致的,由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。
p{color:rgb(133,45,200);}
p{color:rgb(20%,33%,25%);}
③十六进制颜色。

这种颜色设置方法是现在比较普遍使用的方法,其原理其实也是 RGB 设置,但是其每一项的值由 0-255 变成了十六进制 00-ff。

p{color:#00ffff;} 且可以简写为p{color:#0ff;}

2)长度值。

p{font-size:12px;text-indent:2em;}
p{font-size:14px}
span{font-size:0.8em;}
p{font-size:12px;line-height:130%}


17、css样式设置小技巧

1)水平居中设置-行内元素。text-align:center

2)水平居中设置-定宽块状元素。

3)clear:both清除浮动。

18、通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。



你可能感兴趣的:(一、HTML+CSS基础知识学习笔记)