HTML与CSS系列教程第一集

作者:向洋


声明:
HTML与CSS系列教程为自己学习过程中的总结分享,是自己学习的另一种方式。其中如果有些错误也希望大家在实践中后提出来,直接评论就行,转载内容请注明作者。

首先告诉大家学习任何东西都不是太难,最重要的是坚持。可能开始啥都不懂,但是自己一步步的训练终有一天恍然大悟。

什么是 HTML?

HTML 是什么东西呢?一句话就够了。

HTML就是一种通过标记标签内容的方式,让浏览器能以正确的格式呈现内容,也就是通过一种语言把网页内容呈现出来的意思。

所以对于HTML两个重要内容:标记标签文本内容(你要呈现的内容),只要满足两个你就可以完成一个简单的页面,比如输入如下:

<html>
<body>

<h2>静夜思</h2>
<h5>作者:李白</h5>

<p>床前明月光,疑是地上霜。
举头望明月,低头思故乡。。</p>

</body>
</html>

在网页上呈现的内容就是
<html>
<body>

<h2>静夜思</h2>
<h5>作者:李白</h5>

<p>床前明月光,疑是地上霜。</p>
<p>举头望明月,低头思故乡。</p>

</body>
</html>


HTML 标签

HTML标签是一种你必须遵循的规则,不然无法呈现你想要表达的内容。前面提到的<(/)html><(/)h1><(/)body><(/)p>都是标记标签,前文演示过这些标签并不能在网页上呈现但是有他们的存在,文本内容才得以出现在网页上。

HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本内容
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML 标签是由尖括号“< >”包围的关键词,比如 <html>。HTML 标签通常是成对出现的,那么就叫他们标签对情侣吧(记住必须成双成对,不然就不能虐单身狗了)比如<b></b>就是标签对。标签对中的第一个标签如<b>是开始标签,第二个标签</b>是结束标签。

标记标签解释

然后在这里对不同的标签做一个解释以方便大家理解:

  • <html></html>之间的文本描述网页

要想呈现整个内容,在开始和结束都得有<html>,</html>

  • <body></body> 之间的文本是可见的页面内容

在你输入文本内容之前还得再加上<body>,写完后还得加上</body>

  • <h1></h1> 之间的文本被显示为标题

通过输入:

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

网页显示:

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
.....

  • <p></p>之间的文本被显示为段落

通过在<p></p>之间输入正文表示段落。

<p>这是正文</p>

<p>这是正文1</p> <p>这是正文2</p> <p>这是正文3</p>

总结

那么在这里做一个简单的整体演练,也就是把前面讲的内容合起来敲一遍看呈现出什么样的内容。

<html>
<body>
<h1>守望屁股</h1>
<p>A:哈哈哈!你也玩守望屁股呀!</p>
<p>B:哈哈哈哈!辣鸡游戏!我每天只玩十八个小时就不玩了!</p>
</body>
</html>

网页显示内容:

<html>
<body>
<h1>守望屁股</h1>
<p>A:哈哈哈!你也玩守望屁股呀!</p>
<p>B:哈哈哈哈!辣鸡游戏!我每天只玩十八个小时就不玩了!</p>
</body>
</html>

好了,这就是第一集的所有内容了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,686评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,668评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,160评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,736评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,847评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,043评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,129评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,872评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,318评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,645评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,777评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,470评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,126评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,861评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,589评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,687评论 2 351

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,741评论 1 92
  • 引言 在日常开发Android中,很多时候会遇到和WebView打交道,对CSS HTML JS不是很清楚的话是完...
    张文靖同学阅读 2,833评论 0 11
  • 1、HTML介绍 1 2、Html和CSS的关系 HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户...
    夏沫xx阅读 1,364评论 0 8
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,637评论 18 139
  • 巷子深处有一家卤煮,做的好下水,溜得了肝尖,爆得了肚丝。 手艺实在,价钱公道,常有食客慕名而来! 下水这玩意,吃不...
    荭樺阅读 486评论 0 1