[前端基础]-- HTML&CSS - HBase

TOP

[前端基础]-- HTML&CSS

2019-05-14 13:44:06 【大中小】浏览:188次

一、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'
特殊字符:
空格:  
大于号小于号
™
&hearts;
换行
<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的三种方式


【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

上一篇：设计模式之-观察者模式	下一篇：Session的生命周期