JavaScript、HTML和CSS的关系:
HTML:用来编写网页结构。CSS:美化网页(样式)。JavaScript:实现网页与用户之间互动的桥梁,让网页具有丰富的生命力。
HTML:超文本标记语言,专门用来描述文本语义的!
基本结构如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在这里放网页的标题emmm</title>
</head>
<body>
</body>
</html>
特性:标签都是成对出现,有开始和结束标签。其他标签都必须写在html标签内,也就是写在html开始和结束标签之间。
HTML作用:用于告诉浏览器这是一个网页,也就是说告诉浏览器是一个HTML文档。
HTML文档head作用:用于给网站添加一些配置信,如:(指定网站的标题/ICON,指定网站的关键字/描述信息,外挂一些外部的CSS和JavaScript文件,添加一些浏览器适配相关的内容等)。
HTML文档title作用:专门用于指定网站的标题,并且这个标题还会作为用户保存网站的默认标题。
title标签必须写在head标签里面。
HTML文档body的作用:专门用于定义HTML文档中需要显示给用户查看的内容(文字、图片、音频、视频等),一对html标签只能有一对body标签!
新手常犯的错误:
1.不加DOCTYPE<导致低版本IE,解析效果不一致>;
2.id为数字;
3.编码不一致;
如:<mate charset="GBK" />、<mate charset="utf-8" />,文件编码与charset声明必须一致!
4.在style中id前面要加#,class前面要加. ,标签前什么也不用加。
为什么会出现乱码现象?<就是因为我们在编写网页时没有指定字符集>
如何解决乱码问题?
在head标签中添加<meta charset="GBK" />,meta的作用就是指定网页的字符集。
编码技巧:快速建立多个相同标签:
如:div>div*3 按下Tab键,可快速建立3个div。
在同一个class中快速建立多个id为Iverson的相同标签:
如:div.Iverson*3 按下Tab键,可快速建立3个id为Iverson的相同标签。
快速建立一个id为Iverson的div:
div#Iverson 按下Tab键,可快速建立一个id为Iverson的div。
快速建立多个不同id的div:
div#XX + div#YY
-------------------------------------------------------------------------------------------------------------------
不管定义的div为多少像素宽,div总是独占一行,使用浮动布局可以让div"移动"到屏幕指定位置,如:
float:"left"
*清除div上方的浮动div;
clear:"left"
clear:"right"
clear:"both"//左右浮动都清除
*建立div时,先建一个总的div,其它div放在其中,方便调整全部div的属性!
盒模型:
margin:"10px" //外边距10px<上-右-下-左>
padding:"1em" //内边距1em
border:"2px solid #000" //有一个宽2px,实线,黑色的边框
上-右-下-左>
padding:"1em" //内边距1em
border:"2px solid #000" //有一个宽2px,实线,黑色的边框
实线:solid 虚线:dashed 点线:dotted 立体:outset
border可以分开设置其属性:
border-top:"2px solid #000"
border-width:2px //边框宽度
border-style:solid //边框形状
border-color:#000 //边框颜色
inline内联元素<行内元素>用法举例:
<span>Iverson.Tian</span>
span内的元素(一般为文字),即被约束在span之中,即通过span添加css样式来控制其中文字的显示效果。
*盒模型文字部分的大小只与div的长宽有关!
在总的div中设置margin: 0 auto,可以使页面布局整体自适应居中。
margin重叠现象?
相邻的普通元素,上下边距并非简单的相加,而是:取其中较大的margin值!
inline内联元素<行内元素>用法:
区分:块级元素:能独占一行,设置宽高,有竖直方向上的margin、padding
内联元素:不能独占一行,设置宽高,没有竖直方向上的margin、padding
块级元素与内联元素的转化:
可以通过元素的display属性来设置:
display:block //强制声明为块状元素
display:inline //强制声明为内联元素
display:none //设置隐藏,等同于删除,在页面不占任何空间
CSS控制段落文字:
text-indent:20px //文字段落缩进20px
text-align:center //段落文字居中
text-align:right //段落文字从右向左排布
文本下划线:
none:无装饰(默认值) blink:闪烁 underline:下划线 line-through:贯穿线 overline:上划线
如:给文字添加下划线
text-decoration:underline
文字的样式:
normal:默认值,正常的文字 italic:斜体 oblique:倾斜的文字(没有斜体变量的特殊字体)如:
font-style:italic
文字之间的间距:
letter-spacing:20px
你设置的字体用户机器未必有安装,一般选一个"安全"的通用字体放在最后!如:
font-family:XX,YY,serif
背景图片:
background-image:url(xxx.jpg)
background-repeat: repeat-x; //图片在X轴重复
background-repeat: repeat-x; //图片在Y轴重复
background-repeat: no-repeat; //图片不重复
background-attachment: fixed; //图片固定
背景图片和背景色同时设置,优先显示背景图片!
background-position: right center; //水平居右,竖直居中
background-position: center; //居中
background-position: -20px +20px; //将图片向左拖动20px,再向下拖动20px
在标签末尾加上<br/>可以实现换行!
css选择器:id选择器、class选择器、标签选择器、派生选择器(从上到下选择)
在一个CSS文件中导入外部css文件:
@import url(xxx); //当前目录
@import url(..xxx); //上一级目录
标签:
h1-h6表示1-6号标题,字体大小越来越小,p标签表示段落,经常与h1-h6一起出现。
*img标签表示图片,是单闭合标签,是特殊
<img src="xxx.jpg" alt="图片说明" title="鼠标放上去就会显示此文字" />
src="xxx.jpg" //本地当前目录
src="..xxx.jpg" //本地上一级目录
src="图片超链接" //外网图片链接
有序列表和无序列表:
ul:有序列表 ol:无序列表
整体的表格:<两行两列,table表示表格,tr表示行,td表示列>
<table>
<tr>
<td>Iverson</td>
<td>Iverson</td>
</tr>
<tr>
<td>Iverson</td>
<td>Iverson</td>
</tr>
</table>
可以在style中对table的tr和td分别进行"装饰美化"
表格语法取值;
border-collapse:separate //边框独立(默认值)
border-collapse:collapse //相邻边被合并
如:向右合并3格(包括自身)和向下合并3格(包括自身)写法如下:
<td colspan="3">Iverson</td>
<td rowspan="3">Iverson</td>
超链接标签a:
<a href="链接地址" target="_blank" title="鼠标放上来就显示该文字"></a>
锚点:通过锚点可以快速定位到锚点所在位置
锚点添加的三种方式:
<div>
<a href="#Iverson"></a>
</div>>
<p id="Iverson">练习</p>
<div>
<a href="#Iverson"></a>
</div>
<a name="Iverson" href=“#”>练习</a> //使用name属性只能针对a标签来定位
使用name属性只能针对a标签来定位
<li class="" onclick="javascript:document.getElementById('here').scrollIntoView()"></li>
CSS中a标签的伪类:
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
HTML字符实体:<HTML 中的预留字符必须被替换为字符实体>
可自行百度常用字符实体查看!
<pre>在pre标签中,写的是什么格式,网页上就显示什么格式,无需定义格式,如换行等</pre>
<pre> 标签的一个常见应用就是用来表示计算机的源代码。
利用行高完成文字垂直居中:
在style中设置line-height和height高度一致即可!
line-height: 30px;
height: 30px;
色彩表示:
1.用16进制来组合[0~255]-[OO,FF],如#0083FF
2.用16进制来组合,如rgb(34,56,78)
3.用html提供的常用颜色的名称来表示,如orange
4.#EEEEEE可以写成#EEE
用CSS来为div画圆角:
border-radius: 20px;
当border-radius的值等于div(正方形)边长的一半时,就可以画出一个半径为div边长一半的圆
overflow溢出效果:<子元素超出父元素显示区域>
相对定位和绝对定位:
相对定位是指元素在其原来的位置,偏移某些像素。
绝对定位是指元素相对父元素的四个方向来定位。
END