HTML&CSS-------【四】
2015-08-09 17:36
471 查看
HTML:
1.相关概念：【了解】
internet:国际互联网
web:互联网应用服务：新闻，视频，音乐
http:超文本传输协议：（数据传输的方式）
url:统一资源定位符。 http://ip:端口号/应用/资源名路径
网页:互联网服务中的一种资源。文本形式
HTML: HyperText Markup Language 超文本标记语言.编写网页的编程语言
2.
文件命名：
*.html
*.htm
网页基本结构：
<html>
<head> <body>
语言格式：
标签
<标签名></标签名>
标准标签
<标签名/>
空标签
<标签名>
属性：
<标签名 属性名='属性值'></标签名>
***网页中，单引号和双引号一样
"名字="值""
3.网页标签：
①。最简单网页:
<html>
<head>
<!--标题，网页描述信息，浏览器行为规定-->
<!--不显示在网页中-->
</head>
<body>
Hello HTML
<!--显示在网页中的内容-->
</body>
</html>
②.网页编程完成,
浏览器解释执行。
③head：
<title>网页的标题</title>
meta 描述网页信息，规定浏览器的行为
<meta http-equiv='content-type' content='text/html;charset=utf-8'>
**告知浏览器文件为文本文件/html网页 编码为utf-8
<meta name='author' content='chengcheng'>
**网页的编写者
④
body:
属性 bgcolor背景色
值：颜色英文单词
RGB值 #FFFFFF
background
背景图片
值：
文本相关：
<h?>
<h1><h2><h3>....<h6>标题内容
<p>段落标签
属性：
align水平对齐方式
'left'
'center' 'right'
特殊字符:
空格:
大于号小于号
™
♥
换行
<br/>
分割线
<hr/>
列表标签：
<ul> 无序列表
<li>子项
<ol> 有序列表
<li>子项
字体
<font>
属性 size字体大小
值（1~7）
face 字体
color 文字颜色
图片
<img>
src:图片路径
width:宽度
height：高度
align:图片相对文字的位置left right
超链接：
<a href='跳转页面的路径'>
target:
_blank
跳转页面在新标签中打开（新窗口）
_self 跳转页面在本窗口打开
其他值：跳转的目标窗体的name值
name:
该超链接起锚点名
*定义锚点 <a name='锚点名'></a>
*跳转锚点的超链接
<a href='#锚点名'>回到顶部</a>
表格：
<table>
<tr>
<td>
规范：
<table>
<thead>
<th>表格标题</th>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
属性： <table>
bgcolor
背景色
border
边框大小 1
align 水平对齐方式(浏览器兼容)
width 宽度
height
高度
<td>
colspan
跨列合并
rowspan
跨行合并
---------------------------------------------
表单：
收集用户数据(将数据发送给服务器端)
<form>
表单元素
</form>
表单元素：
单行文本输入框:
<input type='text'>
属性：name:该表单控件的名字
value:默认值输入值
placeholder:提示信息
密码输入框
<input type='password'>
属性：name:该表单控件的名字
value: 密码默认值
单选按钮：
<input type='radio'>
属性：
name:名字
value:该表单控件的值
一组单选钮中，name属性值必须相同
复选框
<input type='checkbox'>
属性：
name: 名字
value:
该表单控件的值
*一组复选框会起相同的name值
下拉列表：
<select name=''>
<option value='xx1'>选项1</option>
<option value='xx2'>选项2</option>
</select>
文本域（多行文本框）
<textarea>
属性：
cols：宽度
rows:高度（行数）
name: 该控件的名字
**没有value
textarea标签体中内容相当于value的值
添加文件：【了解】
<input type='file'>
表单按钮：
<input type='submit'>
提交按钮
属性：
name:仅仅是该控件的名字，不参与数据提交
value:按钮的文字
重置按钮：
<input type='reset' value='按钮名字'>
*****************数据提交*****************
<form>标签的属性
action
:数据提交的目标位置
method
:数据提交方式:
get(默认)
数据提交方式：地址?name=value&name2=value2&name3=value3
数据会添加在
url?数据
数据不安全
数据量小(跟浏览器相关)
2000多
post
数据提交方式：
*地址栏只显示数据提交的目标位置（不显示数据）
*将数据打包发送给目标服务器位置的
数据安全
数据量大 （2M）
************数据提交*****************
=============================================================================
回顾：
1.展示信息：
文本：<h1>..<h6>
<p>
<font>
图片：<img src='图片路径'>
列表：<ol>
<ul>
超链接：<a href='跳转的目标页面的路径'>这是一个超链接</a>
表格：<table>
<thead></thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
2.收集信息
<form>
<input type='text'>单行文本框
<input type='password'>密码框
<input type='radio'>单选钮
<input type='checkbox'>复选框
<select>
下拉列表
<option>选项1</option>
</select>
<textarea></textarea>文本域
<input type='submit' value='按钮的显示文字'>提交按钮
<input type='reset'>重置按钮
</form>
补充：<input type='radio' checked='checked'>
<input type='checkbox' checked='checked'>
<select>
<option selected='selected'>选项1</option>
</select>
=================================================================
框架集：
<frameset>
划分整个窗口
属性：
rows='20%,80%'
cols='20%,*'
<frame>
代表部分窗口的页面
**不能放在body标签内部
属性：src:显示在该窗口的页面路径
name:
**在指定窗口刷新页面
给指定的窗口<frame name='名字'>
在超链接 <a href='' target='名字'></a>
==========================================================
CSS:
Cascade StyleSheets级联样式表
作用：美化页面，CSS丰富html原生标签的样式
语法：
样式语法：
样式名称:值;
一：行内样式
<标签 style='样式....'></标签>
二:内嵌样式
在head标签中加
<style type='text/css'>
选择器{
样式
}
</style>
选择器：
HTML标签选择器{
样式
}
.class选择器{
样式
}
**HTML每个标签都有class属性
#id选择器{
}
**HTML中每个标签都有id属性
网页中所有标签的id属性值不能重复
伪类选择器
h5:hover{
}鼠标移上之后的样式【了解】
**************************
字体
font-size:像素
text-decoration:none|underline
color:颜色
font-family:字体;
边框
border-style:solid实线
border-width:1px边框宽度
border-color:颜色边框颜色
背景相关
background-color:颜色
background-image:url(图片路径);
background-repeat:no-repeat|repeat-x|repeat-y|
鼠标样式：
cursor:pointer|wait|move
-------------------------------------------
三：外部引用:
1.在html页面外部创建css文件*.css
2.在HTML页面中<head>
<link rel='stylesheet' type='text/css' href='css文件路径'>
</head>
<span></span>:行内元素(内联):不会单独占一行
<div></div>：单独占用一行(默认)
样式：
border:solid 1px blue;边框
display:none|block|inline显示效果
none 隐藏div，占位消失
block 块级元素占一行
inline
行内元素
width:
heigh:
position:relative(相对定位)|absolute(绝对定位)
margin:外间距
div与div之间的距离
padding:内间距
div与内部内容之间的距离
float:left|right
**允许该div向左|右浮动.下一个div可以向上移动
重点：
1.图片，超链接，表格
2.表单标签
3.CSS书写语法
4. 添加css的三种方式
1.相关概念：【了解】
internet:国际互联网
web:互联网应用服务：新闻，视频，音乐
http:超文本传输协议：（数据传输的方式）
url:统一资源定位符。 http://ip:端口号/应用/资源名路径
网页:互联网服务中的一种资源。文本形式
HTML: HyperText Markup Language 超文本标记语言.编写网页的编程语言
2.
文件命名：
*.html
*.htm
网页基本结构：
<html>
<head> <body>
语言格式：
标签
<标签名></标签名>
标准标签
<标签名/>
空标签
<标签名>
属性：
<标签名 属性名='属性值'></标签名>
***网页中，单引号和双引号一样
"名字="值""
3.网页标签：
①。最简单网页:
<html>
<head>
<!--标题，网页描述信息，浏览器行为规定-->
<!--不显示在网页中-->
</head>
<body>
Hello HTML
<!--显示在网页中的内容-->
</body>
</html>
②.网页编程完成,
浏览器解释执行。
③head：
<title>网页的标题</title>
meta 描述网页信息，规定浏览器的行为
<meta http-equiv='content-type' content='text/html;charset=utf-8'>
**告知浏览器文件为文本文件/html网页 编码为utf-8
<meta name='author' content='chengcheng'>
**网页的编写者
④
body:
属性 bgcolor背景色
值：颜色英文单词
RGB值 #FFFFFF
background
背景图片
值：
文本相关：
<h?>
<h1><h2><h3>....<h6>标题内容
<p>段落标签
属性：
align水平对齐方式
'left'
'center' 'right'
特殊字符:
空格:
大于号小于号
™
♥
换行
<br/>
分割线
<hr/>
列表标签：
<ul> 无序列表
<li>子项
<ol> 有序列表
<li>子项
字体
<font>
属性 size字体大小
值（1~7）
face 字体
color 文字颜色
图片
<img>
src:图片路径
width:宽度
height：高度
align:图片相对文字的位置left right
超链接：
<a href='跳转页面的路径'>
target:
_blank
跳转页面在新标签中打开（新窗口）
_self 跳转页面在本窗口打开
其他值：跳转的目标窗体的name值
name:
该超链接起锚点名
*定义锚点 <a name='锚点名'></a>
*跳转锚点的超链接
<a href='#锚点名'>回到顶部</a>
表格：
<table>
<tr>
<td>
规范：
<table>
<thead>
<th>表格标题</th>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
属性： <table>
bgcolor
背景色
border
边框大小 1
align 水平对齐方式(浏览器兼容)
width 宽度
height
高度
<td>
colspan
跨列合并
rowspan
跨行合并
---------------------------------------------
表单：
收集用户数据(将数据发送给服务器端)
<form>
表单元素
</form>
表单元素：
单行文本输入框:
<input type='text'>
属性：name:该表单控件的名字
value:默认值输入值
placeholder:提示信息
密码输入框
<input type='password'>
属性：name:该表单控件的名字
value: 密码默认值
单选按钮：
<input type='radio'>
属性：
name:名字
value:该表单控件的值
一组单选钮中，name属性值必须相同
复选框
<input type='checkbox'>
属性：
name: 名字
value:
该表单控件的值
*一组复选框会起相同的name值
下拉列表：
<select name=''>
<option value='xx1'>选项1</option>
<option value='xx2'>选项2</option>
</select>
文本域（多行文本框）
<textarea>
属性：
cols：宽度
rows:高度（行数）
name: 该控件的名字
**没有value
textarea标签体中内容相当于value的值
添加文件：【了解】
<input type='file'>
表单按钮：
<input type='submit'>
提交按钮
属性：
name:仅仅是该控件的名字，不参与数据提交
value:按钮的文字
重置按钮：
<input type='reset' value='按钮名字'>
*****************数据提交*****************
<form>标签的属性
action
:数据提交的目标位置
method
:数据提交方式:
get(默认)
数据提交方式：地址?name=value&name2=value2&name3=value3
数据会添加在
url?数据
数据不安全
数据量小(跟浏览器相关)
2000多
post
数据提交方式：
*地址栏只显示数据提交的目标位置（不显示数据）
*将数据打包发送给目标服务器位置的
数据安全
数据量大 （2M）
************数据提交*****************
=============================================================================
回顾：
1.展示信息：
文本：<h1>..<h6>
<p>
<font>
图片：<img src='图片路径'>
列表：<ol>
<ul>
超链接：<a href='跳转的目标页面的路径'>这是一个超链接</a>
表格：<table>
<thead></thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
2.收集信息
<form>
<input type='text'>单行文本框
<input type='password'>密码框
<input type='radio'>单选钮
<input type='checkbox'>复选框
<select>
下拉列表
<option>选项1</option>
</select>
<textarea></textarea>文本域
<input type='submit' value='按钮的显示文字'>提交按钮
<input type='reset'>重置按钮
</form>
补充：<input type='radio' checked='checked'>
<input type='checkbox' checked='checked'>
<select>
<option selected='selected'>选项1</option>
</select>
=================================================================
框架集：
<frameset>
划分整个窗口
属性：
rows='20%,80%'
cols='20%,*'
<frame>
代表部分窗口的页面
**不能放在body标签内部
属性：src:显示在该窗口的页面路径
name:
**在指定窗口刷新页面
给指定的窗口<frame name='名字'>
在超链接 <a href='' target='名字'></a>
==========================================================
CSS:
Cascade StyleSheets级联样式表
作用：美化页面，CSS丰富html原生标签的样式
语法：
样式语法：
样式名称:值;
一：行内样式
<标签 style='样式....'></标签>
二:内嵌样式
在head标签中加
<style type='text/css'>
选择器{
样式
}
</style>
选择器：
HTML标签选择器{
样式
}
.class选择器{
样式
}
**HTML每个标签都有class属性
#id选择器{
}
**HTML中每个标签都有id属性
网页中所有标签的id属性值不能重复
伪类选择器
h5:hover{
}鼠标移上之后的样式【了解】
**************************
字体
font-size:像素
text-decoration:none|underline
color:颜色
font-family:字体;
边框
border-style:solid实线
border-width:1px边框宽度
border-color:颜色边框颜色
背景相关
background-color:颜色
background-image:url(图片路径);
background-repeat:no-repeat|repeat-x|repeat-y|
鼠标样式：
cursor:pointer|wait|move
-------------------------------------------
三：外部引用:
1.在html页面外部创建css文件*.css
2.在HTML页面中<head>
<link rel='stylesheet' type='text/css' href='css文件路径'>
</head>
<span></span>:行内元素(内联):不会单独占一行
<div></div>：单独占用一行(默认)
样式：
border:solid 1px blue;边框
display:none|block|inline显示效果
none 隐藏div，占位消失
block 块级元素占一行
inline
行内元素
width:
heigh:
position:relative(相对定位)|absolute(绝对定位)
margin:外间距
div与div之间的距离
padding:内间距
div与内部内容之间的距离
float:left|right
**允许该div向左|右浮动.下一个div可以向上移动
重点：
1.图片，超链接，表格
2.表单标签
3.CSS书写语法
4. 添加css的三种方式
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- css transition属性详解
- 使用纯的CSS绘制简易的图形
- CSS学习笔记---（四）
- css+div上下左右自适应居中
- 第二天（CSS 选择器）
- CSS书写规范及顺序
- Emmet:HTML/CSS代码快速编写技巧
- Stream的Dropzonejs样式演示
- HTML学习笔记（4）——CSS块级元素与盒模型
- 选择tableView的某一行时，马上取消当前选中行（选中样式不保留）
- 新版CSS手册
- JS+css3实现图片画廊效果总结
- js与CSS的调用
- CSS的使用
- CSS从大图中抠取小图完整教程(background-position应用)
- CSS学习笔记----（三）
- HTML文档中应用css样式的方法总结
- jsp网页无法加载css解决方法
- css基础与选择器——精通css学习笔记（一）
- 理解css中的line-height