关注二维码
 找回密码
 立即注册
技术宅

关注:0

所属分类: 摄影专区 技术宅

本版块用以学习各类技术

html+css基础笔记

[复制链接]
查看: 341|回复: 0
发表于 2016-7-8 17:19:21 | 显示全部楼层 |阅读模式

20160309110507921.jpg

最近在学习前端方面的知识,以下是学习完html+css基础知识之后做的笔记,大家可以参考,想了解更多推荐大家去慕课网http://www.imooc.com/)上学习。

首先学习之前需要了解:


1. HTML是网页内容的载体
2. CSS样式是表现
3. JavaScript是用来实现网页上的特效效果

HTML
<em>需要强调的文本</em>  
<strong>需要强调的文本</strong>
<span>标签是没有语义的,它的作用就是为了设置单独的样式用的。
<blockquote>引用文本</blockquote>
写入空格
<hr />用于分隔的横线
<address>联系地址信息</address>
显示一些计算机专业的编程代码,当代码为一行代码时,使用<code>标签
<code>代码语言</code>
<pre>语言代码段</pre>
段落
<ul> <li>信息</li> <li>信息</li> ......</ul>
按顺序排列
<ol> <li>信息</li> <li>信息</li> ......</ol>
块状div
<div></div>
table
创建表格的四个元素:
table、tbody、tr、th、td
1、<table>…</table>:整个表格以<table>标记开始、</table>标记结束。
2、<tbody>…</tbody>:当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
3、<tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。
4、<td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。
5、<th>…</th>:表格的头部的一个单元格,表格表头。
6、表格中列的个数,取决于一行中数据单元格的个数。
<table summary="表格简介文本">
<caption>标题文本</caption>
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
在新建浏览器窗口中打开链接
<a href="目标网址" target="_blank">click here!</a>
使用mailto在网页中链接Email地址
<a href="mailto:yy@imooc.com ?cc=抄送地址&bcc=密件抄送地址&subject=xxx&body=xxx">发送邮件给我</a>
用;隔开可以发送多个人
<a href="mailto:yy@imooc.com ?subject=观了不起的盖茨比有感 &body=你好,对此评论有些想法">发送邮件给我</a>
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
<form method="传送方式" action="服务器文件">
1.<form> :<form>标签是成对出现的,以<form>开始,以</form>结束。
2.action浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3.method 数据传送的方式(get/post)。
文本输入框、密码输入框
<form> <input type="text/password" name="名称" value="文本" /></form>
1、type:
   当type="text"时,输入框为文本输入框;
   当type="password"时,输入框为密码输入框。
2、name:为文本框命名,以备后台程序ASP 、PHP使用。
3、value:为文本输入框设置默认值。(一般起到提示作用)
文本域 支持多行文本输入
<textarea rows="行数" cols="列数">文本</textarea>
1、<textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束。
2、cols :多行输入域的列数
3、rows :多行输入域的行数
4、在<textarea></textarea>标签之间可以输入默认值
col可以用width、row可以用height来代替
使用单选框、复选框,让用户选择
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1、type:
   当 type="radio" 时,控件为单选框
   当 type="checkbox" 时,控件为复选框
2、value:提交数据到服务器的值(后台程序PHP使用)
3、name:为控件命名,以备后台程序 ASP、PHP 使用
4、checked:当设置 checked="checked" 时,该选项被默认选中
使用下拉列表框,节省空间
1、value:
20160707145901644.png
2、selected="selected"
设置selected="selected"属性,则该选项就被默认选中。
使用下拉列表框进行多选
下拉列表也可以进行多选操作,在<select>标签中设置multiple="multiple"属性,就可以实现多选功能,在 widows 操作系统下,进行多选时按下Ctrl键同时进行单击(在 Mac下使用 Command +单击),可以选择多个选项。
使用提交按钮,提交数据
<input type="submit" value="提交">
type:只有当type值设置为submit时,按钮才有提交作用
value:按钮上显示的文字
使用重置按钮,重置表单信息
<input type="reset" value="重置">
type:只有当type值设置为reset时,按钮才有重置作用
value:按钮上显示的文字
form表单中的label标签
<label for="控件id名称">
注意:标签的for 属性中的值应当与相关控件的 id 属性值一定要相同。
CSS
css 样式由选择符声明组成,而声明又由属性组成,如下图所示:
20160707145943204.png
CSS注释代码
就像在Html的注释一样,在CSS中也有注释语句:用/*注释语句*/来标明(Html中使用<!--注释语句-->)。
内联式css样式,直接写在现有的HTML标签中
CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式、嵌入式和外部式三种。
内联式
<p style="color:red;font-size:12px">这里文字是红色。</p>
嵌入式
span{
color:red;
}
外部式
<link href="style.css" rel="stylesheet" type="text/css" />
注意:
1、css样式文件名称以有意义的英文字母命名,如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。
优先级:
内联式 > 嵌入式 > 外部式
但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面
每一条css样式声明(定义)由两部分组成,形式如下:
选择器{ 样式;}
标签选择器
标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。
p{font-size:12px;line-height:1.6em;}
类选择器
语法:
.类选器名称{css样式代码;}
注意:
1、英文圆点开头
2、其中类选器名称可以任意起名(但不要起中文噢)
使用方法:
第一步:使用合适的标签把要修饰的内容标记起来,如下:
<span>胆小如鼠</span>
第二步:使用class="类选择器名称"为标签设置一个类,如下:
<span class="stress">胆小如鼠</span>
第三步:设置类选器css样式,如下:
.stress{color:red;}/*类前面要加入一个英文圆点*/
ID选择器
在很多方面,ID选择器都类似于类选择符,但也有一些重要的区别:
1、为标签设置id="ID名称",而不是class="类名称"。
2、ID选择符的前面是井号(#)号,而不是英文圆点(.)
右侧代码编辑器中就是一个ID选择符的完整实例。
类和ID选择器的区别
学习了类选择器和ID选择器,我们会发现他们之间有很多的相似处,是不是两者可以通用呢?我们不要着急先来总结一下他们的相同点和不同点:
相同点:可以应用于任何元素
不同点:
1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。
子选择器
还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素如右侧代码编辑器中的代码:
.food>li{border:1px solid red;}
包含(后代)选择器
包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码:
.first span{color:red;}
请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。
总结:>作用于元素的第一代后代,空格作用于元素的所有后代。
通用选择器
通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素,如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色:
* {color:red;}
伪类选择符
更有趣的是伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:
a:hover{color:red;}
分组选择符
当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色:
h1,span{color:red;}
继承
CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。
特殊性
标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。
层叠
层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。
重要性
我们在做网页代码的时,有些特殊的情况需要为某些样式设置具有最高权值,怎么办?这时候我们可以使用!important来解决。
如下代码:
p{color:red!important;}
文字排版
我们可以使用css样式为网页中的文字设置
字体(font-family)、字号(font-size)、颜色(color)、粗体(font-weight:bold)、斜体(font-style:italic)、下划线(text-decoration:underline)、删除线(text-decoration:line-through)、缩进(text-indent:2em)、行间距(行高)(line-height:1.5em)、中文字间距、字母间距(letter-spacing:50px)、对齐(text-align:center、left或right)属性。
元素分类
常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
设置display:block就是将元素显示为块级元素。例如:a{display:block;}
块级元素特点:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
块状元素也可以通过代码display:inline将元素设置为内联元素。例如:div{display:inline;}
内联元素特点:
1、和其他元素都在一行上;
2、元素的高度宽度及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
常用的内联块状元素有:
<img>、<input>
代码display:inline-block就是将元素设置为内联块状元素。
inline-block 元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置。
盒子模型(内边距)  border(边框)  margin(外边距)
外边距
margin 分为margin-top、margin-right、margin-bottom、padding-left
内边距
padding 分为padding-top、padding-right、padding-bottom、padding-left
边框
border 有border-style(边框样式)border-color(边框颜色)border-width(边框宽度)
边框样式有dashed(虚线)| dotted(点线)| solid(实线)
总结一下:padding和margin的区别,padding在边框里,margin在边框外。
在网页中,元素有三种布局模型:
1、流动模型(Flow)
2、浮动模型 (Float)
3、层模型(Layer)
流动布局模型具有2个比较典型的特征:
第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div,h1,p)宽度显示为100%。
第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)
任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动,如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。
div{ width:200px; height:200px; border:2px red solid;float:left;}<div id="div1"></div><div id="div2"></div>
如何让html元素在网页中精确定位,就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位(positioning)属性来支持层布局模型。
层模型有三种形式:
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口
如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动
fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。 由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元 素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。以下代码可 以实现相对于浏览器视图向右移动100px,向下移动50px。并且拖动滚动条时位置固定不变。
Relative与Absolute组合使用
1、参照定位的元素必须是相对定位元素的前辈元素
2、参照定位的元素必须加入position:relative;
3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了
盒模型代码简写
1、如果top、right、bottom、left的值相同,如下面代码:
margin:10px 10px 10px 10px;
可缩写为:
margin:10px;
2、如果top和bottom值相同、left和 right的值相同,如下面代码:
margin:10px 20px 10px 20px;
可缩写为:
margin:10px 20px;
3、如果left和right的值相同,如下面代码:
margin:10px 20px 30px 20px;
可缩写为:
margin:10px 20px 30px;
注意:padding、border的缩写方法和margin是一致的。
颜色值缩写
例子1:
p{color:#000000;}
可以缩写为:
p{color: #000;}
例子2:
p{color: #336699;}
可以缩写为:
p{color: #369;}
字体缩写
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;}
注意:
1、使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
一般情况下因为对于中文网站,英文还是比较少的,所以下面缩写代码比较常用:
body{ font:12px/1.5em "宋体",sans-serif;}
只是有字号、行间距、中文字体、英文字体设置。
颜色值
1、英文命令颜色
前面几个小节中经常用到的就是这种设置方法:
p{color:red;}
2、RGB颜色
这个与 photoshop 中的 RGB 颜色是一致的,由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。
p{color:rgb(133,45,200);}
每一项的值可以是 0~255 之间的整数,也可以是 0%~100% 的百分数。如:
p{color:rgb(20%,33%,25%);}
3、十六进制颜色
这种颜色设置方法是现在比较普遍使用的方法,其原理其实也是 RGB 设置,但是其每一项的值由 0-255 变成了十六进制 00-ff。
p{color:#00ffff;}
长度值
1、像素
像素为什么是相对单位呢?因为像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。实际情况是浏览器会使用显示器的实际像素值有关,在目前大多数的设计者都倾向于使用像素(px)作为单位。
2、em
就是本元素给定字体的 font-size 值,如果元素的 font-size 为 14px ,那么 1em = 14px;如果 font-size 为 18px,那么 1em = 18px。
下面注意一个特殊情况:
但当给 font-size 设置单位为em 时,此时计算的标准以 p 的父元素的 font-size 为基础。
3、百分比
p{font-size:12px;line-height:130%}
水平居中设置-行内元素
果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。
html代码:
<body> <div class="txtCenter">我想要在父容器中水平居中显示。</div></body>
css代码:
<style> .txtCenter{ text-align:center; }</style>
水平居中设置-定宽块状元素
当被设置元素为 块状元素 时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素。
定宽块状元素:块状元素的宽度width为固定值。满足定宽块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
html代码:
<body> <div>我是定宽块状元素,哈哈,我要水平居中显示。</div></body>
css代码:
<style>div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:200px;/*定宽*/ margin:20px auto;/* margin-left 与 margin-right 设置为 auto */}</style>
也可以写成:
margin-left:auto;margin-right:auto;
注意:元素的“上下 margin” 是可以随意设置的。
不定宽块状元素:块状元素的宽度width不固定。
不定宽度的块状元素有三种方法居中(这三种方法目前使用的都很多):、
1.加入 table 标签
2.设置 display: inline 方法:与第一种类似,显示类型设为行内元素,进行不定宽元素的属性设置(改变块级元素的 display 为 inline 类型(设置为行内元素 显示),然后使用text-align:center 来实现居中效果。)
3.设置 position:relative 和 left:50%:利用 相对定位 的方式,将元素向左偏移 50% ,即达到居中的目的(通过给父元素设置float,然后给父元素设置position:relative和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。)
垂直居中-父元素高度确定的单行文本
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height line-height 高度一致来实现的。(height: 该元素的高度,line-height: 顾名思义,行高(行间距),指在文本中,行与行之间的 基线间的距离 )
line-height 与font-size 的计算值之差,在 CSS 中成为“行间距”。分为两半,分别加到一个文本行内容的顶部和底部。
这种文字行高与块高一致带来了一个弊端:当文字内容的长度大于块的宽时,就有内容脱离了块。
垂直居中-父元素高度确定的多行文本(方法一)
父元素高度确定的多行文本、图片等的竖直居中的方法有两种:
方法一:使用插入table  (包括tbody、tr、td)标签,同时设置vertical-align:middle。
css 中有一个用于竖直居中的属性vertical-align,在父元素设置此样式时,会对inline-block类型的子元素都有用。
垂直居中-父元素高度确定的多行文本(方法二)
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell(设置为表格单元显示),激活 vertical-align 属性,但注意 IE6、7并不支持这个样式,兼容性比较差。
html代码:
<div class="container"> <div> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> </div></div>
css代码:
<style>.container{ height:300px; background:#ccc; display:table-cell;/*IE8以上及Chrome、Firefox*/vertical-align:middle;/*IE8以上及Chrome、Firefox*/}</style>
这种方法的好处是不用添加多余的无意义的标签,但缺点也很明显,它的兼容性不是很好,不兼容 IE6、7而且这样修改display的block变成了table-cell,破坏了原有的块状元素的性质。
隐性改变display类型
有一个有趣的现象就是当为元素(不论之前是什么类型元素,display:none 除外)设置以下 2 个句之一:
1. position : absolute
2. float : left 或 float:right
简单来说,只要html代码中出现以上两句之一,元素的display显示类型就会自动变为以 display:inline-block(块状元素)的方式显示,当然就可以设置元素的 width 和 height 了,且默认宽度不占满父元素。

324

主题

355

帖子

6777

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6777

最佳新人网站达人灌水之王

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则