文档章节

神奇的HTML5,你值得拥有

行走迪拜
 行走迪拜
发布于 2016/03/02 19:01
字数 2830
阅读 16
收藏 0

HTML & CSS 实战 : 百度首页


步骤一  首先分好结构


步骤二  html代码编写 -> 网页的具体内容和结构

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>百度一下,你就知道</title>   // 标题文字
    <link rel="stylesheet" href="css/index.css">   // 外部样式:在单独的CSS文件中书写,link标签引用
</head>
<body>

<div id="header">   // 头部内容
    <href="#">新闻</a>
    <href="#">hao123</a>
    <href="#">地图</a>
    <href="#">视频</a>
    <href="#">贴吧</a>
    <href="#">登录</a>
    <href="#">设置</a>
    <href="#" class="more-product">更多产品</a>
</div>

<div id="content">   // 中间内容
    <img src="img/bd_logo1.png">
    <div>
        <input><href="#">百度一下</a>
</div>
    
</div>
   <div id="footer">   // 尾部内容
    <div>
        <href="#">把百度设为主页</a>
        <href="#">关于百度</a>
        <href="#">About Baidu</a>
    </div>
    <div>©2015 Baidu
        <href="#">使用百度前必读 意见反馈</a>>
        ICP030173
        <img src="img/mark.png">
    </div>
</div>
</body>
</html>


最终完成浏览器展示结果 : 


问题 : 现在我们html网页的内容已经有了.剩下的就是美化样式了.在美化样式时,我们需要用到很多很多CSS的属性对内容进行设置. CSS中代码设置如下 :

#header {
    
/*background: red;*/
    /*height: 60px;*/
    /*padding-right: 15px;*/
    
text-alignright;
    
padding-top15px;
    
line-height25px;
}
#header a {
    
colorblack;
    
font-size14px;
    
margin-right10px;
}
#header a:hover {
    
colorblue;
}

#header a.more-product {
    
colorwhite;
    
background#38f;
    
width70px;
    
height25px;
    
text-aligncenter;
    
displayinline-block;
    
text-decorationnone;
}

#content {
    
/*background: blue;*/
    
margin-top100px;
    
text-aligncenter;
}

#content img {
    
width270px;
    
height129px;
}

#content div input {
    
width526px;
    
height22px;
    
font-size20px;
    
padding-left10px;
}

#content div a {
    
background#3385ff;
    
width100px;
    
height36px;
    
colorwhite;
    
font-size15px;
    
displayinline-block;
    
text-decorationnone;
}

#content div {
    
line-height36px;
}

#footer {
    
margin-top150px;
    
/*background: green;*/
    
text-aligncenter;
}

#footer a {
    
margin-right10px;
    
margin-left10px;
}















bootstrap了解一个前端开发的第三方框架  

  • λ v3.bootcss.com 可以在这个网站学习如何使用bootstrap框架的使用!

  • λ github.com网站上下载这个框架,我们暂时需要使用的是bootstrap.min.css  bootstrap.css文件

框架的使用 : 

<html>
<
head lang="en">
    <
meta charset="UTF-8">
    <
title></title>   

   // 引用bootstrap第三方框架的css样式文件
    <
link rel="stylesheet" href="CSS/bootstrap.min.css"
</
head>
<
body>
    <
button class="btn btn-warning" style="width200px">警告按钮</button>
    <
button class="btn btn-success">成功按钮</button>
    <
button class="btn btn-danger">危险按钮</button>

展示效果 : // 按钮的一些样式

<div class="progress">
<
div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width60%">
<
span class="sr-only">45% Complete</span>
</
div>
</
div>

展示效果 : // 进度条的一些样式


<div class="panel panel-danger" style="width200px">
<
div class="panel-heading">
<
h3 class="panel-title" id="panel-title">出大事了<class="anchorjs-link" href="#panel-title"><span class="anchorjs-icon"></span></a></h3>
</
div>
<
div class="panel-body">
没什么事!!!
<
img src="1111.png">
</
div>
</
div>


展示效果 : // 面板的一些样式


<input class="form-control" style="width300pxmargin20px;">

展示效果 : // 输入框的样式


演示框架中字体集的使用 (首先需要导入fonts文件夹):

<class="glyphicon glyphicon-adjust" style="font-size50pxcolorred"></i>
<
class="glyphicon glyphicon-bookmark"></i>
<
class="glyphicon glyphicon-remove"></i>
<
class="glyphicon glyphicon-star"></i>
<
class="glyphicon glyphicon-thumbs-up"></i>

展示效果 : // 字体集中的一些字体样式


</body>
</html>

















关于标签列表的补充 : 

标签 描述

<!DOCTYPE>   定义文档类型。

<html> 定义 HTML 文档。

<title> 定义文档的标题。

<body> 定义文档的主体。

<h1> to <h6> 定义 HTML 标题。

<p> 定义段落。

<br> 定义简单的折行。

<hr> 定义水平线。

<!--...--> 定义注释。

<head> 定义关于文档的信息。

<meta> 定义关于 HTML 文档的元信息。

<style> 定义文档的样式信息。

<div> 定义文档中的节。

<span> 定义文档中的节。

<script> 定义客户端脚本。

<input> 定义输入控件。

<button> 定义按钮。

<img> 定义图像。

<canvas> 定义图形。

<a> 定义锚。

<link> 定义文档与外部资源的关系。

<nav> 定义导航链接。

<ul> 定义无序列表。

<ol> 定义有序列表。

<li> 定义列表的项目。

<tr> 定义表格中的行。

<header> 定义 section  page 的页眉。

<footer> 定义 section  page 的页脚。

<section> 定义 section

<article> 定义文章。

<aside> 定义页面内容之外的内容。

<details> 定义元素的细节。

<dialog> 定义对话框或窗口。

<summary>  <details> 元素定义可见的标题。

<base> 定义页面中所有链接的默认地址或默认目标。

<noscript> 定义针对不支持客户端脚本的用户的替代内容。

<embed> 为外部应用程序(非 HTML)定义容器。

<object> 定义嵌入的对象。

<param> 定义对象的参数。

<var> 定义文本的变量部分。

<form> 定义供用户输入的 HTML 表单。

<textarea> 定义多行的文本输入控件。

<select> 定义选择列表(下拉列表)。

<optgroup> 定义选择列表中相关选项的组合。

<option> 定义选择列表中的选项。

<label> 定义 input 元素的标注。

<fieldset> 定义围绕表单中元素的边框。

<legend> 定义 fieldset 元素的标题。

<datalist> 定义下拉列表。

<keygen> 定义生成密钥。

<output> 定义输出的一些类型。

<map> 定义图像映射。

<area> 定义图像地图内部的区域。

<figcaption> 定义 figure 元素的标题。

<figure> 定义媒介内容的分组,以及它们的标题。

<audio> 定义声音内容。

<source> 定义媒介源。

<track> 定义用在媒体播放器中的文本轨道。

<video> 定义视频。

<dl> 定义定义列表。

<dt> 定义定义列表中的项目。

<dd> 定义定义列表中项目的描述。

<menu> 定义命令的菜单/列表。

<menuitem> 定义用户可以从弹出菜单调用的命令/菜单项目。

<command> 定义命令按钮。

<table> 定义表格

<caption> 定义表格标题。

<th> 定义表格中的表头单元格。

<td> 定义表格中的单元。

<thead> 定义表格中的表头内容。

<tbody> 定义表格中的主体内容。

<tfoot> 定义表格中的表注内容(脚注)。

<col> 定义表格中一个或多个列的属性值。

<colgroup> 定义表格中供格式化的列组。

额外补充 : 

http://www.w3school.com.cn 学习网站

万维网联盟 World Wide Web Consortium ]


只要提到Web网页大家会立即想到HTML,事实上现在的Web网站除了HTML,还得到了其他多种技术的支持. : HTTP, HTML, CSS, JavaScript.


1> HTTP  (Hypertext Transfer Protocol : 超文本传输协议)

  web世界中的服务器(Server) 与客户端(Client) 间是按照HTTP协议确定的规范基础上进行通信的.Web世界中的服务器与客户端的关系与现实世界中的普通商店与客户间的关系类似.

  客户端(顾客)使用Web浏览器访问任意服务器(商店).

  访问成功(商店开门迎客),客户端向服务器提出读取服务器中的名为"index.html"的文档,或听名为"good.mp3"的音乐的请求(request).

  服务器会针对客户端提出的请求,以返回应答(response)的形式给客户端(顾客)提供服务.

如上所述,HTTP通信中请求(Request)与应答(Response)是最基本的通信模式.客户端与服务器连接成功后,会向服务器提出某种请求,随后服务器会对此请求作出答应并切断连接像上述这样的机制,能保证及时有大量客户端方法服务器,也可以维持服务器与客户端的通信畅通.而且在不用浪费服务器资源的前提下,有效地保证客户端对服务器内容的访问.


2> HTML

HTML是编辑网页用的标示性(Markup)语言,通过HTML标签来对信息进行结构化编辑.


3> CSS

用于控制网页的外观显示.可以通过CSS制定文字的颜色,大小,背景色等,还可以设置元素的边间距,指示器等.


4> JavaScript

JavaScript是一种脚本类型的语言,所谓脚本类型语言一般指编写的程序代码不用经过编译器编译,直接解释执行的编程语言.Web网页中使用JavaScript,可实现与印刷品相同效果的Web网页,或者具有各种动态效果的网页.









HTTP 方法:GET 对比 POST

              两种最常用的 HTTP 方法是:GET  POST

请问 : 什么是 HTTP

超文本传输协议(HTTP)的设计目的是保证客户机与服务器之间的通信。

HTTP 的工作方式是客户机与服务器之间的请求-应答协议。

web 浏览器可能是客户端,而计算机上的网络应用程序也可能作为服务器端。

      举例:客户端(浏览器)向服务器提交 HTTP 请求;服务器向客户端返回响应。响应包含关于请求的状态信息以及可能被请求的内容。

GET - 从指定的资源请求数据。

POST - 向指定的资源提交要被处理的数据


GET 方法

请注意,查询字符串(名称/值对)是在 GET 请求的 URL 中发送的:

/test/demo_form.asp?name1=value1&name2=value2

    有关 GET 请求的其他一些注释:

GET 请求可被缓存

GET 请求保留在浏览器历史记录中

GET 请求可被收藏为书签

GET 请求不应在处理敏感数据时使用

GET 请求有长度限制

GET 请求只应当用于取回数据


POST 方法

请注意,查询字符串(名称/值对)是在 POST 请求的 HTTP 消息主体中发送的:

POST /test/demo_form.asp HTTP/1.1

Host: baidu.com

name1=value1&name2=value2

    有关 POST 请求的其他一些注释:

POST 请求不会被缓存

POST 请求不会保留在浏览器历史记录中

POST 不能被收藏为书签

POST 请求对数据长度没有要求







比较 GET  POST

GET

后退按钮/刷新 无害

书签 可收藏为书签

缓存 能被缓存

编码类型 application/x-www-form-urlencoded

历史 参数保留在浏览器历史中。

对数据长度的限制 是的。当发送数据时,GET 方法向 URL 添加数据;URL 的长度是受限制的 URL 的最大长度是 2048 个字符)。

对数据类型的限制 只允许 ASCII 字符。

安全性  POST 相比,GET 的安全性较差,因为所发送的数据是 URL 的一部分。在 发送密码或其他敏感信息时绝不要使用 GET 

可见性 数据在 URL 中对所有人都是可见的。


POST

后退按钮/刷新 数据会被重新提交(浏览器应该告知用户数据会被重新提交)。

书签 不可收藏为书签

缓存 不能缓存

编码类型 application/x-www-form-urlencoded  multipart/form-data。为二进制数据 使用多重编码。

历史 参数不会保存在浏览器历史中。

对数据长度的限制 无限制。

对数据类型的限制 没有限制。也允许二进制数据。

安全性 POST  GET 更安全,因为参数不会被保存在浏览器历史或 web 服务器日志 中。

可见性 数据不会显示在 URL 中。



其他 HTTP 请求方法


方法 描述

HEAD  GET 相同,但只返回 HTTP 报头,不返回文档主体。

PUT 上传指定的 URI 表示。

DELETE 删除指定资源。

OPTIONS 返回服务器支持的 HTTP 方法。

CONNECT 把请求连接转换到透明的 TCP/IP 通道。


© 著作权归作者所有

共有 人打赏支持
上一篇: 我所了解的HTML5
下一篇: 我所了解的HTML5
行走迪拜
粉丝 0
博文 2
码字总数 4628
作品 0
高级程序员
私信 提问
HTML5 不可限量的发展前景

现在的HTML5就像当年崭露头角时的Ajax,有人在做,但不知道叫它什么。最近,苹果在HTML5上大做文章,而著名的Web设计师Eric Meyer则提出了Web Stacks的概念。Alex Kessinger是Yahoo的一名前端...

晨曦之光
2012/03/09
0
0
精选9个值得学习的 HTML5 效果【附源码】

这里精选了一组很酷的 HTML5 效果。HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强、效果丰富的...

赵小宾
2014/11/27
0
0
Cocos2d-html5循序渐进(1)-开发环境配置

工先欲其事,必先利其器。 本章将涉及到Cocos2d-html5的开发环境的搭建,当然,如果你已经有可以使用的环境,那你就可以跳过本章。 第一步,下载Cocos2d-html5引擎,下载地址:http://www.co...

潞邊壹仦貓
2013/06/25
0
2
Session, LocalStorage ,Cache-Control

Session 为什么要使用Session? Session的使用? 总结Cookie与Session: Cookie Session LocalStorage localStorage是html5提供的一个API,localStorage的实质是一个哈希 Session是服务器的哈...

code_susu
07/31
0
0
PopCap推出html5网页版宝石迷阵

切图网(www.qietu.com):PopCap公司推出网页版游戏宝石迷阵,这是一款经典的老游戏,但是在html5兴起的时候,这款老游戏在开发 人员的努力下再次重塑经典。这款游戏与以前的最大的不同就是在...

tyshymy
2012/02/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

延迟队列实现精准的订单超时取消--自我记录备份

订单的超时取消很多系统采用定时任务,实际上达不到要求。我用的是延迟队列,但缺点是只实现了基于jvm的,分布式采用的是修改之前去查询订单状态,以及分布式锁获取的方式来控制,这样获得锁...

checkboxMan
45分钟前
2
0
storm 环境搭建

1.下载解压 下载地址:http://storm.apache.org/downloads.html #下载wget https://www-us.apache.org/dist/storm/apache-storm-1.2.2/apache-storm-1.2.2.tar.gz#解压tar -zxf apache......

MrPei
59分钟前
1
0
Python Base - 读写文件,字符串拼接,单引号

字符转义 读写文件cvs 字符串拼接,替换 import csvcsv_file_name = 'cardbin.csv'# insert into `card_bin_code` (name_of, code_of, card_no_prefix, bank_code) values ('中国银行......

园领T
今天
1
0
基于JQUERY BOOTSTRAP 最简单的loading遮罩层

<%--loading遮罩层--%><div class="modal fade" id="loadingModal" backdrop="static" keyboard="false">   <div style="width: 200px;height:20px; z-index: 20000; position: abs......

颖辉小居
今天
1
0
springboot+kafka

1,首先springboot对kafka的支持也很好,同样是在配置文件中配置好参数,然后就可以直接使用。先说一下,很简单,,,不要怕 2,我用的依赖是 <dependency> <groupId>org.springframewor...

我真是小菜鸡
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部