文档章节

神奇的HTML5,你值得拥有

行走迪拜
 行走迪拜
发布于 2016/03/02 19:01
字数 2830
阅读 16
收藏 0
点赞 1
评论 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 通道。


© 著作权归作者所有

共有 人打赏支持
行走迪拜
粉丝 0
博文 2
码字总数 4628
作品 0
高级程序员
扣丁学堂HTML5培训课程怎么样

  在如今,随着移动互联网技术的发展和进步,比如HTML5在移动互联端的应用,让更多人了解到它的丰富性趣味性便利性,但HTML5就包括这些么?扣丁学堂HTML5培训课程怎么样?零基础能学会么?...

扣丁学堂 ⋅ 06/01 ⋅ 0

DataList:HTML5中的input输入框自动提示利器

DataList的作用是在你往input输入框里输入信息时,根据你敲进去的字母,自动显示一个提示下列列表,很像百度或谷歌的搜索框的自动提示,在飞机票火车票的搜索页面上也有这样的效果。它是HTM...

ZhangLG ⋅ 05/26 ⋅ 0

HTML5学习之Web Storage基础知识

HTML5 Web 存储 在HTML5 Web Storage还没出来之前,本地存储使用的是 cookie. 但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可...

CHIEMINCHAN ⋅ 05/11 ⋅ 0

超级绚丽,20款前端动画特效,轰炸你的眼睛

前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用。本文主要介绍了一些基于H...

浪漫程序员 ⋅ 04/25 ⋅ 0

2018-05-24 H5新元素搭建个人博客(仿Ghost开源)

一、语义化元素 1.1 HTML5出来之前,我们往往使用div元素来将网页分成一个个大小不一的区域,尽管可以添加class属性、id属性,然后通过在css当中对class属性、id属性添加样式,但是这些div元...

瑾瑜爱上猫 ⋅ 05/23 ⋅ 0

WEB前端开发学习HTML5到底有多厉害?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 05/23 ⋅ 0

实现多个标签页之间通信的几种方法(sharedworker)

示例地址 prologue 之前在网上看到一个面试题:如何实现浏览器中多个标签页之间的通信。我目前想到的方法有三种:使用websocket协议、通过localstorage、以及使用html5浏览器的新特性SharedW...

ITgecko ⋅ 04/11 ⋅ 0

HTMl5的sessionStorage和localStorage的使用

html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。 sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结...

刘阳0292 ⋅ 2017/07/09 ⋅ 0

HTMl5的sessionStorage和localStorage

html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。 sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结...

lg2045 ⋅ 2014/10/09 ⋅ 0

Safari无痕模式下,storage被禁用问题

前言 Safari开启无痕模式后,localStorage和sessionStorage为空,对其进行set操作也会报错,也就是说这种情况下,storage是被禁止使用了。接下来说一下解决方法。 解决方案 我们项目框架上的...

ITgecko ⋅ 05/02 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

R计算IV

参考文章 #读取文件 rawdata = read.csv("/path/to/csv/file",header=T) colnames(rawdata)[18] <- "y" //重命名因变量y #数据分区 训练集测试集 trainIdx <- sample(nrow(rawdata), round(......

火力全開 ⋅ 4分钟前 ⋅ 0

SQL老司机,在SQL中计算 array & map & json数据

摘要: 场景 通常,我们处理数据,一列数据类型要么是字符串,要么是数字,这些都是primitive类型的数据。 场景 通常,我们处理数据,一列数据类型要么是字符串,要么是数字,这些都是primi...

阿里云云栖社区 ⋅ 4分钟前 ⋅ 0

SQL老司机,在SQL中计算 array & map & json数据

摘要: 场景 通常,我们处理数据,一列数据类型要么是字符串,要么是数字,这些都是primitive类型的数据。 场景 通常,我们处理数据,一列数据类型要么是字符串,要么是数字,这些都是primi...

猫耳m ⋅ 15分钟前 ⋅ 0

关于ireport自定义变量类型为list的时候

自己摸石头过河,我真的应该去趟市中心图书馆,借本真正靠谱的教材 网上的东西,只有0.01%是有用的,还有0.99%是垃圾,剩下的99%是垃圾的复制品。。 哎!~ 问题是这样的,报表带sql,从db中获...

炑炑milina ⋅ 16分钟前 ⋅ 0

Spring mvc ContextLoaderListener 原理解析

对于熟悉Spring MVC功能,首先应从web.xml 开始,在web.xml 文件中我们需要配置一个监听器 ContextLoaderListener,如下。 <!-- 加载spring上下文信息,最主要的功能是解析applicationContex...

轨迹_ ⋅ 16分钟前 ⋅ 0

阿里云发布企业数字化及上云外包平台服务:阿里云众包平台

摘要: 阿里云正式发布旗下众包平台业务(网址:https://zhongbao.aliyun.com/),支持包括:网站定制开发,APP、电商系统等软件开发,商标、商品LOGO、VI、产品包装设计、营销推广、大数据人...

阿里云官方博客 ⋅ 18分钟前 ⋅ 0

Redis安装异常解决办法

官网地址:http://redis.io/ 官网下载地址:http://redis.io/download 1. 下载Redis源码(tar.gz),并上传到Linux 2. 解压缩包:tar zxvf redis-2.8.17.tar.gz 3. 进入解压缩后的文件夹:c...

slagga ⋅ 22分钟前 ⋅ 0

006. 深入JVM学习—年轻代

1. 年轻代图片 年轻代(Young)属于JVM堆内存空间的一个组成部分 所有使用关键字new新实例化的对象一定会在伊甸园区进行保存,而对于存活区保存的一定是已经在伊甸园区存在一段时间并且经过了...

影狼 ⋅ 23分钟前 ⋅ 0

如何成为一个合格的程序员

偶尔的,我会被人问道:如何成为一名优秀的程序员,更或者,如何成为一名程序员。每次人们问起,我都力图给出不同的答案。因此,我的答案是各种各样的。下面就是我认为的成为一名优秀的程序员...

柳猫 ⋅ 24分钟前 ⋅ 0

cups error_log日志暴增

日志内容 File \"/usr/lib/cups/notifier/dbus\" has insecure permissions 解决(未验证适用范围) sudo service cups stopsudo rm /etc/cups/subscriptions.conf*sudo rm -r /var/cac......

一介码夫_Hum ⋅ 28分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部