天我们来学习HTML基本格式。
H1 标签定义了一个文档的标题 ,虽然在浏览器里显示了预期的效果 ,但它并不是一个符合规范的 html 文档,今天我们就来定义一个标准的 html 文档。
这是一个 html 文档的基本格式 ,来深入的剖析一下
<!DOCTYPE html> 这个标签会告诉浏览器,后面书写的是HTML5规范 的语法,浏览器会按照 HTML5 的语法规范进行解析
<html lang='en'> 包裹了整个页面的所有内容,有时被称为根元素。
<head> 是所有头部元素的容器,描述了文档的各种属性和信息,比如文档的标题,文档引用的样式表和JS脚本文件,页面元信息等等,绝大多数文档头部包含的数据,都不会真正作为内容显示给浏览者。
<meta charset="utf-8"> 将文档应该使用的字符集设置为UTF-8,它包括了书面语言的大多数字符,基本上可以处理放在页面上的任何文本内容,它可以帮助你解决页面乱码的问题。
<title> 设置页面的标题,也就是出现在浏览器标签中的内容,它描述页面被加入入书签或收藏时的标题
<body> 它包含了页面展示的所有内容,比如文字,图片,视频,游戏,可播放的音乐等等
一般情况下 一个符合规范的 html 文档 都应该使用这个基本格式
回到编辑器 我们创建一个文件 名字叫 base.html 我们快速的编写好 html 基本格式, 在 <body> 标签里写一个 h1 在里面写一些内容,浏览器中打开页面正常的显示了,每个页面都写这么多东西很麻烦 我们有 vscode。
删除所有内容 在页面里只需一个感叹号 ,再按一下 tab 键 ,html 基本格式自动生成了,这时就可以直接在 body 内编写网页内容了。
通过观察基本结构发现 标签前面有的有空格 有的没有空格 这是为什么呢 实际上 当出现标签嵌套的时候 需要保持一个固定的缩进 ,一般采用两个或者四个空格 具体看个人习惯和开发团队的规范,为了方便阅读不推荐混用 。 有些标签嵌套在一起,这就是标签结构嵌套
在一个标签内再次书写一个标签 他们之间形成了这样的包裹关系 ,别包裹的叫做子标签,包裹的就是父标签。
在父子标签嵌套的时候子标签整体相对于父标签多一套缩进,更加方便阅读。
叠样式表(Cascading Style Sheet,简称:CSS)是为网页添加样式的代码。本节将介绍 CSS 的基础知识,并解答类似问题:怎样将文本设置为黑色或红色?怎样将内容显示在屏幕的特定位置?怎样用背景图片或颜色来装饰网页?
和 HTML 类似,CSS 也不是真正的编程语言,甚至不是标记语言。它是一门样式表语言,这也就是说人们可以用它来选择性地为 HTML 元素添加样式。举例来说,要选择一个 HTML 页面里所有的段落元素,然后将其中的文本改成红色,可以这样写 CSS:
p {
color: red;
}
不妨试一下:首先新建一个 styles 文件夹,在其中新建一个 style.css 文件,将这三行 CSS 保存在这个新文件中。
然后再将该 CSS 文件连接至 HTML 文档,否则 CSS 代码不会对 HTML 文档在浏览器里的显示效果有任何影响。(如果你没有完成前几节的实践,请复习处理文件 和 HTML 基础。在笔记本里有这个方面的内容!)
1、打开 index.html 文件,然后将下面一行粘贴到文档头(也就是 <head> 和 </head> 标签之间)。
<link href="styles/style.css" rel="stylesheet">
2、保存 index.html 并用浏览器将其打开。应该看到以下页面:
如果段落文字变红,那么祝贺你,你已经成功地迈出了 CSS 学习的第一步。
让我们来仔细看一看上述CSS:
整个结构称为 规则集(通常简称“规则”),各部分释义如下:
注意其他重要的语法:
如果要同时修改多个属性,只需要将它们用分号隔开,就像这样:
p {
color: red;
width: 500px;
border: 1px solid black;
}
也可以选择多种类型的元素并为它们添加一组相同的样式。将不同的选择器用逗号分开。例如:
p, li, h1 {
color: red;
}
选择器有许多不同的类型。上面只介绍了元素选择器,用来选择 HTML 文档中给定的元素。但是选择的操作可以更加具体。下面是一些常用的选择器类型:
选择器名称 | 选择的内容 | 示例 |
元素选择器(也称作标签或类型选择器) | 所有指定(该)类型的 HTML 元素 | p 选择 <p> |
ID 选择器 | 具有特定 ID 的元素(单一 HTML 页面中,每个 ID 只对应一个元素,一个元素只对应一个 ID) | #my-id 选择 <p id="my-id"> 或 <a id="my-id"> |
类选择器 | 具有特定类的元素(单一页面中,一个类可以有多个实例) | .my-class 选择 <p class="my-class"> 和 <a class="my-class"> |
属性选择器 | 拥有特定属性的元素 | img[src] 选择 <img src="myimage.png"> 而不是 <img> |
伪(Pseudo)类选择器 | 特定状态下的特定元素(比如鼠标指针悬停) | a:hover 仅在鼠标指针悬停在链接上时选择 <a>。 |
选择器的种类远不止于此,更多信息请参阅 选择器。
译注:再一次说明,中文字体文件较大,不适合直接用于 Web Font。
在探索了一些 CSS 基础后,我们来把更多规则和信息添加至 style.css 中,从而让示例更美观。首先,让字体和文本变得更漂亮。
第一步:找到之前Google Font 输出的地址。并以<link>元素的形式添加进index.html文档头(<head>和</head>之间的任意位置)。代码如下:
<link href="https://fonts.font.im/css?family=Open+Sans" rel="stylesheet" type="text/css">
以上代码为当前网页下载 Open Sans 字体,从而使自定义 CSS 中可以对 HTML 元素应用这个字体。
第二步:接下来,删除 style.css 文件中已有的规则。虽然测试是成功的了,但是红字看起来并不太舒服。
第三步:将下列代码添加到相应的位置,用你在 Google Fonts 找到的字体替代 font-family 中的占位行。( font-family 意味着你想要你的文本使用的字体。)这条规则首先为整个页面设定了一个全局字体和字号(因为 <html> 是整个页面的父元素,而且它所有的子元素都会继承相同的 font-size 和 font-family):
html {
/* px 表示 “像素(pixels)”: 基础字号为 10 像素 */
font-size: 10px;
/* Google fonts 输出的 CSS */
font-family: 'Open Sans', sans-serif;
}
注:CSS 文档中所有位于 /* 和 */ 之间的内容都是 CSS 注释,它会被浏览器在渲染代码时忽略。你可以在这里写下对你现在要做的事情有帮助的笔记。
译注:/*``*/ 不可嵌套,/*这样的注释是/*不行*/的*/。CSS 不接受 // 注释。
接下来为文档体内的元素(<h1> (en-US)、<li>和<p>)设置字号。将标题居中显示,并为正文设置行高和字间距,从而提高页面的可读性。
h1 {
font-size: 60px;
text-align: center;
}
p, li {
font-size: 16px;
/* line-height 后而可以跟不同的参数,如果是数字,就是当前字体大小乘上数字 */
line-height: 2;
letter-spacing: 1px;
}
可以随时调整这些 px 值来获得满意的结果,以下是大体效果:
编写 CSS 时你会发现,你的工作好像是围绕着一个一个盒子展开的——设置尺寸、颜色、位置,等等。页面里大部分 HTML 元素都可以被看作若干层叠的盒子。
并不意外,CSS 布局主要就是基于盒模型的。每个占据页面空间的块都有这样的属性:
这里还使用了:
开始在页面中添加更多 CSS 吧!大胆将这些新规则都添加到页面的底部,而不要纠结改变属性值会带来什么结果。
html{
background-color:#00539f;
}
这条规则将整个页面的背景颜色设置为 所计划的颜色。
body{
width:600px;
margin:0 auto;
background-color:#ff9500;
padding:0 20px 20px 20px;
border:5px solid black;
}
现在是 <body> 元素。以上条声明,我们来逐条查看:
h1{
margin: 0;
padding:20px 0;
color: #00539f;
text-shadow:3px 3px 1px black
}
你可能发现页面的顶部有一个难看的间隙,那是因为浏览器会在没有任何 CSS 的情况下 给 <h1>en-US等元素设置一些默认样式。但这并不是个好主意,因为我们希望一个没有任何样式的网页也有基本的可读性。为了去掉那个间隙,我们通过设置margin: 0;来覆盖默认样式。
至此,我们已经把标题的上下内边距设置为 20 像素,并且将标题文本与 HTML 的背景颜色设为一致。
需要注意的是,这里使用了一个 text-shadow 属性,它可以为元素中的文本提供阴影。四个值含义如下:
不妨尝试不同的值看看能得出什么结果。
img{
display:block;
margin:0 auto;
}
最后,我们把图像居中来使页面更美观。可以复用 body 的margin: 0 auto,但是需要一点点调整。<body>元素是块级元素,意味着它占据了页面的空间并且能够赋予外边距和其他改变间距的值。而图片是内联元素,不具备块级元素的一些功能。所以为了使图像有外边距,我们必须使用display: block 给予其块级行为。
注:以上说明假定所选图片小于页面宽度(600 pixels)。更大的图片会溢出 body 并占据页面的其他位置。要解决这个问题,可以:
1)使用 图片编辑器 来减小图片宽度; 2)用 CSS 限制图片大小,即减小 <img> 元素 width 属性的值(比如 400 px)。
注:如果你暂时不能理解 display: block 和块级元素与行内元素的差别也没关系;随着你对 CSS 学习的深入,你将明白这个问题。
如果你按部就班完成本文的实践,那么最终可以得到以下页面
相关推荐:
前端新手看过来,手把手带你轻松上手html的实操
站的每一个部分都很重要,你是否忽略了“联系我们”页面?来看看有什么设计这个页面的技巧吧。
Yummygum
Yummygum的联系页面很干净很简单,只有3个框和一个提交按钮。简单的好处是不会让游客望而却步。
大号的文字显得简练易读,方便浏览者快速校对信息,从而有更大的满足感。
以现在的网页技术很容易创建一个动态的联系表格。通常留有3-6个框供浏览者填写姓名,邮件和个人信息。
大多数网站游客偏爱这种联系表,因为比较节省时间——不需要打开自己的邮件客户端、拷贝邮箱地址。目前网站联系表格通常包含网络安全技术比如CAPTCHA,所以安全性是很强的。
这种表格的所有元素看起来很统一,给人感觉很完整。另外建议使用JavaScript显示提示和帮助,确保用户知道他们的消息已发送成功。
Princeink
复杂一点表格看Prince Ink quote form网站,页面分为4部分。
记住,不是每个框都要填写。只有带星号是必填的。大部分情况下,游客能够识别星号,但是部分游客可能发现不了。如果是设计更大的联系表格,要突出必填的项目。这样将简化提交过程,优化用户体验。
表格既要讲统一性,也要讲审美。毕竟表格是网站外观的一个重要部分。
Underbelly
Underbelly是一个设计创意机构网站,联系页面很独特。显而易见,这个联系表格用了CSS样式表和JavaScript。输入界面看起来像一般正式文件的表格形式。设计独特整洁,让人觉得发送电子邮件也成了一种乐趣!
Dangerousrobot
Dangerous Robot 网站的设计跟上一个不同,联系表格与其他元素通过明亮的暖色和矢量图案很好的融合在一起。联系表格基本采取居中模式,每个框里加上图标,使得辨识度和阅读速度得到提高。
一个公司的地理位置在商务交往中往往扮演着重要的角色。加入嵌入式地图则把企业地址可视化。谷歌地图有一个自定义的嵌入功能,允许开发者添加全功能的谷歌地图到联系页面。
Bkwld
BKWLD的联系页,除了一些基本的邮件/电话信息,添加了MAPbox动态地图,调高了交互性。
Fortyonetwenty
也可以考虑使用一个定制的照片,不用JavaScript地图。在FortyOneTwenty网站联系页面,使用一个世界地图,上面的蓝点标注了全球分公司和员工分布情况。
由于这张照片是作为背景图像,所以融合更自然。地图让位于内容,显得不喧宾夺主。
在联系页面添加社交网站链接,可赋予企业可触摸的人格。这些链接可供浏览者在无法或者不宜使用电话、邮件的情况下联系企业,并且可以浏览企业更多动态信息。最好能在同一页上提供不同的社交账号链接,让浏览者决定选择哪一个。
Tone
我最喜欢的英国创意机构非Tone莫属,无论是它的作品或者是作品集网站。它的联系页使用定位他们办公室的完整地图和动态联系表格。
往下滚动鼠标,你会发现一个长长的的社交媒体图标水平列表。这些链接包括该公司的各种社交账号包括Twitter,LinkedIn,Instagram。按钮大而醒目,但是并没有放在页面顶部,因为邮件,电话和地址才是最重要的。
Positiveadvertising
Positive Advertising网站的社交账号图标设置的比较小。这个网站是单网页网站。社交账号图标位于电话号码,电子邮件地址和邮寄地址的下面。图标采取了统一的单色处理。
这个方法使用较少,但是可以增加网页的个性。个人网站可以在联系页面加上本人照片。大一点的公司往往把照片转移到“公司团队”页面,每个重要人物有单独的照片和介绍。
Blueskyresumes
Blue Sky Resumes网站的“关于我们”页面包含一段团队的介绍。每个雇员都有自己单独的网页链接。
“联系我们”页面的顶部,注意到沿左边一个固定的滚动块没有,滚动块小按钮链接到电子邮件,手机信息,还可以发送一个请求报价。这个网站联系页面非常生动,让人耳目一新。
Etsy
Etsy的“团队”页面。每个团队成员照片链接到各人简介页面。这种个性化的设计无论是对于客户还是公司的第三方供应商来讲是都很棒的。
这个团队网页不直接链接到他们的联系页面。这是一种有目的的设计选择,因为公司有那么多职员,足够撑起一个网页。不过该网页可以链接到“关于”网页,“新闻”网页,其中包含一些电子邮件联系信息。
团队成员列表不是必须有的,但在合适的时机可以作为良好的补充。
任何网页的最重要的是可用性,只要你学会迎合用户体验,那么设计精良的联系页面就不在话下了。
*请认真填写需求信息,我们会在24小时内与您取得联系。