Html和css笔记
html和css笔记
——————————-html和css—————————————- 一、HTML的基本概念 1、HTML(Hyper Text Markup Language) 超文本标记语言 2、静态页面—为后续的动态页面服务（JSP） 3、IP:在因特网(Internet)中唯一标识一台主机 公网IP：在整个互联网中唯一 局域网IP：在同一个局域网中唯一，不同的局域网之间可能重复。 4、URL：统一资源定位符 www.baidu.com 5、HTTP协议：超文本协议，通常是字符串 http://192.168.0.3:8989/xxx
二、HTML的内容： 1、文件的创建及运行 .html、.htm后缀，只需浏览器就能运行。 2、HTML的语法特点： 内容都是以标签的形式，这些标签一般由前标签和后标签构成
三、具体的语法： 1、head部分：在网页中不见 1)title 网页的标题 2)meta 标签 ：定义网页中信息、特点 设置网页的编码格式
<META name="author" content="zpark">
定义网页作者
<META name="keywords" content="云计算,,...">
定义网页关键字
<META http-equiv="refresh" content="1">
<META http-equiv="refresh" content="2;url=http://www.taobao.com">
定义网页2秒后自动刷新到"淘宝
3)script标签 :引入或者开发javascript代码
4)link标签 ：引入css文件
2、body：在网页中可见
1)body标签
<BODY bgcolor="#FFCCFF“ background="back_image.GIF" text="#FF0000">
bgcolor= 背景颜色
background= 背景图片
text= 前景颜色(字体颜色)
2)注释 <!--注释内容-->
3)特殊的符号：
空格：
>: >
<: <
换行： <br/>;
水平线：<hr size="30px" color="green" width="300px" align="right"/>
size :垂直高度
width：水平宽度
color：水平线的颜色 取值：英文值 RGB值
align：水平线的对其方式 left|center(默认)|right
版权符号：©
水平线：<hr size="30px" color="green" width="300px" align="right"/>
size :垂直高度(线的厚度)
width：水平宽度(线的颜色)
color：水平线的颜色 取值：英文值 RGB值
align：水平线的对其方式 left|center(默认)|right
4、body标签中的元素
1、文本相关
1)标题标签<H1><H6>
说明：<H1>到<H6>字体大小依次递减
如果需要更大或者更小的字号借助CSS
2)<font>标签
<font size = "2" color = "red" face = "黑体">
...
</font>
size：字体的大小，最小为1号，最大为7号
color :字体的颜色
face:字体
3)字体相关
<i>文字倾斜</i>
<b>文字加粗</b>
<s>文字加删除线</s>
<u>文字加下划线</u>
4)段落相关
<p>普通的段落</p>
5)列表相关
有序列表 <ol type="" start=""> 指：提供顺序标记
<li>填写信息</li>-------1、填写信息
<li>收电子邮件</li>-----2、收电子邮件
<li>注册成功</li>-------3、注册成功
</ol>
type: 1(默认) a、A、i、I
start：标记起始点，只能是数字
无序列表
<ul type="">
<li></li>
</ul>
type:circle(空心圆) 、square(实心方) 默认实心圆
2、超链接相关
<a href="url" target="">下载</a>
href:超链接的地址
target：超链接的方式 _self :覆盖掉本身页面，超链到指定的页面
_blank ：重新开启新的窗口，超链到指定的页面
自定义 ：指定超链位置(回到顶部)
标签体：超链接的名字
超链接-锚记属性
作用：锚记标签用于使用户“跳”到文档的某个部分
步骤1：创建锚记 <a name=“marker”>主题名称</a>
步骤2：在超链接的 href中使用该锚记
<a href="#marker">xxx</a>
3、图像的基本语法
<img src = "images/adv.jpg"
width = "300"
height = "150"
alt = "明星演唱会开幕"
align = "middle">
src:图片路径
alt:图片描述/信息
border: 图片边框
align:图片相对文字的对其方式
align = "middle"图像与文本居中对齐还可以取top, bottom 值
align="center" 居中
align="right"
width:图片的宽度
heigth：图片的高度
特殊标签：跑马灯 <marquee>
4、 表格相关【重点】
<table border="" cellspacing="" align="" width="" bgcolor=""
background=“images/type_back.jpg” width=“360" height="120" border="2"
>
<tr>
<td>单元格</td>
</tr>
</table>
table的属性
border :边框
bordercolor:边框颜色
background:设置表格的背景图片
cellspacing：单元格之间的空隙(属性用来设置表格内框宽度 )
cellpadding：属性用来设置单元格内填充距离
align：表、格、行、列的对齐方式
<tr>
<td align="right" width="100px" height="50px">我是右对齐</td>
<td align="center" width="100px" height="50px">我是居中</td>
<td align="left" width="100px" height="50px">我是左对齐</td>
</tr>
<tr>
<td valign="top" width="100px" height="50px">顶端对齐</td>
<td valign="middle" width="100px" height="50px">中对齐</td>
<td valign="bottom" width="100px" height="50px">底端对齐</td>
</tr>
width：表格的宽度
height：表格的高度
bgcolor：背景颜色
tr的属性：
align：整行做文字相对单元的水平对齐方式 left(默认)|right|center
bgcolor：一行的背景颜色
td属性：
align：单元格中文字相对单元的水平对齐方式 left(默认)|right|center
bgcolor：一个单元格的背景颜色
valign：文字相对于单元格垂直对齐方式 top|middle(默认)|bottom
高级属性(对表格的处理：跨行跨列)
rowspan：跨行
colspan：跨列
5、表单相关【重点】
表单作用 ：通过表单元素，收集用户输入的数据
表单元素 ：
<input type="决定表单元素的种类"/>
文本框 ： text
密码框 ： password
单选按钮： radio
复选按钮： checkbox
重置按钮： reset
提交按钮： submit
普通按钮： button
表单元素的属性 ：
1)name ：
文本框、密码框 ：用于后续收集页面数据的依据
单选按钮 : name属性值要相同，才可以达到单选的效果,收集页面数据的依据
复选按钮 ：name属性值建议相同，方便后续收集数据
2)value：
文本框、密码框 ：默认值
单选按钮、单选按钮 : 单选、复选的值
重置、普通、提交按钮：在页面显示中取的名字
3)补充属性 ：
size ：显示文本框的长度
maxlength ：支持输入的最大值
hidden：隐藏
readonly :只读
checked="true" ：针对单选、复选按钮 默认选中
下拉菜单：
<select name="ss">
<option value="1">aaaa</option>
<option value="2">bbbb</option>
</select>
name : 在Select标签中，用于收集数据
value：在option标签中，下拉菜单的值
selected : 对于下拉菜单默认选中
文本域：
<textarea name="" cols="40" rows="6">文本内容</textarea>
name :文本框名字 用于收集数据，收集的是文本域中标签体的内容
cols="40" 文本框的列数
rows="6" 文本框的行数
表单标签：
<form action="url" method="">
表单元素
</form>
action : 提交表单的路径(url)
重置按钮：type="reset" 页面数据恢复到表单最原始的状态
普通按钮：为后续js校验准备
提交按钮：把表单元素的数据收集，提交到action指定的路径
method :表单提交方式 get(默认)|post
get ：以url?name1=value1&name2=value2.....
传递数据，一地址栏形式传递
特点 ：不安全，收集的数据量较小 255 中文乱码处理不容易
post ：把表单元素中的数据打包发送到请求的url,对于文件上传必须是post提交
5、frame布局/框架
<P><a href="right.html" target="B">
<FRAMESET rows="25%,50%,*" frameborder="5">
<FRAME name=“top" src="the_first.html">--------窗口1
<FRAME name="middle" src="the_second.html">----窗口2
<FRAME name=“bottom" src="the_third.html">-----窗口3
<FRAME name=“B">
</FRAMESET>
rows: 将窗口进行上下分割，各部分的高度用逗号分开
cols: 将窗口进行左右分割，各部分的宽度用逗号分开,可选。
frameborder:窗口边框的宽度
name:框架名
target:属性指定了要链接的文件会出现在名称为“B”的框架窗口里
———————————–CSS——————————————
CSS：Cascade Style Sheet 级联/层叠样式表 作用：页面的美化、实现内容与样式的分离，方便团队开发
一、目标
会创建统一外观的字体文本
会创建无下划线的超连接样式
会创建个性化的表格
会创建个性化的表单
会使用DIV实现页面布局
二、样式的基本结构
样式属性名：样式属性值
样式的分类：行内样式、内部(内嵌)样式、外部样式
三、二、行内样式(参考：hello_css.html)
<前标签 style=“样式属性名1:样式属性值1;样式属性名2:样式属性值2;">标签体</结束标签>
举例：
1、超链接的下滑线
2、修改字体格式：如楷体
3、字体颜色
4、字体的大小
5、背景颜色
三、内部样式(内嵌样式)【重点】
选择器：在CSS中，根据选择器，对不同、或相同的多个标签加相同的样式
选择器语法：
在head标签：
1)标签选择器：(参考：css_table.html、css_img.html)
应用场景：针对一组相同的标签加相同的样式
选择器语法：
在head标签：
使用：标签选择器自动套用(标签名是指：、 、、 四、外部样式：
应用：对应一个网站中使用相同的样式(数据与显示分离)
重点：使用
css文件的提取：
1、创建一个css文件，*.css,内容：只用样式(选择器、样式属性名：样式属性值，没有html标签)
2、使用：需要在使用的html文件(页面中)引入css文件
引入方式： 五、常用的样式
1、文本文字相关：
文字大小 ：font-size
文字颜色：color
文字格式：font-family
加下划线：text-decoration ：none|underline
文字对其方式：text-align：center / left / right
字体粗细：font-weight: bold / normal
文本修饰：text-decoration: underline/none
2、背景相关：
背景颜色：background-color:#ff7300
背景图片：background-image:url(图片路径)
平铺：background-repeat :no-repeat|repeat-x |repeat-y
背景图片和页面一样大小：background-size：100%
背景图片定位：background-position:center/left/right/top/bottom
3、边框相关：
border ：1px solid red;/边框为1个像素粗细、实线、红色/
边框粗细：border-width: 1px;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
边框颜色：border-color: #ff7300;
border-top-color、
border-bottom-color、
border-left-color、
border-right-color
边框线类型：border-style:solid/dashed/dotted
border-top-style、
border-bottom-style、
border-left-style、
border-right-style、 )
A:hover 特殊的伪类选择：
其中A代表超链接
hover：代表鼠标悬停
active：当前活动的超链接
visited：访问过的超链接
link：未访问过的超链接
2)class(类)选择器
应用场景：针对于不同的标签加相同的样式
语法：
<style type="text/css">
.class选择器的名字{ ----.类选择器名
样式属性名1 ：样式属性值1;
样式属性名2 ：样式属性值2;
样式属性名3 ：样式属性值3;
...
样式属性名n ：样式属性值n;
}
</style>
<font class="sty1">你好j爷</font> ----class="类选择器名"
使用：在需要加样式的标签中添加一个属性 class="选择器名"，不带.
3)id选择器：针对于某一个标签加样式(少用)
id属性：在html文档中唯一标识一个html标签(js使用多)
语法：
<style type="text/css">
#id选择器的名字{
样式属性名1 ：样式属性值1;
样式属性名2 ：样式属性值2;
样式属性名3 ：样式属性值3;
...
样式属性名n ：样式属性值n;
}
</style>
<font id="sty1">你好j爷</font>
使用：在需要加样式的标签中添加一个属性 id="id选择器名"，不带#
注意：HTML标签中的id属性，通常用于唯一的标识页面中的一个页面元素，不允许重复；class允许重复。优先使用CLASS选择器；ID选择器不推荐。
css文件例：
#sty1{
text-decoration:none;
font-size:40px;
background-color:pink;
}
.btn1{
background-image:url(image/login_submit.gif);
width:137px;
height:30px;
}
body{
background-image:url(image/001.jpg);
background-repeat :no-repeat;
background-size:100%;
}
注意：
1）如果有多种样式，如果规定的样式没有冲突，则叠加；
2）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示。
4、鼠标相关
cursor : move|not-allowed|pointer|wait
5、特别标签
<SPAN>是行级层标签，不可以包含图片、标题、段落等，只能包含文字内容，对其中的内容可单独做样式控制。
<H2>所有韩款童装<SPAN style=“color:#FF66FF; font-
size:50px;”>10</SPAN>元/件起拍喽
</H2>
<DIV z-index:1>是块级层标签，可以包含图片、标题、段落、文字等
position:absolute; 绝对定位
left:149px; x坐标
top:110px; y坐标
z-index:1; z坐标(位于哪一层)(数字大的覆盖数字小的)
width:357px; 宽
height:87px; 高
display: none/block/inline; 显示方式
<DIV id="Layer1" style="position:absolute; left:149px;
top:110px; width:357px; height:87px; z-index:1; " >
<IMG src="talk.gif" width="91" height="76">
<P>Z-index=1，我是第一层，我是容器，包含图片段落</P>
</DIV>
<DIV id="Layer2" style=“….; z-index:2; ….">
<IMG src="bbs_logo.gif" width="101" height="43">
<P>Z-index=2，我是第二层，包含图片和段落 </P>
</DIV>…
float属性：定义元素在哪个方向浮动
left-左侧浮动，从左往右排列显示
right-右侧浮动，从右往左排列显示
none-默认，显示在文档中定义的位置
<div class="totalDiv">
<div class="topDiv">这是上边</div>
<div class="leftDiv">这是左边
<div class="titleDiv">体育频道</div>
<div class="contentDiv">
<a href='#'>aaaaaaaaaa</a><br/>
<a href='#'>bbb</a><br/>
<a href='#'>ccc</a><br/>
<a href='#'>dddddddd</a><br/>
</div>
</div>
<div class="mainDiv">这是右边</div>
</div>
6、页面层级
由下向上
背景颜色——>背景图片——>文字底色——>文字
3. CSS的样式属性
a) 基本属性
i. color:值 （“red”,”black”,”#RGB” ）
作用用是该表文件的前景颜色
ii. font-size:值
设置文字大小
iii. font-family:值
设置字体:tahoma
iv. text-decoration:值
设置字体线：underline overline line-through
v. text-align:值
对其方式：left right center
vi. width:设置宽度
vii. height设置高度
viii. cursor:鼠标的设置
pointer（手） wait(等待)
ix. display:设置元素的隐藏或者显示
none:隐藏 不占用页面流
block:块级元素的显示 h1 li table p
inline:行内元素的显示 <input
b) 背景相关
i. background-color:#RGB “red”
ii. background-image:url(“”)
c) 列表相关
i. list-style-type
d) 布局相关的内容
i. 2个与布局相关的标签
1. <div> 块 （块级元素）
整张网页划分成若干部分，每一个部分都是一块内容
2. <span> 部分 （行内元素）
需要为文本加入样式，js操作
ii. box盒子模型
1. 边框相关的样式 border
2. 内补白（内边距）padding
3. 外补白（外边距）margin
我是右对齐
我是居中
我是左对齐
顶端对齐
中对齐
底端对齐