我们经常从网页上看见这种的表格,这个表格是如何画出来的呢?
1、说明:表格是有行和列的,画表格也不是一个标签,而是多个标签组合使用。
2、画表格步骤:先看图
代码演示:
<body>
<!-- 1、使用 table 标签画出表格的整体范围-->
<!-- 5、在 table 的起始标签里添加 border 给表格画线;"2" 代表表格外框的线粗细-->
<table border="2">
<!--2、使用 tr 标签画行-->
<tr>
<!-- 3、使用 td 标签画单元格,就相当于是 列-->
<td>张三</td>
</tr>
</table>
</body>
<body>
<table border="2">
<tr>
<td>张三</td>
</tr>
<tr> <!-- 如果需要多行,可以复制上面的 tr 包括 td 标签-->
<td>张三</td>
<td>李四</td>
<td>王五</td> <!--如果需要多个列,可以多复制几个 td 标签-->
<!-- 列的排序方式是:第一行的td标签为第1列,第二行的td为第2列,以此类推-->
</tr>
</table>
</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的实操
喜欢互联网的一点是在互联网放置静态页面是如此简单。今天有人问我该怎么做,所以我想我会快速地写下来!
-- Julia Evans(作者)
我喜欢互联网的一点是在互联网放置静态页面是如此简单。今天有人问我该怎么做,所以我想我会快速地写下来!
我的所有网站都只是静态 HTML 和 CSS。我的网页设计技巧相对不高( https://wizardzines.com 是我自己开发的最复杂的网站),因此保持我所有的网站相对简单意味着我可以做一些改变/修复,而不会花费大量时间。
因此,我们将在此文章中采用尽可能简单的方式 —— 只需一个 HTML 页面。
我们要放在互联网上的网站只是一个名为 index.html 的文件。你可以在 https://github.com/jvns/website-example 找到它,它是一个 Github 仓库,其中只包含一个文件。
HTML 文件中包含一些 CSS,使其看起来不那么无聊,部分复制自 https://example.com 。
有以下几步:
上面的 index.html 页面位于 julia-example-website.neocities.com 中,如果你查看源代码,你将看到它与 github 仓库中的 HTML 相同。
我认为这可能是将 HTML 页面放在互联网上的最简单的方法(这是一次回归 Geocities,它是我在 2003 年制作我的第一个网站的方式):)。我也喜欢 Neocities (像 glitch ,我也喜欢)它能实验、学习,并有乐趣。
这绝不是唯一简单的方式,在你推送 Git 仓库时,Github pages 和 Gitlab pages 以及 Netlify 都将会自动发布站点,并且它们都非常易于使用(只需将它们连接到你的 GitHub 仓库即可)。我个人使用 Git 仓库的方式,因为 Git 不会让我感到紧张,我想知道我实际推送的页面发生了什么更改。但我想你如果第一次只想将 HTML/CSS 制作的站点放到互联网上,那么 Neocities 就是一个非常好的方法。
如果你不只是玩,而是要将网站用于真实用途,那么你或许会需要买一个域名,以便你将来可以更改托管服务提供商,但这有点不那么简单。
如果你熟悉在 Git 中编辑文件,同时想练习 HTML/CSS 的话,我认为将它放在网站中是一个有趣的方式!我真的很喜欢它的简单性 —— 实际上这只有一个文件,所以没有其他花哨的东西需要去理解。
还有很多方法可以复杂化/扩展它,比如这个博客实际上是用 Hugo 生成的,它生成了一堆 HTML 文件并放在网络中,但从基础开始总是不错的。
via: https://jvns.ca/blog/2019/09/06/how-to-put-an-html-page-on-the-internet/
作者: Julia Evans 选题: lujun9972 译者: geekpi 校对: wxy
本文由 LCTT 原创编译, Linux中国 荣誉推出
*请认真填写需求信息,我们会在24小时内与您取得联系。