用我对HTML的点点理解来做个简单的百度首页

为什么80%的码农都做不了架构师？>>>

在我心里，HTML一直以来都是一个新鲜而神秘的东西，好多次想静下心来研究研究，最终因为各种原因搁置下来。终于，最近终于有时间看看其中的奥妙了。

通过最近的学习，对它有了一定的了解，虽然不是很深入，但是可以拿的出手，跟大家分享一下。希望促进彼此的学习。

我对HTML的第一感觉就是，结构清晰，使用方便，可能这也是浏览器语言的优势与必须要具有的特性吧。因为任何一种臃肿的语言，都满足不了浏览器速度或性能的要求。

最近有试着编写一下小代码，越来越有感觉，其实如果要做好HTML，是需要足够的耐心的，因为你要不断地保证标签的前后匹配与样式的施用准确。

遵循以往的风格，我们用代码来讨论HTML吧！

规划图：

代码：（注：这是个粗糙的不能再粗糙的代码，有兴趣的朋友可以继续完善，百度与大牛勿怪:-D）

<html><!--首先来分析一下，我要实现的是静态页面，我们可以把
百度首页划分成七个区域：1.标签栏：直接在head里设置title即可，ico先忽略2.搜索设置，登录，注册，作为第一个块，用链接实现3.logo：作为第二个块，用img载入4.搜索种类标签页：第三个块，用链接实现5.输入框与按钮：第四个块，用表单实现6.更多：第五个块用链接实现7.最底下的各种，用表格加链接实现--><head><title>百度一下，你就知道</title><meta http-equiv="content-type" content="text/html;charset=gbk"><!--下面标题是显示在浏览器标签上的名字--><style>body{font-size:12px;}#d1{float:right;}a{color:blue;margin-right:3px;}a:hover{color:red;}table{align:center;}</style></head><body><!--第一个块--><div id="d1" style="margin-right:20px;"><a href="http://www.baidu.com/gaoji/preferences.html">搜索设置</a><a>|</a><a href="#">登录</a><a href="https://passport.baidu.com/v2/?reg&regType=1&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F">注册</a></div><div style="height:40px;"></div><!--第二个块--><div><center><img src="logo.png"></center></div><!--第三个块--><div style="font-size:14px;margin-top:30px;"><center><a href="#">新 闻</a><a href="#">网 页</a><a href="#">贴 吧</a><a href="#">知 道</a><a href="#">音 乐</a><a href="#">图 片</a><a href="#">视 频</a><a href="#">地 图</a></center></div><!--第四个块--><div style="margin-top:5px;"><center><input type="text" style="width:390px;height:30px;"/><center></div></body>
</html>

转载于:https://my.oschina.net/javacy/blog/92774

用我对HTML的点点理解来做个简单的百度首页相关推荐

对Thrift的一点点理解
对Thrift的一点点理解这是一篇学习Thrift的笔记,包含了这样几点内容: 简单介绍Thrift 怎样使用Thrift Thrift整体架构 Thrift中的知识点 struct可以设置默认值 ...
重学概率论的一点点理解（持续更新）
前言:这里是毕业N年后重学概率的一点点理解,因为上学的时候贪玩了,现在到了还的时候,要花费大量的时间,悲剧...所以请同学们抓紧在校时间,务必多夯实基础. 文章内容都是自己手工敲的,算是一点点学习笔记 ...
HGMMs的一点点理解～
Robust Ellipse Fitting Using Hierarchical Gaussian Mixture Models Motivation Related works Ellipse f ...
理解神经网络，从简单的例子开始（1）7行python代码构建神经网络
理解神经网络,从简单的例子开始(1)7行python代码构建神经网络前言本文分为两个部分,第一个部分是一个简单的实例:9行Python代码搭建神经网络,这篇文章原文为:原文链接, 其中中文翻译版来 ...
理解神经网络，从简单的例子开始（2）使用python建立多层神经网络
这篇文章将讲解如何使用python建立多层神经网络.在阅读这篇文章之前,建议先阅读上一篇文章:理解神经网络,从简单的例子开始.讲解的是单层的神经网络.如果你已经阅读了上一篇文章,你会发现这篇文章的代码 ...
也许这样理解JavaScript连续赋值更加简单明了一些
最近发现很多同学的博客里都会解释js连续赋值问题,各种概念辈出,特别是对于不理解的同学来说,更加一头雾水,我这里做个简单解释,也许不懂的一看就明白了. 先抛出一个问题: var a = {c:1} / ...
理解git结构与简单操作（四）合并分支的方法与策略
接上节,此时的dev分支与master分支的进度就不一样了,所以需要将dev分支与master分支同步.这里需要的就是合并分支的操作,大家应该都知道用git merge或者git rebase. gi ...
“好饭不怕晚” 怎么理解这句话？_百度知道
"好饭不怕晚" 怎么理解这句话?_百度知道 "好饭不怕晚" 怎么理解这句话?_百度知道 "好饭不怕晚" 怎么理解这句话? 2011- ...
javascript中函数参数以及函数中局部变量作用域一点点理解
2019独角兽企业重金招聘Python工程师标准>>> 函数中局部变量如果与外部变量重名,则用的是函数内部局部变量,用完就会被释放.我的理解函数是一个function定义的代码段,以 ...

用我对HTML的点点理解来做个简单的百度首页

用我对HTML的点点理解来做个简单的百度首页相关推荐

最新文章

热门文章