神奇的HTML5,你值得拥有
神奇的HTML5,你值得拥有
行走迪拜 发表于2年前
神奇的HTML5,你值得拥有
  • 发表于 2年前
  • 阅读 5
  • 收藏 0
  • 点赞 1
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

摘要: HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点,如video、audio和canvas 标记。

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 通道。


共有 人打赏支持
粉丝 0
博文 2
码字总数 4628
×
行走迪拜
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: