文档章节

神奇的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
高级程序员
私信 提问
8个超棒的HTML5网站设计欣赏

日期:2012-3-22 来源:GBin1.com 我们听到了很多关于HTML5的新闻和技术动向,一个又一个的新的东西不停的出现,那么最近HTML5的技术应用又如何呢?HTML5又和CSS及 其Javascript如何一起改变...

gbin1
2012/03/27
15.5K
1
关于HTML5应用现状与前景的思考

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

红薯
2010/06/20
749
1
2015 年最棒的 5 个 HTML5 框架

大多数的 web 开发者一直在用关键点来寻找动态的框架,这样能简化他们的设计和开发工作。 HTML5 框架在所有的 web 浏览器和手机应用上都展现了优秀的性能。它不仅简化了 HTML5 开发中 CSS 开...

Leenajose
2015/07/21
26K
57
精选9个值得学习的 HTML5 效果【附源码】

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

赵小宾
2014/11/27
0
0
HTML5 和 Flash 视频的电池性能分析

介绍 HTML5的 元素是一种在线播放视频的新方法。在它标准化以前,大量的网站用Flash插件来播放视频。现在已有几个网站(最出名的数Youtube了)同时支持基于Flash和基于HTML5的视频播放。有几...

oschina
2013/05/13
6.1K
27

没有更多内容

加载失败,请刷新页面

加载更多

如何在网络视听行业建一扇内容安全大门?

在人工智能飞速发展的三年里,整个网络视听产业数字化发展速度非常迅猛。大数据作为如今这个时代的产物,正不断推动整个产业的发展。网络视听行业中存在海量的数据,比如视频内容、视频浏览量...

阿里云官方博客
10分钟前
0
0
云安全简史

课程介绍: DT时代我们每个人的生活在不知不觉中与云计算发生了千丝万缕的联系,起床、吃饭、出行、社交、工作、娱乐、购物等大多数应用都在云上,然而安全事件频发时刻在为我们敲响警钟,面对...

mcy0425
11分钟前
1
0
数字IT基础-数据采集总线

摘要: 日志服务是阿里自产自用的产品,在双十一、双十二和新春红包期间承载阿里云/蚂蚁全站、阿里电商板块、云上几千商家数据链路,每日处理来自百万节点几十PB数据,峰值流量达到每秒百GB,...

阿里云云栖社区
14分钟前
0
0
身为极客,一道题测出你究竟有多机智!|活动推荐

似乎所有极客都是天生的偏执狂。 这就像对程序员的调侃那样, 说这个世界在他们眼里只有0和1, 介于中间的有什么?不存在的。 作为平均智商最高的群体而言 程序员是最具有极客精神的一个群体...

UCloudTech
15分钟前
0
0
芯片制造与中国技术

接下来的思路就简单了,如何把这30吨东西,集成到指甲那么大的地方上呢?这就是芯片。 芯片制造与中国技术 为了把30吨的运算电路缩小,工程师们把多余的东西全扔了,直接在硅片上制作PN结和电...

天王盖地虎626
21分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部