HTML
HTML
超文本标记语言
超文本就是比普通文本有着更强大的功能
除了处理文本还能存放链接/音频等功能
标记是他的语言,也就是我们着重需要学习的
---------------------------------
标记分为
单标签:<标签名 属性名="属性值" 属性名="属性值" .../>
双标签:<标签名 属性名="属性值" 属性名="属性值"...></标签名>
<标签名>为起始标签</标签名>为闭合标签
基于单表签的特殊性,我们习惯在后面加上 / 进行标签的闭合
---------------------------------
主体标签:
---------------------------------------------------------------------------------------------------
<html><head><title>网页标题<(title><head><body>大部分的内容<body></html>
文本标签:
加粗: <b>加粗文本</b>,<strong>加粗文本</strong> //strong含有语气
倾斜: <i>倾斜文本</i>,<em>倾斜文本<em> //em含有语气
下划线: <u>下划线文本</u>,<ins>下划线文本</ins>
删除线: <del>删除文本</del>,<ins>删除文本</ins>
上标: <sup>上标文本<sup> //用于方程式等
下标: <sub>下标文本<sub> //比如H2O
文本放大: <big>放大文本</big>
文本缩小: <small>缩小文本</small>
字体: <font>需要改变字体的文本</font>
属性有:color(颜色)、size(大小)[1-7]、face(类型)[黑体等]
---------------------------------------------------------------------------------------------------
HTML注释:
<!-- 注释内容-->
标签嵌套:
不可以交叉嵌套,虽然浏览器会修正
排版标签:
---------------------------------
<p>: 块标签:独占一行
<br />: 换行标签
<hr />: 横线标签
<div>: 块标签: 独占一行
<span>: 组合文档中的行内元素,不独占一行
<h1~h6>: 标题
---------------------------------
# 有序列表标签
---------------------------------
<ol type="" start="">
<li>内容</li>
</ol>
属性:type 属性值有[1,A,a,i,I,none]
1: 从1开始排列
A/a: 从A/a 按照A-Z/a-z进行排列
i/I: 按照罗马数字进行排列
none: 不显示前面的序列,也就是无序排列
属性:start 属性值为数字
star表示从标识的位置开始排列
eg:start="3" type="1"
那么就会从数字3开始往后面排列
---------------------------------
---------------------------------
#无序列表标签
---------------------------------
<ul type="">
<li>内容</li>
</ul>
---------------------------------
属性: type: disc实心圆,circle空心圆,square小方块
无序列表最好嵌套无序列表,有序列表最好嵌套有序列表
---------------------------------
<h2>你的兴趣爱好有哪些:</h2>
<ul>
<li>音乐</li>
<li>运动
<ul>
<li>打篮球</li>
<li>踢足球</li>
<li>跑步羽毛球</li>
</ul>
</li>
</ul>
---------------------------------
---------------------------------
定义列表
定义列表 <dl><dt><dd>
d1:定义列表标签
dt:定义标题
dd:定义说明
定义列表用于列举一种“名称-描述”形式的列表，非常类似"字典"或"词典"的表现形式
类似如下表现:
----------------------------------------
<dl>
<dt>中国</dt>
<dd>全称“中华人民共和国”,缩写"PRC"</dd>
<dt>比特币</dt>
<dd>一种完全去中心化的电子货币</dd>
</dl>
----------------------------------------
中国
全称“中华人民共和国”,缩写"PRC"
比特币
一种完全去中心化的电子货币
----------------------------------------
---------------------------------
#图片标签
alt的作用
1、在图片名字写错时不会显示加载图片为裂开,会把alt的内容显示在上面
2、主要用于搜索引擎作为搜索图片的关键字
align
设定图片的"对齐方式"
它可以让图片紧贴左边或右边展示
以使其周围文字可以"绕图展示"(但注意:align不能让图片"居中排列")
---------------------------------
<img src="" width="" height="" alt="">
---------------------------------
#地址路径
---------------------------------
绝对路径:http://
相对路径:相对与某个文件来找的路径目录
当前目录:【./】
上级目录:【../ 】
下级目录:【某个文件夹/】
---------------------------------
#链接标签
---------------------------------
<a href="#">内容</a>
<a href="./xxx.html">内容</a>
<a href="http://xxxx.com">内容</a>
点击跳转到
<a href="http://www.baidu.com" target="_blank">百度</a> // target="_blank" 新窗口打开新页面
当有页面需要跳转给别人打广告,但是现在还没有预订的情况下,可以使用假链接 #
假链接: <a href="#">广告</a>
JS: <a href=javascript:void(0)></a>
链接标签<a>主要是为了实现网页中的"链接",以使用户可以点击并跳转
链接分为两种:超链接知锚点链接
锚链接
锚链接和超链接的区别:
1．超链接实现的是从一个页面跳转到另外一个页面
2．锚链接实现的是在当前页面中跳转
在本页面内部跳转:
<a hnef="#"></a>
例如:
<p id="id名">内容</p>
<p name="name名">内容</p>
I
<a href="#id名">内容</a>
<a name="#name名">内容</a>
link标签
通过link标签可以设置网页图标
<link rel="icon" href="favicoh.ico">
注意:
1．要将link标签放到<head>标签中
2. link标签中的属性rel="icon"
3. href="图标路径"
4．一般将网页图标放到网站的根目录下
表格标签
表格标签主要用于实现网页中展示“行列对齐”的表格效果
<table><tr><td><th>
<table>: 表示表格(整体),有多个常用属性
<tr>: 表示行,基本上没有什么属性 [bgcolor,background,height,align,valign]
<td>: 表示单元格(列),有多个常用属性 对于td单元格的属性操作,width:影响整列,heigth: 影响整行
注意: <table>,<tr>,<td>是严格的嵌套关系,即只能按此层次关系出现
---------------------
<table background="图片路径" border="2" width="300" height="300" align="left">
<tr> //行
<th>行标题</th>
</tr>
<tr> //行
<td colspan="2">内容1</th> //合并了多少个单元格就要把合并的给删掉,不然就会多出来
<td rowspan="2">列</td> //也就是每一列标题下的内容 //合并了多少个单元格就要把合并的给删掉,不然就会多出来
</tr>
</table>
----------------------
表格高级
表格标签除了基本的<table><tr><td>(或<th>)标签之外,还可以有如下标签:
caption
用于表示一个表格的"标题文字"(看起来在表格线的外面),写在<table>标签中
thead
用于表示一个表格"头部区域",其中可以包含若个<tr>(行),<tr>中自然应该有<td>(或<th>)
写在<table>标签中,<tr>外，即这样的层次: <table>-><thead>-><tr>
tbody
用于表示一个表格"主体区域",其中可以包含若个<tr>(行), <tr>中自然应该有<td>(或<th>)
写在<table>标签中,<tr>外，即这样的层次: <table>-><tbody>-><tr>
tfoot
用于表示一个表格"底部区域",其中可以包含若个<tr>(行), <tr>中自然应该有td(或t〉
写在<table>标签中,<tr>外，即这样的层次: <table>-><tfoot>-><tr>
当我们写完表格的时候会自动生成上面的标签除了<caption>
注意:
1、thead, tbody,tfoot,用于对表格的行〈tr〉进行分组，此时thead组在表格头部,tfoot组在底部。
2、这3个标签出现的推荐顺序是: thead,tfoot, tbody,在他们内部再写<tr>
3、thead, tfoot应该只出现一次,tbody可以出现多次
4、所有没有明确归属到上述3个标签的行<tr>,都默认归属到tbody
----------------------------
<table>
< --头部-->
<thead>
<tr>
<td></td>
</tr>
I </thead>
<!--主体-->
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<! --底部-->
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
表单
表单
表单标签是用于在网页上展示或实现"数据输入"的功能标签
用户在网页上要想"提交数据"(比如注册,发表文章),通常都需要表单标签
- 收集用户的信息
表单有很多种,比如
单行文本框,多行文本框,密码框,单选项,多选项,下拉选项等等
表单标签主要包括:
<form>,<input>,<select>,<option>,<textarea>,<button>
其中:
1、<form>标签是"盒子标签"(或称为容器标签),需要用它将其他表单标签包含起来
2、<input>标签虽然只是一个标签,但其有很多个形式(根据type属性的不同)
表单标签的常见形式类似这样:
一个表单由许多项组成
--------------
<form>
<input>
<select>
<option>
<textarea>
<button>
</form>
----------------
<form>标签
<form>标签的作用是用于将其他表单标签"包"起来,以便作为一个整体，可以提交数据到服务器
<form>作用
通过表单控件收集用户信息
表单控件:
1．表单控件(重点)
2．提示信息
3．表单域(表单)
method:设置表单提交方式 get [ post
Get:可见 提交时在浏览器地址能看见
Post:不可见 提交时在浏览器地址不能看见
action: 用来处理表单提交数据信息的一个后台文件
形式:
-------------------------------------------------------------
<form name="表单名称" action="目标地址" method="数据提交方式">
这里写其他具体的一个一个表单标签
还可以出现几乎所有其他各种标签(除了html,body,head等少数几个)
</form>
-------------------------------------------------------------
-------------------------------------------------------------
<forml adcion="a.php" method="get|post" name="userName">
<!--项单项-->
账号:<input type="text">
<input type="submit" value="点击提交">
</form>
-------------------------------------------------------------
文本框
输入框:
----------------------------------------------------------------
<input type="text">
属性:
maxlength: 设置当前控件最多能输入多少个字符
readonly: 设置让当前控件为只读模式(不能输入)
disabled: 设置当前控件不能输入
value: 设置当前控件默认值
name: 设置当前控件名称(类似于我们自己的名字)
id: 设置当前控件唯一标识(类似于我们自己的身份证号)
<input type="text" value="请输入邮箱地址" name="" id="" readonly disabled maxlength="6">
disabled属性: 不可用(无效),该属性也是一个无值属性,通常设定其值为其本身readonly属性: 也是一个无值属性,表示"只读",就是不可改变
注意:
无值属性可以直接写属性名,无需赋值就可以
----------------------------------------------------------------
----------------------------------------------------------------
<form action="a.php" method="get" name="form1">
<!--文本框--> //input前面的文字是提示,告诉你要填什么信息,name是提交的标识,也就是说你这个input提交的内容是什么,因为name有可能重复那么就不知道是啥了,这个时候可以用id唯一标识进行提交的辨认
账号:<input type="text" name="zh" id="">
<br />
邮箱:<input type="text" name="yx" id="">
<br />
<!--提交按钮-->
<input type="submit" value="提交按钮"></ form>
----------------------------------------------------------------
密码框
密码: <input type="password" name="pwd">
密码输入框中的属性与文本输入框中的属性一样
隐藏文本框/隐藏域
<input type="hidden" name="pswd" value="数据(文本)">
隐藏文本框在网页上不可见,但其中的数据可用
单选项
----------------------------------------------------------------
<input type="radio">
注意:
要让单选控件实现单选效果，我们需要给控件设置相同的name值
<input type="radio" name="sex" value="1" checked="checked">男 //checked 默认选择男
<input type="radio" name="sex" value="o">女
如果不把name设置相同属性值那么男女都会选中不会跳
属性︰
checked: 设置默认选中项
例如︰
<input type="radio" name="gender" checked>女
----------------------------------------------------------------
多选项
value是为了在提交的时候告诉后端提交的内容是什么
----------------------------------
爱好:
<input type="checkbox" name="ah" value="lq">篮球
<input type="checkbox" name="ah" value="zuq">足球
<input type="checkbox" name="ah" value="ymq">羽毛球
<input type="checkbox" name="ah" value="ppq">乒乓球
<input type="checkbox" name="ah" value="pq">排球
<!--提交按钮-->
<input type="submit" value="提交按钮">
----------------------------------
文件域
上传控件
<input type="file" name="zp"> //value不能设置
提交按钮
<input type="submit" value="提交"> ---提交表单数据 value的值是显示在按钮上的文字内容
图片按钮:
<input type="image" src="图片路径"> ---提交表单数据
图片按钮可以设置宽高
重置按钮:
<input type="reset" value="点击重置"> I---将表单控件中的值恢复到默认值
特别注意:重置是指将表单恢复到刚开始的状态（样子) 不是清空表单!
普通按钮
普通按钮通常是结合其他语言实现一些别的功能
------------------------------------------------------------------------------
<form>
<input type="button" value="点击放大图片" onclick="document.getElementById('d1').width='100'">
</form>
<img src="图片路径" id="d1">
------------------------------------------------------------------------------
表单框
对整体表单区域的划分
------------------------------------------------------------------------------
<fieldset>
<legend>人员注册信息</legend>
邮箱地址:<input type="text" value="请输入邮箱地址" name="" id="" readonly disabled maxlength="6”>
</fieldset>
------------------------------------------------------------------------------
下拉框
<select><option>
这两个标签是联合使用的，用于实现网页上的"列表选项",通常就是下拉列表
形式如下:
-------------------------------------------------------
<select name="名称" size="显示的行数">
<option value="beijing">北京</option> //如果option没有写value那么就会把option中的文字进行传递,建议写上
<option value="shanghai" selected="selected">上海</option>
</select>
-------------------------------------------------------
说明
1、size属性: 表示该列表选项展示出的项数(行数),如果为1(默认值),就是下拉列表2、selected属性: 表示该<option>选项默认被选中,只应该出现在一个<option>上
在提交的时候是select的name进行提交,而option是作为展示的值进行补充
optgroup 选项组,label描述,标注
---------------------------------
<select>
<optgroup label="河北省">
<option>张家口</option>
<option>保定</option>
<option>石家庄</option>
</optgroup>
</select>
----------------------------------
<textarea> 文本域
<textarea></textarea>
<textarea>标签用于实现"多行文本输入框"
形式
<textarea name="名称" cols="列数" rows="行数">这里可以放内容,通常留空</textarea>
<button>
<button>标签就是"按钮标签",其作用是在网页上展示一个"按钮"而已
形式
<button name="名称">按钮文字</button>
说明
一般不需要用这个标签，而是直接使用<input type="button">来实现更为常见,效果一样
补充
<label>描述标签
下面代码可以实现当点击账号时就可以把焦点集中在<input>输入框
<label for="d1">账号:</label><input type="text" id="d1">
新增标签
结构化语义标签
<article>(文章)
<aside>(侧边)
<header>(头部)
<footer>(尾部)
<nav>(导航)
<section>(小节,文章的章节)等
这些标签主要是为了表示某种"含义"(即所谓语义),但其本身没有什么外观表现,跟<div>一样
<div>是对内容块的包含,可以包含<p>,但<p>不能包含<div>
-------------------------------
<body>
<div id="header">头部信息，导航信息</div>
<div id="section">主体内容</div>
<div id="footer">页脚</div>
</body>
//但是div没有语义化所以引出了语义化标签,效果不变,只是标签变了
多媒体标签
多媒体标签
<audio>: 音频标签
<audio src="音频文件路径" [autoplay] [controls] [loop] ><audio>
属性解释:
autoplay: 无值属性,表示自动播放;
controls: 无值属性,表示显示控制面板;
loop: 属性值: true|false
---------------------------------------------
音乐响起
<audio src="source/Beyond-光辉岁月.mp3" controls></audio>
<br>
source:资源标签
为音频和视频提供多项文件源,如果不支持就会往下去找文件,避免页面不显示,如下所示
--------------------------------------------
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持audio元素
</audio>
--------------------------------------------
<video>: 视频标签
<video src="音频文件路径" [autoplay] [controls] [loop] width="" height=""><video>
--------------------------------------------------------
<video src="source/movie.ogg" controls></video>
有的浏览器不支持播放那么就在<video>标签内容中写上"你的浏览器不支持音频",那么这样就不会在页面显示空白
-------------------------------------------
source:资源标签
为音频和视频提供多项文件源,如果不支持就会往下去找文件,避免页面不显示,如下所示
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持video标签。
</video>
--------------------------------------------
注意:
1,如果使用了source标签,则<audio>或<video>标签上就不要用src属性,否则无效
2,使用多个source是保证如果前面的视频不能播放就会继续播放后续的替代视频
--------------------------------------------------------------------
embed:嵌入第三方插件,通常用的最多的就是flash动画(火狐浏览器不支持)
<embed src="source/helloworld.swf" type="application/x-shockwave-flash">中间不能写内容</embed>
其他标签
<dialog>
<progress>
<mark>
<time>
<addres>等等
简单解释如下
<dialog>: 对话框标签,内容表现为"浮起来的对话框";
【Chrome和safari 6支持,需要open属性】
<progress>: 进度条标签(单标签)表现为一个进度条的样子;
代码
<progress value="50" max="100">
<mark>: 标记标签,文本有"突出显示"效果(通常是显示为黄色背景);
<time>: 时间标签,表示其内容是一个时间;
<address>: 地址标签,表示其内容是一个地址;
<canvas>: 画布标签,可以在其上面作画(需要后续js知识才能实现);
<details>/<summary>: 两者配合使用,实现文本的"详情/概述的折叠效果",也就是点击标题就展开内容
形式为:
<details>
<summary>概述性内容</summary>
详情内容...
</details>
新增input类型
<input>为表单标签中变化形式最多的一种标签
随着type的变化,而展示出不同的外观或功能
之前html4中,<input>的type类型包括
<text>,<password>,<file>,<radio>,<checkbox>,<submit>,<reset>,<button> 等
现在html5中，input的type类型继续增加了如下一些(有的可能有的浏览器尚未实现):
<body>
<form action="a.php">
email: <input type="email"><br />tel:<input type="tel">
<br />
url: <input type="url"><br />
number: <input type="number" step="5"> //step每次增加的数量
<br />
search: <input type="search" list="d1">// search可通过点击输入框就把热点下拉框展现
<datalist id="d1">
<option>世界杯</option>
<option>德国</option>
<option>韩国</option>
<option>俄罗斯</option>
<option>abcd</option>
I <option>哇哈哈</option>
</datalist>
range: <input type="range">
<br />
time: <input type="time">
<br />
datetime: <input type="datetime">
<br />
month: <input type="month">
date: <input type="date">I
week: <input type="week">
color: <input type="color">
<input type="submit" value="点击提交">
</form>
新增属性
Required属性: 必填项
placeholder属性: 设定input文本框的默认提示性文本
autofocus属性: 设定网页一打开的时候自动获得焦点的表单元素。
multiple 属性: 设定一个文件域可以一次选择多个文件(原来只能选择一个文件)
contenteditable属性: 设定一个元素内部的文本内容是"可编辑的"
------------------------------------------------------------------
<body>
<div contenteditable>电视剧看好大框架</div>
<form action="a.php">
账号:<input type="text" required placeholder="请输入账号"autofocus>
<br />
上传文件:<input type="file" multiple>
<br />
<input type="submit" value="点击提交">
</form>
</body>
------------------------------------------------------------------
其他零碎相关知识
<meta>标签
<meta>位于<head>标签中
<meta>标签用于定义有关网页(文档)的相关信息(不作为网页的内容表现信息)
<meta>标签常用的网页(文档)的相关信息如下所示:
'
设定针对搜索引擎的关键词:
<meta name="keywords" content="HTML, CSS,XML,XHTML, JavaScript" />'
设定对页面的描述:
<meta name="description" content="php是世界上最好的语言" />
设定网页的作者或制作组
<meta name="Author" content="网页前端技术教研组">
设定网页每隔多少秒数自动刷新一次:
<meta http-equiv="refresh" content="5" />
设定网页在一定时间后自动跳转到另一个页面:,
I
<meta http-equiv="Refresh" Content="等待的秒数; url="要跳转到的网页地址">
-----------------------------------------------------------------------
网页字符编码
在htm1中,字符编码通常有两个方面的含义:
一是指某个网页文件在编辑的时候,所写(敲)出来的字符所使用的字符编码
二是指当前浏览器接收到html文档内容后,使用哪种字符编码来识别识别这些内容
常见的字符编码:
ASCII编码
GB2312
GBK
Unicode
UTF-8
统一使用UTF-8字符集,这样就避免出现字符集不统一而引起乱码的情况了
网页乱码的成因及应对:
成因: 文件保存时用的编码,跟网页<meta charset="xxx">声明的编码不一致
应对措施: 保持一致
------------------------------------------------------------------------------
特殊字符 - 字符实体
我们有时候会在网页中需要写小于号(<),或者在属性里需要用到引号,
比如:
1、要在网页中写"a<b"(数学上的a小于b),此时就不能直接写小于号(想想为什么?)
2、要在网页中属性中写引号(比如:<img src="xxx.jpg" alt="英文单引号(')和双引号(")的异同">; 此时,就面临了代码怎么写的问题了
我们此时就只能用"特殊写法"来表示其中的特殊字符,这就是所谓的字符实体
如果我们在一串字符上加上 < 那么这段字符就不会显示在html文档,因为他把他当作标签去识别了,但是有时候我们需要在页面去显示特殊标签,此时就会用到我们的字符实体,也就是把标签转换成文本格式去展现
文档类型(了解)
所谓文档类型,基本就是指htm1的标准规范
因为htm1技术在发展过程中,经历并使用过不同的(但其实差异较小的)几个成熟稳定版本,这就形成了几个不同的标准
一个html文档,其中的html代码遵循哪个版本的标准,就被称为是某个文档类型
htm1文档的第一行代码(由”"<!doctype"开头),就是用来指定(声明)当前网页代码所使用的文档类型的
虽然有如下5种文档类型，但其实近年以来，基本上大家都遵循html5标准了(即该标准基本普及了)。
-----------------------------------------------------------------------------------------
5种文档类型如下:
html5:
<!doctype html>
htm14宽松性:
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN" "http:/www.w3.org/TR/html4/1oose.dtd">
htm14严格型:
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
xhtm14过渡性:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm11-transitional.dtd">
‘
xhtm14严格型:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
其中,在后4中文档类型的设定下,设定网页编码的代码需要这样来写(因为这4种都属于htm14):
<meta http-equiv="content-type" content="text/htm1; charset=字符编码名">
内嵌框架标签iframe
内嵌框架标签<iframe>,主要用于在一个网页中(的某个区域),"嵌入"另一个网页
其实现方式就是使用<iframe>标签
基本上,可以把<iframe>标签看做类似<textarea>标签,只要把它放在想放的位置就可以
使用形式:
<iframe src="要嵌入进来的网页地址" name="框架名称" width="宽度" height="高度" frameborder="1"或"0" scrolling="yes"或"no"><iframe>
说明:
1、<iframe>是双标签,但标签中通常不放任何内容
2、frameborder: 用于设定框架窗口是否显示"边框线",1表示显示,0表示不显示
3、scrolling: 用于设定框架窗口是否显示滚动条(类似浏览器的滚动条)
-------------------------------------------------------------
name给框架进行命名,这样可以实现点击其他页面以后指定在iframe中显示
<iframe src="http://www.baidu.com" name="aaa" scrolling="auto" width="1000"height="300"></iframe>
<a href="http://www.jd.com" target="aaa">京东</a> //因为target执行的是在何处打开,此时给框架进行命名,所以会在iframe中打开
<a href="http://www.ifeng.com" target="aaa">凤凰</a>
HTML通用属性
# name 名称 给标签取名字 可重复
<div name="a1">
# class 类名 对标签进行分类 可重复
<div name="a1" class="c1 c2"> 同一标签可以属于不同的类
#id 唯一标识 标识页面标签的唯一性
<div name="a1" class="c1 c2" id="d1">
#title 标题
<a href="http://xxxx.com" title="这是一个链接">内容</a>
#style 样式
#标签之间的关系
div为p标签的父元素(节点)
---------------------------------
<div>
<p>内容</p>
</div>
---------------------------------
后代关系:包含关系,父子关系(直接包含)
兄弟关系:同级关系,必须属于同父级的关系
CSS
css
是这3个单词"Cascading Style Sheet"的首字母缩写,含义是"层叠样式表"
它是html发展到一定程度,面临着一些需要解决或提升的问题而发展出来的一种技术
一句话概括:css专门负责网页的外观表现
html:专门负责网页的内容和层次结构
js:专门负责网页的行为(可操作性的东西)
语法规则:
· 一个css样式,是由选择器和格式声明语句所构成
· 选择器﹔就是选择html标签,就是选择给哪个html标签加样式
· 格式声明语句,要用{}括起来,里面放各种各样的格式声明语句
· 一条格式声明语句是由 属性:属性值;构成
· 属性,就是css.各种各样的属性,属性在css中已经定义好了
· 在属性值的后面用 ; 结束。
· Css,样式必须写单位 <img src="" width="100"> img {width:100px;}
· Css.样式的数值单位用px像素(0不写单位 0px)
HTML:<标签名 属性名="属性值"></标签名>
css: {属性名:属性值;}
# css引入
1、行内引入 [在标签中直接引入]
-------------------------------------------------
<body>
<div style="background:red;">内容</div>
</body>
-------------------------------------------------
2、内嵌引入 [在<head>中加上一个<style>标签进行引入]
-------------------------------------------------
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p {
color:red;
}
</style>
</head>
-------------------------------------------------
3、外部引用 [在<head>中加上一个<link>标签进行引入]
创建一个.css文件
按照css代码写入样式
index.css
----------------------
div{
background:red;
}
----------------------
然后在html页面<head>标签中进行引入
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="index.css路径">
</head>
CSS选择器
css中的选择器,大致可以分为以下几类:
基础选择器
关系选择器
属性选择器
伪类选择器
伪元素选择器
各选择器的形式语法中的代号含义如下:
E:
代表"Element"即元素;
s:
代表"Seletor"即选择器;
attr:
代表"attribute"即属性;
----------------------------------
基础选择器
- 通配符选择器
符号:*{属性:属性值;}
含义:作用于页面上的所有元素
- 标签选择器:
语法:标签名{属性}
含义:选择指定标签名的元素
- 类选择器
语法: .class属性名{属性:属性值}
含义: 指定的class名的元素
- id选择器
一般用于JS 且全局id属性值唯一
语法: #id属性名{属性:属性值}
含义: 指定的id名的元素
------------------------------------
关系选择器
- 子代选择器:
S1>S2
匹配S1中的下一级S2,下一级就是"子级"或子代
其中S1,S2都可以是独立使用的选择器(比如id选择器,class选择器,标签选择器等)
比如S1为<div>,S2为<p>,即形式为"div>p",就表示找出<div>中的所有子级<p>标签
又比如:
#p1>a {...}: 表示找出id为p1 的标签中的所有子代<a>标签
.cc>pi {...}: 表示找出class为cc的标签中的所有子代<p>标签
#p2>.cc2>img {...}: 表示找出id为p2中的子代的class为cc2中的所有子代<img>标签
- 后代选择器:
语法:选择器1 选择器2{属性}
含义:选择选择器1的后代选择器2的元素·
S1.S2
匹配S1内部的所有后代S2
此时就不仅仅局限于子代标签了,还包括孙代,曾孙代,等等
简单说,就是找出放在S1所选中的标签中的所有S2所选中的标签
比如:
div p {...}: 匹配<div>中的所有后代<p>标签,即凡是放在<div>中的<p>标签都会找出来
#p a {...}: 匹配<id>为p1的标签中的所有<a>标签，即只要<a>标签在p1中就可以
.c p {...}: 匹配class为cc的标签中的所有<p>标签，即只要<p>标签在.cc中就可以
#p2 .cc2 img {...}: 匹配id为p2中的class为cc2中的所有<img>标签
----------------------------------------------------------------
分组选择器
- 并集选择器
- S1,S2
语法:选择器1,选择器2{属性}
两个选择器,可以使用一个英文逗号(,)连接起来
表示这两个选择器，都使用同样一个样式设定(属性设定)
比如:
p,div { ... }
#price,.addr {...}
p.cc, .cc,div .cc2{...}
- 相邻选择器:
s1+s2
匹配S1后面紧挨着的同级(兄弟)元素S2
- 兄弟选择器:
-S1~S2
匹配S1后面的所有同级(兄弟)元素S2
-----------------------------------------------------
属性选择器
属性选择器是通过元素的属性的特征信息来确定所选元素
[attr]
匹配具有所给定属性名称的标签
其中attr是一个"示意性符号",表示"属性名"
比如:
[color] { background: yellow; }
//能选中具有color属性的所有标签
[width] { border: 1px solid red; }
//能选中具有 width 属性的所有标签
-------------------------------------------------
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
[id]{
border:10px solid red;}
</style>
</head>
<body>
<img src="images/girl1.jpg" width="100" id="abcd">
<img src="images/girl2.jpg" width="100" class="aabbcc">
<img src="images/gir19.jpg" width="100" id="img1">
<img src="images/girl4.jpg" width="100" class="img2">
</body>
-------------------------------------------------
[attr="val"]
匹配具有某个属性且属性值为给定值的标签
比如:
[color="red"] { background: yellow;}//能选中具有color属性且值为"red"的所有标签
[width="100"] { border: 1px solid red;}//能选中具有width属性且值为”100”的所有标签。
-----------------------------------------------
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
[class="img2"]{
border: 10px solid blue;}
</style>
</head>
<body>
<img src="images/girl1.jpg" width="100"id="abcd">
<img src="images/girl2.jpg" width="100" class="aabbcc">
<img src="images/girl9.jpg" width="100" id="img1">
<img src="images/girl4.jpg" width="100" class="img2">
<div id="d1">div</div>
</body>
-------------------------------------------------
[attr~="val"]
匹配具有某个属性且属性值包含所给定单词的标签
注意:
1、必须是一个"单词"形式,比如属性值为"a dog",则使用"dog"可以匹配,而使用"do"不能匹配
2、对于中文,除非有明确的空格,否则一句连续的句子(含中文标点符号)也只能算一个单词
<p title="a dog">...</p>
[title~="dog"]{...}//可以选中上面那个p标签
[title~="do"]{...}//选不上
-------------------------------------------------
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
[id~="d1"]{
background: red;
}
</style>
</head>
<body>
<img src="images/girl1.jpg" width="100"id="abcd">
<img src="images/girl2.jpg" width="100" class="aabbcc">
<img src="images/gir19.jpg" width="100" id="img1">
<img src="images/girl4.jpg" width="100" class="img2">
<div id="d1">div</div>
</body>
-------------------------------------------------
[attr*="val"]
匹配具有某个属性且属性值包含给定的字符的标签
<p title="a dog">...</p>
[title*="dog"]{....}//可以选中上面那个p标签
[title*=do"]{....}//也可以选上
-------------------------------------------------
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
[class*="b"]{
border: 10px solid yellow;
}
</style>
</head>
<body>
<img src="images/girl1.jpg" width="100"id="abcd">
<img src="images/girl2.jpg" width="100" class="aabbcc">
<img src="images/gir19.jpg" width="100" id="img1">
<img src="images/girl4.jpg" width="100" class="img2">
<div id="d1">div</div>
</body>
-------------------------------------------------
[attr^="val"]
匹配具有某个属性且属性值以给定的字符开头的标签
<p title="a dog">...</p>
[title^="dog"]{....}//选不上
[title^="a"]{....}//能选上
[title^="a d"]{....}//也可以选上
-------------------------------------------------
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
[id="a"]{
border:10px solid red;
}
</style>
</head>
<body>
<img src="images/girl1.jpg" width="100"id="abcd">
<img src="images/girl2.jpg" width="100" class="aabbcc">
<img src="images/gir19.jpg" width="100" id="img1">
<img src="images/girl4.jpg" width="100" class="img2">
<div id="d1">div</div>
</body>
-------------------------------------------------
[attr$="val"]
匹配具有某个属性且属性值以给定的字符结尾的标签
-------------------------------------------------
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
[id$="1"]{
border:10px solid yellow;
}
</style>
</head>
<body>
<img src="images/girl1.jpg" width="100"id="abcd">
<img src="images/girl2.jpg" width="100" class="aabbcc">
<img src="images/gir19.jpg" width="100" id="img1">
<img src="images/girl4.jpg" width="100" class="img2">
<div id="d1">div</div>
</body>
-------------------------------------------------
伪类选择器
伪类选择器是通过单冒号(:)和特定的具有某种含义的单词来确定所选元素
所谓伪类选择器,是相对于"类选择器"来说的
对比如下:
类选择器:
说明:类的名称是由我们程序员来设定的,符合命名规范就行
形式: .类名称{...}
伪类选搔器:
说明:伪类的名称是css标准中所预先设定的,我们不能自己设定
可用的伪类名不多
形式: :伪类名称{...}
下面分别介绍一些常用的伪类选择器(伪类名)
-------------------------------------------------
:link, :visited, :hover, :active
这4个伪类主要用于表示一个链接(也就是a标签)的4种不同状态
它们可以设定一个链接在不同状态下的外观表现(样式表现)
:link: 表示一个链接初始时候的状态
:visited: 表示一个链接在访问(点击)过之后的状态
:hover: 表示一个链接在"鼠标移上去"(鼠标悬停)的时候的状态
:active: 表示一个链接在"活动状态"的时候的状态,通常就是点击的瞬间(按住不放能看到)
注意:
1、:hover可以用于其它标签,并且经常用
2、对于a链接的这4个状态,他们有顺序问题,必须按上述顺序才有合理效果(lvha,Lv哈),
-----------------------------------------------
a:link{color:red;}
a:visited{color:green;}
a:hover{background: yellow;}
a:activeifont-style: italic;}
-----------------------------------------------
<style type="text/css">
div{
border: 1px solid red;
}
div span{
line-height: 30px;
}
div span:hover{
background-color: ##BEB2B2;
}
</style>
</head>
<body>
<div>
<span>首页</span>
<span>网站导航</span>
</div>
</body>
-------------------------------------------------
其他
p:hover
div:hover
li:hover
li:active
----------------------------------------------
E:focus
表示一个元素在成为可输入状态(获得焦点)的时候,主要用于表单元素
其中"E"表示某个元素(或某个选择器所选中的元素)
这样连着写,即表示该元素在获得焦点的时候,其样式表现如何,后面的"E"也都是这个意思,也可以不用前面写"E",而是直接用":focus",但实际应用中,一般会在前面有这个限定
比如:
input:focus { ... } //表示input元素在获得焦点的时候
也可以不用input,如下所示:
:focus{ ... }
但此时其实所选择的范围扩大了(不仅仅针对input元素)
------------------------------------------------
E:first-child,E:last-child,E:only-child,E:nth-child(n)
这几个伪类用于表示(或选中)"具有某种特征的子元素E"
E:first-child -- 匹配作为父元素的第一个子元素E
E:1ast-child -- 匹配作为父元素的最后一个子元素E
E:only-child -- 匹配作为父元素的唯一一个子元素E
E:nth-child(n) -- 匹配作为父元素的第n个子元素E.括号中的n是一个具体数字。
还可以这样用: nth-child(2n+1)表示奇数项, nth-child(2n+2)表示偶数项
举例:
li:first-child{ ... } //表示作为第一个子元素的li标签s
td:1ast-child{ ... } //表示作为最后一个子元素的td标签
p:only-child{ ... } //表示作为父元素中只有这一个子元素的p标签。
li:nth-child(2){... } //表示作为第2个子元素的li标签
-------------------------------------------------
<style type="text/css">
li:first-child{
background: yellow;
}
li: last-child{
background: red;
}
li:only-child{
}
li:nth-child(2){ //如果括号内为odd或(2n+1)那么就是匹配他的奇数个 even或者(2n)是匹配偶数个 //3n为3的倍数
background: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</head>
-------------------------------------------------
E:empty,E:checked,E:enabled,E:disabled
E:empty
-- 匹配元素内部为空(没有内容)的元素
"内容"指的是一个标签内是否有其他html代码或文字.显然,单标签内是不可能有内容的
E:checked 【checkbox】
-- 匹配被选中的元素(用于input且type为radio或checkbox的时候)
E:enabled【text】
-- 匹配"可用的/有效的元素"(用于表单元素)
E:disabled【text】
-- 匹配"不可用的/有效的元素"(用于表单元素)
-------------------------------------------------
<style type="text/css">
div:empty{
height: 30px;
background: red;
}
input: checked{
width:100px;
height:100px;
}
input:enabled{
background: red;
}
input:disabled{
background : yellow;
}
</style>
<body>
<div></div>
<div>123</div>
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">乒乓球
<input type="checkbox">羽毛球
内容:<inbut tvpe="text">
内容:<input type="text" disabled>
</body>
-------------------------------------------------
伪元素选择器 //伪元素表示没有这个元素但是可以当成一个元素去用
伪元素选择器是通过双冒号(::)和特定的具有某种含义的单词来确定所选元素
伪元素选择器通常是"本没有这个元素(标签)",但会创建出一个隐性元素并对其进行样式设定
伪元素选择器又称为"伪对象选择器"
-------------------------------------------------
E:before
表示在元素E的内部的最前面创建一个元素(伪元素)
其中必须写上一个属性: content:"内容”;//当然,内容可以为空
-------------------------------------------------
<style type="text/css">
div::before{ //伪元素是行内样式可以改为块,并且伪元素在页面上是找不到这个标签的
content: "p段落前面";
}
</style>
</head>
<body>
<div>
sajhsajdhajksajkjkasd
<p>段落</p>
</div>
</body>
-------------------------------------------------
E:after
表示在元素E的内部的最后面创建一个元素(伪元素)其中必须写上一个属性: content:"内容";//当然，内容可以为空
-------------------------------------------------
<style type="text/css">
div::after{
content: "p段落后面";
background: red;
border:1px solid blue;
display: block;
}
</style>
</head>
<body>
<div>
sajhsajdhajksajkjkasd
<p>段落</p>
</div>
</body>
-------------------------------------------------
E:selection
表示将元素E中"选中的文字"单独作为一个元素(伪元素)
-------------------------------------------------
.box1::selection{
background: pink;
coLor: red;
-------------------------------------------------
E:first-letter
表示元素E中的"第一个字符"可以单独作为一个元素(伪元素)
.box1::first-letter{
font-size: 100px;
}
-------------------------------------------------
E::first-line
表示元素E中的"第一行"可以单独作为一个元素(伪元素)
box1::first-line{
font-weight:bolder;
font-famiLy:仿宋;
}
-------------------------------------------------
几大浏览器内核标识:
谷歌Chrome: -webkit--
火狐FF: -moZ-
微软IE: -ms-
苹果Safari: -webkit-
欧朋Opera: -o-
-------------------------------------------------
p::-moz-selection{
color: pink;
background: #E81EC1;
}
p::selection{
color: pink;
background:#E81EC1;
}
-------------------------------------------------
优先级
结论如下:
伪元素选择器>!important>行内样式>id选择器>类选择器(或伪类选择器)>元素选择器>*>继承样式>浏览器默认样式
其中,伪元素选择器又有::first-letter>::selection>::first-line
"!important"
就是在一个属性的设定中,在属性值后面加"!important"标识,然后在加分号(;)
例如:
.cl{ color: red!important; }
#d1{ color: yellow; }
此时,如果上述两个选择器都能选中某一个元素,则其中的文字就是红色(!important优先了)
-------------------------------------------------
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#d1 div p{
对段落2的属性操作
}
</style>
</head>
-------------------------------------------------
-------------------------------------------------
<body>
<div id="d1">
<p>段落1</p>
<div>
<p>段落2</p> -->改变此标签的属性
</div>
</div>
<p>段落3</p>
</body>
-------------------------------------------------
子代选择器
语法:选择器1>选择器2{属性}
含义:选择选择器1的子元素选择器2
-------------------------------------------------
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#d1>p{
background : yellow;
对段落1的属性操作
}
#d1>div>p{
background : yellow;
对段落2的属性操作
}
</style>
</head>
-------------------------------------------------
-------------------------------------------------
<body>
<div id="d1">
<p>段落1</p> -->改变此标签的属性
<div>
<p>段落2</p> -->改变此标签的属性
</div>
</div>
<p>段落3</p>
</body>
-------------------------------------------------
注:
元素包含
<p><h1>标签只能包含内容,不能包含一个<div>等块元素
选择器优先级
1、ID选择器(100)>类选择器(10)>标签选择器(1)>通用选择器
2、如果遇到复合选择器
把权重相加:得到的结果越大优先级越高
3、如果两个权重相加相等那么结果为靠后的样式(后面会覆盖前面的)
css属性
#元素转换
-------------------------------------------------
<style type="text/css">
div{ 块元素可以设置宽高,样式生效
border : 1px solid red;/*1px的红色的实线边框*/
width:100px;
height: 100px;
}
span{ span为行内标签不能设置宽高,样式不生效,如果要生效使用display:block (块元素)
border : 1px solid red;/*1px的红色的实线边框*/
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>div</div>
<span>span</span>
-------------------------------------------------
display: block (块元素), inline (行元素),inline-block (行内块,既可以设置宽高,又可以在一行显示),none (隐藏元素不显示)
字体属性
font-size:大小
font-family:样式
font-style:倾斜【italic倾斜,normal正常】
font-weight:加粗【bold 加粗,normal 正常】
-------------------------------------------------
<style type="text/css">
div{
font-size:60px;
font-weight: normal;
font-style:normal;
font-family:幼圆;
}
</style>
-------------------------------------------------
文本属性
Color:颜色
Text-align:对齐
Text-decoration:文本线【underline下划线，line-through中划线，overline上划线，none不显示】
letter-spacing:字间距
word-spacing:词间距
line-height:行高【让行高和高度相同，内容会垂直居中】
CSS盒子
盒子就是一个元素（标签）的所辖范围，简单来说，基本就是一个"矩形区域"
盒子概述
所谓盒子,就是将html网页中的标签在网页版面中所占据的平面范围,抽象出来的一个"视觉形状"
一个最简单的理解就是:几乎所有标签,都可以看做是一个"矩形盒子",具有一定的宽高(区域)
总体上来说,一个盒子,是由若千个部分构成的,从内到外依次包括:
盒子内容区,内边距区,边框,外边距区
记住以下几个单词:
content:内容
padding:内边距,又称为内补白,是一片空白区域
border:边框
margin:外边距,又称为外补白,也是一片空白区域
top,right,bottom,left:上,右,下,左
特别注意:
1、一般情况下,一个盒子中放置内容或其他元素(元素也是盒子),实际是放在内容区的
2、平常我们看不到内边距,边框和外边距,是因为他们默认都是О(宽度,或厚度)
------------------------------------------------------------------
宽高
<style type="text/css">
*{
margin:0px; //因为body和html中间有边距需要设置
padding:0px;
}
html,body{
border: 1px solid red; //设置元素占整个文档大小
width: 100%;
height: 100%;
}
body{
border: 2px solid blue;
width: 100%;
}
div{
border: 1px:solid red;
width:100%;
}
</style>
------------------------------------------------------------------
边框
边框属性border
边框属性就是设置一个盒子的边框线的具体特性
边框线的特性有3个:
border-style:
线型,属性值通常有:solid(实线),dashed(虚线),dotted(点线)
border-width:
线的粗细，,长度单位,比如1px
border-color:
线的颜色,颜色值,比如red,rgb(255,0,0),#FF3366
border: border-top(上边框）,border-right(右边框),border-bottom(下边框),border-left(左边框)
---------------------------------
内填充
内边距属性padding
含义:
内边距是指在盒子结构中,盒子的边框线和内容之间的一段空白区域(内容放不进去)
我们能设置的就是这个空白区域的大小(宽度)
同样分4个方向，分别可以单独设置:
padding-top: 1px; //上内边距,
padliing-right:2px; //右内边距
padding-bottom: 4px; //下内边距;
padding-left:8px; //左内边距
---------------------------------
<style type="text/css">
div{
border: 1px solid red;
width: 158px; //如果要设置一个宽度为200的盒子,又要有填充,那么就要把填充的宽度和border的宽度减掉
padding: 20px; //边框到内容的距离
}
</style>
---------------------------------
<style type="text/css">
div{
border:1px solid red;
width: 200px;
/*上 右 下 左*/
padding: 10px 20px 30px 40px;
/*上 左右 下*/
padding: 10px 20px 30px;
/*上下 左右*/
padding: 10px 20px;
/*上下左右*/
padding: 10px;
}
</style>
---------------------------------
<head>
<style type="text/css">
*{padding:0;} //因为不知道哪些元素带了padding,所以一般在前面直接设置全局清除内填充
ul{
border: 1px solid yellow;
padding: 0; //ul自带padding所以需要清空
}
li{
border: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
</ul>
</body>
---------------------------------
外边距 //盒子与盒子之间的距离
向右向下为正
向左向上为负
外边距属性margin
含义:
外边距是指在盒子结构中,盒子的边框线,跟盒子的外部其他元素之间的一段空白区域
我们能设置的就是这个空白区域的大小(宽度)
它的属性设置和含义,跟内边距(padding）非常类似:
margin-top: 1px; //上外边距
margin-right:2px; //右外边距,
margin-bottom: 4px; //下外边距
margin-left: 8px; //左外边距
margin:宽度1 [宽度2] [宽度3] [宽度4]; //同时设置4个方向,用的最多,推荐使用
---------------------------------
<style type="text/css">
div{
/*上右下左*/
margin: 10px 20px 30px 40px;
/*上左右下*/
margin: 10px 20px 30px;
/*上下左右*/
margin: 10px 20px;
/*上下左右*/
margin: 10px;
/*盒子居中*/
margin:0 auto;
}
</style>
---------------------------------
背景属性background.
含义:
背景是指在盒子结构中,衬托在边框线范围以内的背景颜色或背景图
可以设置背景颜色,或背景图,或同时设置.其中背景图有多项参数可设置
主要的背景属性设置有:
设置背景颜色:
background-color: yellow;
设置背景图:
background-image: url(图片路径); //注意，图片路径是相对于当前网页或css文件(对外部样式来说).
设置背景图的位置(有背景图的前提下有效)
backgioud-position:水平位置[垂直位置];
说明:
1,如果不设置该属性,默认值为"0,0",即在盒子的左上角。
2,可以设置1个值或2个值;设置1个值的时候,第二个默认为center(居中)
3,水平位置:可以设置为长度值,或百分比,或以下固定值: left/center/right
4,垂直位置:可以设置为长度值,或百分比,或以下固定值:/top/center/bottom
设置背景图是查平铺(有背景图的前提下有效):
backgroumd-repeat: 属性值1[,属性值2];//有以下几个属性值可用:
repeat:重复,默认值;
no-repeat:不重复;
repeat-x:只在x方向重复;
repeat-y:只在y方向重复;
背景综合属性background:
可以同时设置上述几个有关背景的属性,相互之间用空格隔开,比如:
background: yellow; 只设置背景颜色;
background: yellow url(./images/bg.jpg) no-repeat;
background: yellow url(./images/bgjpg) repeat-y lelft top;
background: yellow url(./images.bg.jpg) repeat no-repeat 5px 10px;
同时放多张背景图
background:url(images/car1.jpg) no-repeat,url(images/girl6.jpg) no-repeat right top;
---------------------------------
轮廓线
轮廓属性outline
含义:
轮廓指的是盒子边框线外面再套一层"修饰性"线条,该线条只有视觉效果,不占版面空间
实际上,如果有外边距(margin),轮廓线是可以跟margin有重叠的
轮廓属性主要有:
outline-width: 轮廓线宽度
outline-style: 轮廓线线型
outline-color: 轮廓线颜色
outline-offset: 轮廓线距离边框线的距离(间隙)
------------------------------------------------------------------
布局属性
盒子的显示效果属性display
含义:
指设置一个盒子(元素,标签)在网页中的基本显示特性,最常见的就是显示为块元素特性还是行内元素特性
display:通过这个属性,则所有表现型元素,都可以任意将其作为块元素或者行内元素来使用!
常用的属性值有:
block:显示为块状元素
inline:显示为行内元素
block-inline:显示为行内块元素
含义:整体表现为块元素(不会自动折行),但可以跟其他行内元素并行在一行(表现为行内元素)
说明:一个img就是典型的行内块元素(它本身不会折行,但一行可以放置多个)
none:不显示(隐藏元素)
关于元素按显示特性分类:
块状元素:
元素独占"一行"
典型标签: <div>, <p>,<h1>~<h6>,<pre>,<hr>, <ul>, <ol>,<li>,<dl>, <dt>, <dd>,<table>
行内元素:
元素在一行内从左到右"流式显示",直到碰到行尾,再自动换行下一行显示
典型元素:<span>, <a>, <b>, <strong>,<i>, <font>, <em>
行内块元素:
元素本身不换行(不折断)但只要能显示得下,则一行可以显示多个(跟行内元素一样)
典型元素: <img>, <input>,<select>,<textarea>,<button>,<video>,<audio>
特别注意:
1、行内元素不能设置宽高值.行内元素的宽高值由其中的内容多少、文字大小和行高决定
2、行内元素不能设置上下外边距和上下内边距(实际可以设置,但无效,不占空间)
3、行内元素可以设置边框,但上下边框不占空间(左右边框会占空间)
4、行内块和块元素都具有盒子的所有属性,唯一区别是行内块可以多个出现在一行中
-----------------------------------------------------------------
溢出
溢出属性 overflow
当一个盒子里面有浮动元素,则:
1、如果该盒子不设置高度,就应该清除浮动
2、如果该盒子设置了高度,此时就应该考虑溢出时的处理效果
3、如果该盒子设置了高度,则里面盒子的浮动,清不清除都无关紧要
含义:
就是设置一个盒子内部的内容,超出了该盒子的设定大小的时候,怎么显示该内容的问题
overflow常用值有:
auto:自动,按浏览器的默认设置自动处理,可能各浏览器会有所不同
scroll:滚动,就是超出范围的时候,盒子出现滚动条(像浏览器的滚动条那样)
hidden:隐藏,就是将超出部分隐藏起来(视觉上不可见)
visible:显示,就是虽然,超出去了,但仍然显示出来,这是这个属性的默认值,无需设置
此时,虽然可能超出外层盒子,但不会影响外层盒子后续的位置(布局)
当一个盒子里面有浮动元素,则:
1、如果该盒子不设置高度,就应该清险浮动
2、如果该盒子设置了高度,此时就应该考虑溢出时的处理效果
3、如果该盒子设置了高度,则里面盒子的浮动,清不清除都无关紧要
------------------------------------------------------------------
可见性
可见性属性visibility.
含义:
设置元素的可见性,主要有两个值:
visible:可见;
hidden:隐藏
特别注意:
设置visibility为hidden,虽然元素不可见了,但元素原本所占的空间仍然存在(效果是一片空白)
对比:设置display为none,也是隐藏,但此时该元素不但不可见,而且不占版面空间
------------------------------------------------------------------
浮动
浮动的含义与作用:
浮动就是让一个元素往左或右边"尽量挤靠",以使其周边文字(行内元素)可以围绕该浮动元素显示
其典型的表现就是一张图片向左对齐(align="left")的时候,图片标签前后的文字都能够绕着图片展示
这是"浮动"的原本含义和作用
----------------------------------------------------------------
是的诉讼费发浮动电饭锅个个个<img src="xxx.jpg" align="left">是的诉讼费发浮动电饭锅个个个是的诉讼费发浮动电饭锅个个个是的诉讼费发浮动电饭锅个个个是的诉讼费发浮动电饭锅个个个是的诉讼费发浮动电饭锅个个个
------------------------------------------------------------------
上面是图片(img标签)使用align属性来达到该效果的,而使用css 的浮动属性float,却可以使几乎所有盒子元素都能够实现这个效果(如果没有css,在 html语法中则只有img标签可以做到这一点)。
------------------------------------------------------------------
<style type="text/css">
#d1{
width:100px; //浮动的文字不会被盖住
height:100px; //浮动的元素会把后面的元素盖住,后面的元素会往div里面挤
background:red;
float:left; //当浮动的元素由一个div包裹两个div,一个浮动左,一个浮动右,那么就包裹不住,此时,在浮动的父元素加上 overflow: hidden;此时就可包裹,也就是清除浮动,也可使用clean:left/right/both 进行清除,要在盒子的最后一行写入一个块元素进行设置
}
#box {
border: 1px solid blue;
overflow: hidden;此时就可以清除浮动
}
</style>
</head>
<body>
<div id="box">
<div id="d1">ffs gdfg </div>施蒂利克浮点数地方施蒂利克浮点数地方施蒂利克浮点数地方施蒂利克浮点数地方施蒂利克浮点数地方
</div>
------------------------------------------------------------------
清除浮动
<style type="text/css">
#box·.clear{
clear:both;
}
</style>
</head>
<body>
<div id="box">
<div id="d1"></div>
<div id="d2"></div>
<div class="clear"></div>
</div>
</bodv>
------------------------------------------------------------------
但是以上办法都有缺陷,最好的办法就是使用伪元素
<style type="text/css">
box::after{
content: "";
display: block; //默认是行内元素,所以要转换成块元素
clear: both;
</style>
<body>
<div id="box">
<div id="d1"></div>
<div id="d2"></div>
</div>
</body>
------------------------------------------------------------------
定位
定位就是通过有关定位的属性来明确设定一个盒子的在以下两个方面的位置:
1、在(x,y）平面上所处位置
2、在高度(z轴)方向的位置(层次)
这是相对于一个盒子的"自然位置"和"浮动位置"而言的
自然位置就是所谓的正常的文档流所确定的位置
浮动位置就是由于浮动的特性而确定的位置
定位方式属性 position
position用于设定一个元素的位置按什么方式来确定
通俗说就是设定元素"放在哪个位置"(可由4个定位属性确定: top,left,right,bottom)
有如下4个值可用:
static:静态定位(其实就是没有定位)
是一个元素的默认定位方式,也就是一个文档中元素的正常文档流所确定的定位
对其给定定位位置(top,left,right,bottom）的值无效
relative:相对定位
相对于其本来应该所处的位置而设定一个相对性定位
需给定位置(top,left,right,bottom)
会占有原文档位置
absolute:绝对定位
相对于其上层最近的一个非static定位元素而设定的一个绝对性定位
需给定位置(top,left,right,bottom);
不会占有原文档位置
而如果其所有上级都没有非static定位元素,就相对于窗口来定位 -- 手册上说的相对于body,是不准确的
fixed:固定定位
相对于当前网页窗口而设定的一个绝对性定位
需给定位置(top,left,right,bottom)
注意:
1、relative定位虽然会改变元素的位置,但不影响上级盒子和相邻盒子该有的正常宽高和位置
2、absolute定位和fixed定位的元素脱离了文档流,也就是上级盒子中不会计算其宽高(像没有一样)
3、当兄弟元素之间存在相对,绝对定位,默认的层级就是谁的HTML文档在下面谁的层级显示外面
-----------------------------------------------------------------
层级
z-index:3
层叠属性z-index
含义:
就是将一个元素(盒子)默认情况下所展示在的那个平面(就是屏幕所在面)的垂直线当做z轴方向(就是眼睛盯屏幕时的那个"视线"方向),朝眼睛方向为z轴的正方向.则z-index可以设定一个元素(盒子)在z轴方向的"叠放层次"的高低,用整数表示.越大值表示越高,也就是离眼睛越近,自然就会覆盖住比它低的其他盒子
列表
列表与表格样式
列表样式指的是ul(无序列表)和ol(有序列表)的表现特性;
表格样式指的是table的表现特性
都比较简单,用得也不多
列表样式
列表样式主要是设置ul或ol前面的那个"列表符"的特性,包括:
list-style-type:
用于设置列表样式的类型,比如原点(disc),圆圈(circle)阿拉伯数字(decimal),罗马数字,英文字母.有了这个属性,对ul和ol来说,就没有差别了!
list-style-image:url()
用于设置列列表前面的小图标(图像),也就是说,用一个图片来代替上面的列表符
如果设置了这项,则1ist-style-type就失效。
list-style-position:
用于设置列表项目符的位置,只有两个值: outside(外面,默认),inside(里面).
指的是列表符,是放在li盒子的里面,还是放在li盒子的外面。
list-style:
上述3个属性的综合属性
----------------------------------------------------------------------------------------
盒子阴影box-shadow
属性:
box-shadow作用:
用于设定一个盒子的阴影效果形式:
box-shadow:水平偏移值 垂直偏移值 [模糊值] [外延值] [颜色] [inset];
说明:
1,至少设置两个长度值,分别表示阴影的水平偏移量和垂直偏移量,可以为负;
2,模糊值是设定阴影的模糊效果的宽度,可以不设置,则默认为0;
3,外延值是设定阴影再"扩大"的宽度,可以不设置,则默认为0;
4,inset表示设置"内阴影",可以不设置,则默认为外阴影
举例:
.box1{ box-shadow: 2px 2px red;}
.box2{ box-shadow: 2px 5px 2px #00FFFF;}
.box3{ box-shadow: 2px 5px 2px 3px rgba(33,33,33,0.5);}
.box4{ box-shadow: 2px 5px rgba(66,66,66,0.5) inset; }
----------------------------------------------------------------------------------------
圆角边框border-radius
属性:
border-radius
作用:
用于设定一个盒子的圆角特性
形式:
border-radius:水平圆角半径[/垂直圆角半径];
说明:
1,垂直半径可以省略,则其同水平半径的值
2,半径设置可以提供1~4个值,具体如下
提供1个:4个角都为该值;
提供2个:第1个表示上左和下右,第2个表示上右和下左;
提供3个:第1个表示上左,第2个表示上右和下左;第3个表示下右;
提供4个:分别代表4个角上的半径(依次上左,上右,下右,下左)
举例:
border-radius: 5px; //4个角半径均为5px;
border-radius: 5px/15px; //4个角水平半径为5px,垂直半径为15px;
border-radius: 5px 6px 7px 8px; //四个角半径分别是5px,6px,7px,8px;
border-radius: 5px 6px 7px 8px/15px 16px 17px 18px;
有关水平半径和垂直半径的图示:
---------------------------------------------------------------------------------------------------
图像边框
边框背景的主要属性有:
border-image-source:
设置作为边框背景的图片源;
border-image-slice:
设置要将边框背景图片进行"切割"的分割方式
形式为:
border-image-slice:数值[fill]; //特别注意:这里的数值不带单位!
其中"数值"可以是1-4个值,分别代表上右下左4个方向的"切割厚度"
fill代表"填充",用于中间区域填充到盒子内容区
border-image-width:
设置图片边框的宽度,也可以设定1-4个值
通常设定为auto(自动),此时就会使用border-image-slice所设定的切割厚度
border-image-repeat:
设置边框背景的填充方式,可以设定1-2个值,表示横向和纵向的填充方式
可用值如下:
stretch: 指定用拉伸方式来填充边框背景图,这是默认值,也最常用,推荐使用
repeat: 指定用重复平铺方式来填充边框背景图.类似背景图的repeat,背景图不改变大小。
round: 指定用平铺方式来填充边框背景图,图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框
space: 指定用平铺方式来填充边框背景图,图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框
注:有的浏览器中应用边框图属性需同时设定border属性。
JavaScript
含义:基于客户端的脚本语言,能让用户跟浏览器产生互动
应用:注册验证，动画效果
HTML:标记语言
JS:编程语言
javascript注释:
单行注释: //注释内容
多行注释: /*注释内容*/
javascript引入
行内引入
<body>
<a href="javaScript:alert('你想一夜暴富吗?');">链接</a></body>
内部引入
可以往<head>/<body>标签内写入
<script type="text/javascript">
alert(123);
</script>
I
3、外部引用 [在<head>中加上一个<link>标签进行引入]
创建一个.js文件
按照js代码写入样式
index.js
---------------------------------
alert("这是一个外部引入js的文件");
---------------------------------
然后在html页面<head>标签中进行引入
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="index.js路径 "></script>
</head>
此时引入的js文件的<script>标签中不能再写js代码
如果需要另写就另起一行
javascript输出
alert:弹出一个提示或者警告框 (作用于浏览器,会屏蔽后面的代码,加上标签不会有效果)
document.write("<b>你好啊大佬</b>"); (作用于文本加上标签可以实现body的效果)
javascript语法规则
1、所有的符号都必须是英文状态的
2、区分大小写
3、建议:每条语句后面加上分号;
javascript 变量
变量: 用来保存数据
语法:var 变量名=值;
eg: var a1=13;
变量形式
var a;
定义变量a不保存数据。
var a = 1;
定义变量a初始化数据为1
var a,b,c,d;
定义变量a，b，c，d都不给其保存数据 当alert时输出为undefined
var a,b=2,c,d=4;
定义变量a不保存数据,变量b保存数据为2,变量c不保存数据,变量d保存数据
变量名
1、数字一定不能开头的
2、包含:数字，字母，下划线变量名中不可以包含空格。
3、不要和系统关键字，保留字相同区分大小写的
4、建议:变量名要起的有意义+
javascript 数据类型
typeof(n)查看数据的数据类型。
数字类型: number,数字都是这个类型
字符类型: string,字母,符号,汉字,需要用引号包起来空类型:nul1,表示为空
未定义类型: undefined,表示没有定义
布尔类型: boolean(bool) , true(真),false(假)
复合数据类型: 复杂数据类型,数组array,对象object
运算符
算数运算符
1、符号: +,-,*,/,%(取余),++(自加),--(自减)
2、取余%: 求相除的余数
3、++和-- (a++，++a)
注意:
当有其他操作参与自增的时候,a++和++a就有区别
var b = a++;【先把a的值赋值给b,a再自加1】
var b = ++a;【先把自加1，再赋值给b】
var a = 3;
var b = a++;// b = 3,a = 4; 因为在此处a已经自加1
var c = ++a;
alert(c); //c=5
eg:
var a = 6;【a=6】
var b = a++; 【b=6,a=7】
var c = b++;【c=6,b=7】
var i = ++b; 【b=8,i=8】
var j = i++;【j=8,i=9】
var n = c++;【n=6,c=7】
var m = ++j;【j=9, m=9】
var k = n++;【k=6, n=7】
var ab = ++n; 【n=8,ab=8】
【a=7,b=8,c=7, i=9, j=9,n=8,m=9,k=6,ab=8】
比较运算符
符号:>,<,>=,<=,==,!=,===(全等于),!==(不全等于)
==和===区别:
==: 判断两个数据的值是否相同,值相同即为true
===: 判断两个数据的值和数据类型是否相同,都相同则为true,否则为假
逻辑运算符
符号: &&,||,!
逻辑与 &&:两个条件,如果都为true则为真,否则为假
逻辑或 ||:两个条件,如果有一个为true则为真,只有两个都为false的时候为假
复合赋值运算符:
符号: +=,-=,*=,/=
用法:a+=2; 【a = a+2;】
三元运算符:
符号: 条件?true: false;
执行: 条件为真,执行true,条件为假,执行false
----------------------------------------
var a = 9;
var result = a<=9?"对的,你是对的":"错的";
alert(result);
----------------------------------------
字符串运算符:
符号: +
含义: 把+两边的内容连接起来,+两边如果有字符串的出现就会执行连接
遇到字符串跟变量混在一起的要把字符串和变量分开然后使用+进行连接
-------------------------------------------
var age = 22;
document.write("李寻欢的年龄是"+age+"岁了");
-------------------------------------------
运算符优先级
流程控制
流程控制之if语句:【单分支】
语法:if(条件){语句块}
执行:条件判断true→语句块
------------------------------------------
<script type="text/javascript">
var num = 99;if(num<=100){
alert("哇哈哈"); //条件为真则执行
}
</script>
------------------------------------------
语法:if(条件){语句块1}else{语句块2}【双分支】
执行:条件判断true→语句块1【如果条件判断false→语句块2】
-----------------------------------------
<script type="text/javascript">
var sum = 99;
if(sum >= 100){
alert( "aaa" ); //条件为真则执行
}else{
alert( "bbb"); //条件为假则执行
}
</script>
-------------------------------------------
多分支结构
语法: if(条件1){语句块1}else if(条件2){语句块2}else if(条件3{语句块3}
执行: 条件1判断(true)→语句块1
条件1判断(false)→条件2判断(true)→语句块2
条件1和条件2(false)→条件3(true)→语句块3
------------------------------------
<script type="text/javascript">
var sum = 98;
if(sum == 100){
alert("1");
}else if(sum g= 99){
alert("2");
}else if(sum = 98){
alert("3");
}
</script>
------------------------------------
混合形式:
语法:if(条件1){语句块1}else if(条件2{语句块2else if(条件3){语句块3else{语句块}
执行:条件1判断(true)→语句块1
条件1判断(false)→条件2判断(true→语句块2
条件1和条件2(false)→条件3(true)→语句块3以上条件都不满足,就会执行else里面的语句块
--------------------------------------------
<script type="text/javascript">
var score =99;
if(score >=90){
document.write("优秀");
}else if(score >= 80){
documegt.write("良好");
}else if(score >= 70){
document.write("中等");
}else if(score >= 60){
document.write("及格");
}else{
document.write("不及格");
}
</script>
-----------------------------------------------
循环
循环三要素
1，循环变量的初始化
2，循环条件的判断
3，循环变量的改变
while循环
语法:while(){}
循环变量初始化
Wihle(循环条件的判断){
循环体
循环变量的改变代码
}
执行:循环变量初始化→循环条件的判断(true)→循环体(循环变量的改变)->循环条件的判断(true)→循环体(循环变量的改变)->循环条件的判断(flase)→跳出循环
-----------------------------------------
<script type="text/javascript">
var i =1; //变量初始化
while(i<=100){ //条件判断【i=1】
document.write(+"");//循环件i++;
}
</script>
------------------------------------------
for循环
语法: for(循环变量初始化;循环条件的判断;循环变量的改变){循环体],
执行: 循环变量初始化→循环条件的判断(true)→循环体→循环变量的改变→循环条件的判断(true)→循环体→循环变量的改变→循环条件的判断(false)→跳出循环
----------------------------------------------
<script type="text/javascript">
for(var i=1;i<=6; i++){
document.write("<h"+i+">h"+i+"</h"+i+">");
</script>
-----------------------------------------------
函数
函数
含义: 一段代码的封装[一段能够自动完成某些功能的代码的集合]
定义函数:
语法: function 函数名(形参1,形参2,...) {函数体}
调用函数:
语法:函数名(实参1,实参2);
----------------------------------
<script type="text/javascript">
//求任意一个数的平方
function fn (n) { (n)//形参
var m =n*n;
document.write ("结果为"+m) ;
}
fn(6); (这里为参数,实参)
</script>
----------------------------------
----------------------------------
<script type="text/javascript">
//已知任意两个数为直角三角形的两条直角边，求斜边
//
function qiuc (a,b){
var a = 3;// var b = 4;
var he = a*a+b*b;
var c = Math.pow (he,0.5);//一个数的开平方，就是这个数的0.5次方
document.write("斜边为"+c) ;
}
qiuc(3,4);
qiuc(9,6);
qiuC (15,16);
</script>
----------------------------------
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
