HTML语言基础学习(I)-基础HTML标记for dummy

请注意,本文编写于 192 天前,最后修改于 154 天前,其中某些信息可能已经过时。

对主题模板的自定义微调,提示了我学习一点点网页制作的语言对小站的持续发展的重要性,所以希望尝试学习一点点HTML语言。
曾经记得以前看到过一套《for dummy》系列书名的教材,也就是傻瓜也能读懂的教程。所以这一系列也以此命名,以此纪念一个理科小妹儿从dummy开始,学习计算机语言的第一步。


Beginning HTML

HTML是Hypertext Markup Language的缩写. 有了HTML代码, 我们可以告知一个浏览器需要展示的网页内容.
类似于Chrome和Safari这种浏览器 可以读取和解析HTML代码,并将代码中的内容展示在网站中。
HTML代码有其特殊的结构,如,它通常起始于<html>
如:

<html>
 <body>
   Hello, World!
 </body>
</html>

<html>是一个标记(tag),标记帮助浏览器分辨出如何处理标记内部的文字。
上一段代码中<body></body>也是标记,标记起始于“<",结束于“>”记号。
即:Opening tags use a < sign, a special word, and a > sign; Closing tags have an extra character before the special word : a / sign.
我们需要浏览器展示的任何内容,都需要出现在<body></body>字段之间。

Common tags

标记是网站的building blocks。
对于一段内容的展示,除了<body>,我们需要更多的其他的标记。

<html>
 <body>
   My favorite things
   Love actually
   Radwimps
   Shiino Ringo
   Brave New World
 </body>
</html>

这段代码在页面上展示出来便是:

1.png
1.png

可以看到这段文字都在单行显示,即使是在这段代码的文字之间强行空行,展示出来仍然为单行显示。
因此在body标记内需要添加一些特定的标记,实现文字的格式编辑。

如果想要将第一行作为一级标题,我们需要加入<h1>标记:

<html>
 <body>
   <h1>My favorite things</h1>
   Love actually
 </body>
</html>

这段代码在页面上展示出来便是:

2.png
2.png

如果想要继续加入多级标题,只需要在特定文字段前后加入<h2>,<h3>等等标题标记:

<html>
 <body>
   <h1>My favorite things</h1>
   <h2>Love actually</h2>
   <h3>Radwimps</h3>
   <h4>Shiino Ringo</h4>
   Brave New World
 </body>
</html>

这段代码在页面上展示出来便是:

3.png
3.png

我们同样可以通过段落标记<p>来分割单行文字。

<html>
 <body>
   <h1>My favorite things</h1>
   <p>Love actually  
   Radwimps  </p>
   <p>Shiino Ringo  
   Brave New World  </p>
 </body>
</html>

这段代码在页面上展示出来便是:

4.png
4.png

我们依然可以在段落中添加<br>标记,对单行文字进行标记和分段。

<html>
 <body>
   <h1>My favorite things</h1>
   <p>Love actually  <br>
   Radwimps  </p>
   <p>Shiino Ringo  <br>
   Brave New World  </p>
 </body>
</html>

这段代码在页面上展示出来便是:

5.png
5.png

<br>没有Closing tag,因为它是一个空标记(empty tag)。空标记没有内容,但是它们仍然可以作为结构辅助代码。

如果想要将某个文字设置为斜体,我们需要加入的标记为<em>

<html>
 <body>
   <h1>My favorite things</h1>
   <p>Love actually  <br>
   <em>Radwimps</em>  </p>
   <p>Shiino Ringo  <br>
   <em>Brave</em> New World  </p>
 </body>
</html>

这段代码在页面上展示出来便是:

6.png
6.png

如果想要将某个文字设置为加粗,我们需要加入的标记为<strong>

<html>
 <body>
   <h1>My favorite things</h1>
   <p>Love actually  <br>
   <strong>Radwimps</strong>  </p>
   <p>Shiino Ringo  <br>
   <strong>Brave</strong> New World  </p>
 </body>
</html>

这段代码在页面上展示出来便是:

7.png
7.png

有一些标记中的内容在网页中不会被展示出来,如<head>标记。
<head>标记是用来给网站加一些特殊的信息,如网站的title和style等等。
当需要用head标记给网站增加title时,请把<title>标记加入在<head>标记之内,
如:

<html>
 <head>
   <title>Aoi's Web</title>
 </head>
 <body>
   <h1>My favorite things</h1>
   <p>Love actually  <br>
   <strong>Radwimps</strong>  </p>
   <p>Shiino Ringo  <br>
   <strong>Brave</strong> New World  </p>
 </body>
</html>

还有一个对网站来说很重要的代码是doctype
doctype告诉浏览器我们使用的网站网站代码类型是HTML。因为如果我们不加入doctype,浏览器需要猜测类型,这可不是一个好主意。
为了设置doctype,我们需要这样的标记<!doctype html>,别忘记“!”

Links and multimedia

链接

准确来说,包含HTML代码的文件称为网页,网页组合在一起,便构成了网站,所以我们需要链接(Links)或者超链接(Hyperlinks)将网页组合在一起。因此,我们可以通过点击链接取代将www网址输入。
链接标记为<a>,在标记中的文字,将称为链接文字。
为了让该项链接文字可以成功的指向某个页面,我们需要使用属性(attribute)。属性为这些tags提供一些额外的信息,只输入在opening tags里。对于“链接”我们需要的属性文字为href

<!doctype html>
<html>
 <body>
  <a herf>带我去小葵的实验室!</a>
 </body>
</html>

herf需要赋值,我们使用“=”和“""”来给这个链接指定一个页面。

<!doctype html>
<html>
 <body>
  <a herf=“www.labgirl-aoi.zone”>带我去小葵的实验室!</a>
 </body>
</html>

我们同时也可以将链接指向本地的文件,如果在相同的文件夹中有index.html命名的网页,我们也可以直接在将<a>中的属性设置为herf="index.html"

图片

图片的tag是<img>,可以直接插入<body>中,和<br>类似,<img>没有closing tag,是一个空标记。<img>的属性是scr,表示source。我们可以插入同文件夹中的本地图片,和herf语句类似,插入本地图片的语句为<img scr="image.png">。当然我们也可以使用其他网站图片的URL,来插入其他网站上的图片。

<!doctype html>
<html>
 <body>
  <img scr=“http://getmimo.com/r/image.png”>
 </body>
</html>

我们还可以在img的<>中加入可以改变图片大小的属性。如想要改变图片的宽度,插入的属性为width,如果想要改变图片的高度,插入的属性为height,输入的代码如下:

<!doctype html>
<html>
 <body>
  <img scr=“http://getmimo.com/r/image.png” width=“100” height=“70”>
 </body>
</html>

还有一个有用的tag可以让我们在一个网站中插入另一个网站,inline frames标记<iframe>。这是一个插入视频的好方法。如果你在src后加入Youtube视频的网址,可以直接在一个框框里把可播放的Youtube视频插入你的网站中。

<!doctype html>
<html>
 <body>
  <h1>葵仔最喜欢的油管视频</h1>
  <iframe scr=“https://www.youtube.com/watch?v=rP0uuI80wuY&start_radio=1&list=RDrP0uuI80wuY”>
 </body>
</html>

Style

本章节开始,我们需要向一些tags中加入CSS来改变展示内容的外观。

整段tags内容的样式修改

上一章我们说到,属性会给tags增加一些额外的内容。而对于每一个HTML标记,我们都可以增加一个名为style的属性来改变内容的外观。填入style后,在style=“”中加入各种各样的内容来改变页面的样子。

<!doctype html>
 <html>
  <body style="background-color:gray;">
      我是一行有着灰色背景的文字。
  </body>
</html>

这样的代码在页面中展示出来便是:

8.png
8.png

冒号前后的background-color和gray都是可以根据需要修改的内容。由于style用到了CSS编辑,记住CSS编辑的末尾都需要加入一个分号“;”。
再例如,我们将<p>标记中的文字内容颜色改为红色,在<p>中添加style即可。

<!doctype html>
 <html>
  <body>
    <p style="color:red;">
      我是一行红色的文字。
    </p>
  </body>
</html>

上面的代码在页面中展示出来便是:

9.png
9.png

如果想要添加另外一项外观的设定,用;作为分隔符,并列在style=“”中即可。如将上一段代码<p>进行修改<p style="color:red;front-family:arial">便可以同时修改<p>中文字内容为红色,并将字体修改为“arial”。
通过style修改文字的样式还有字体大小,如修改标题一的字体大小为26px,则可键入如下代码
<h1 style="font-size:26px">我是一个有点大的标题</h1>
相应的部分便可以发生修改。
其中px为piexl的缩写,是一种衡量屏幕上内容样式大小的单位。更大的数字代表更大的表现。

<!doctype html>
 <html>
  <body>
    <p style="font-size:26px;">我可能有点大哦</p>
    <p style="font-size:13px;">你应该勉强可以看清楚我</p>
    <p style="font-size:4px;">喂!这可不是一个好选择</p>
  </body>
</html>

这段代码在页面上显示为:

10.png
10.png

有些时候我们需要将标题中的文字居中,我们可以在<h1>中加入相应的style=“text-align:center;"这样文字就可以啦。

<!doctype html>
 <html>
  <body>
    <h1 style=“text-align:center;">我是一个居中的标题吼</h1>
   标题真的被居中了吗!
  </body>
</html>

段落中部分内容的样式修改

到目前为止我们都是改变了整段tag中的内容,如果我们想要单纯改变大段文字中某部分内容的style应该用到怎样的标记呢?答案是<span>。用<span style=";"></span>框住一段文字,便可以将这段文字的style修改为“”中的样式。

<!doctype html>
 <html>
  <body>
    <h1>我真的超认真的</h1>
    <p>
      这篇教程我真的写的超认真的,你看<span style="color:red;">这行红色的文字</span>,就知道了!
    </p>
   </div>
  </body>
</html>

这段代码展示的页面为:

11.png
11.png

如果我们想要把包含标题<h1>,段落<p>等在内的tags使用统一的style样式,我们可以用<div>标记把整段包围起来!

<!doctype html>
 <html>
  <body>
   <div style="color:yellow;background-color:black;text-align:center;">
    <h1>我真的超认真的</h1>
    <p>
      这篇教程我真的写的超认真的!<br>Skr~~~~~
    </p>
   </div>
  </body>
</html>

以上的代码在页面中展示为:

12.png
12.png

<span><div>是CSS中很重要的代码,要好好记住哦!

List

引领访问者访问整个网站的过程叫做导航(navigation),为了建立一个导航目录,我们需要用到lists。lists是一个将网页很好的组织起来的方式,也是HTML中最常用的元素。
List标记有几种不同的分类。

有序list

使用<ol>标记,建立一个有序list,并在其中用<li>标记,添加list中的内容。

<!doctype html>
 <html>
  <body>
    <ol>
      <li>我是葵仔</li>
      <li>我是葵仔二号</li>
      <li>我是葵仔三号</li>
    </ol>
  </body>
 </html>

这段代码在页面上的显示为:

13.png
13.png

文字前面的记号称为markers。除了数字记号,还可以把markers替换为字母和罗马数字。在<ol>增加type=“A”,可将1. 2. 3. 替换为A. B. C.;在<ol>增加type=“I”,可将1. 2. 3. 替换为I. II. III.。
如果想要实现降序,则需要在<ol>中增加reversed。

<!doctype html>
 <html>
  <body>
    <ol type=“I” reversed>
      <li>葵仔到最后去啦</li>
      <li>葵仔二号保持不变啦</li>
      <li>葵仔三号领先啦</li>
    </ol>
  </body>
 </html>

这段代码在页面中的表现为:

14.png
14.png

无序list

无序list听起来有点乱,其实他们只是“没有序号的list”。类似bullet lists。为了建立无序list,我们用到的标记是<ul>。就像有序list一样,我们同样使用<li>来增加内容。

<!doctype html>
 <html>
  <body>
    <ul>
      <li>我是葵仔</li>
      <li>我也是葵仔</li>
      <li>我还是葵仔</li>
    </ul>
  </body>
 </html>

这段代码在页面上的显示为:

15.png
15.png

list与link的结合

我们可以将无序list和有序list结合起来,创造一个无序中有序,有序中无序的感觉。妈呀我想我需要无敌清醒的头脑来理顺。

 <!doctype html>
 <html>
  <body>
    <ol>
    <li>我喜欢的动漫们
     <ul>
         <li>银魂</li>
         <li>命运石之门</li>
         <li>来自新世界</li>
     </ul>
    </li>
     <li>我最讨厌的实验排行榜      
      <ol reversed>
         <li>有机实验</li>
         <li>放射实验</li>
         <li>质谱分析</li>
      </ol>
     </lr>
   </ol>
  </body>
 </html>

这段代码在页面上的显示为:

16.png
16.png

现在让我们用<a>来为这些list加入链接吧。

<!doctype html>
 <html>
  <body>我喜欢的动漫们
     <ol>
          <li><a href=“https://movie.douban.com/subject/2057171/”>银魂</a></li>
          <li><a href=“https://movie.douban.com/subject/4925398/”>命运石之门</a></li>
          <li><a href=“https://movie.douban.com/subject/10527275/”>来自新世界</a></li>
      </ol>
  </body>
 </html>

通过以上这些元素~ 我们可以开始尝试建立一个最最基本的傻瓜小网站啦!

那么今天的学习就到这里!我们下次再见!我是超认真的葵仔!你真诚的学习好伙伴!

Comments

添加新评论

已有 6 条评论

哈哈哈,小葵马上可以学会了让小站越来越漂亮了!

以后可不可以留言的时候不强制填邮箱!嘻嘻有点麻烦

Aoi Aoi 回复 @hh

不阔以的鸭!typecho的评论默认都要填,好像是因为要防止机器人什么的>w

HH HH 回复 @Aoi

可是机器人也可以输入这个呀 又不是验证码 哈哈~

Aoi Aoi 回复 @HH

哎呀呀我也母鸡了呢。我去研究一下。

sqyon sqyon 回复 @Aoi

邮箱是为了绑定gravatar头像的~

Aoi Aoi 回复 @sqyon

我换了个新模板!>w

Title - Artist
0:00