设为首页 加入收藏

TOP

[前端基础]-- HTML&CSS
2019-05-14 13:44:06 】 浏览:10
Tags:前端 基础 HTML&CSS
版权声明:尊重原创,转载请标明,本文转自 https://blog.csdn.net/high2011/article/details/47377927

一、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'
特殊字符:
空格: &nbsp;
大于号小于号
&trade;
&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的生命周期

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容:

array(4) { ["type"]=> int(8) ["message"]=> string(24) "Undefined variable: jobs" ["file"]=> string(32) "/mnt/wp/cppentry/do/bencandy.php" ["line"]=> int(214) }