1-1-4【HTML基础】HTML基本结构介绍

题外话:没啥要说的,给大家表演一个口技,poi~


1.HTML基本骨架

  • 4个最基本的标签:<html>,<head>,<title>,<body>

2.html标签

  • HTML文件的根元素,其他所有的标签都要写在<html>...</html>标签的内部。

3.head标签

  • 用于存放<title>,<meta>,<base>,<style>,<script>,<link>等对于网页的配置,除了title以外,其他都不会显示在网页上。

4.title标签

  • 让我们的网页有一个名字,页签中展示的就是网页的名字。
  • title中的关键字,可作为搜索引擎搜索的关键字,提高搜索排名。
  • 搜索内容的标题展示。
  • 浏览器收藏夹的默认标题。
  • 注意:建议网页必须添加title,内容挑选关键词组成,利于被搜索。

5.body标签

  • 定义网页的主体部分,用于存放所有HTML显示内容的标签,例如p,h1,a,div等标签。

6.DTD声明

  • 引言:在第1-1-2讲中,我们介绍了VS Code的一个快捷键,! + tab,会自动为我们生成HTML文件最基础的代码,在第一行,我们会看到这样的代码。
  • 什么是DTD:完整的HTML文件,第一行内容叫做“文档定义类型”,全称DocType Definition。
  • 作用:告诉浏览器,这个网页是用哪个版本的HTML规范进行编写的,让浏览器按照相应规范进行解析。

HTML的DTD只有这一种写法,了解即可。若小伙伴感兴趣,可以自行查询HTML1.0-4.01版本的DTD写法。

7.html标签的lang属性

  • 作用:仅用于标识该网页中的内容,哪一种语言是主体语言。
  • 好处:搜索引擎可以根据该属性,来筛选搜索结果的语言,来提高搜索排名。

8.meta标签的charset属性

  • meta标签:提供了HTML文档的元数据,为浏览器展示网页提供一些数据信息,后面会细讲,目前了解即可。
  • charset属性:该属性指定了本网页使用的字符集是什么,不同字符集的使用,会影响网页是否正常展示及网页加载速度。

扩展1:字符集

  • 什么是字符集:是一个存储了多种文字及符号的集合。
  • 为什么要有字符集
    • 我们都知道计算机底层实际上就是二进制,数字0和1的计算,那么如何让电脑能识别abcd呢?
    • 举个非常简单的例子,二进制让00代表a,让01代表b,10代表c,11代表d,那么计算机就可以根据0和1来存储&展示字母abcd。
    • 其他的文字和符号也是同理,为了让计算机能识别和显示我们人类的文字和符号,所以需要有字符集的存在。
  • 几个常用的字符集(了解即可)
    • UTF-8:是针对Unicode的一种可变长度编码,涵盖了人类几乎所有的语言和符号,其中中文字符占3字节。
    • gb2312:收录了汉字6k+,拉丁字母、希腊字母、日文平假片假名等。
    • gbk:是gb2312的拓展,增加了繁体字,其中中文字符占2字节。
  • 使用建议
    • 网页没有加载速度要求,或制作外文网页,使用utf-8
    • 网页包含大量中文,且要求网页加载速度快,使用gbk
  • 注意事项
    • meta标签声明的字库,必须和编辑器软件默认的字库相同,否则会出现乱码。

拓展2:计算机存储单位

  • bit(位):总所周知,计算机的最小单位是二进制,0和1,其单位为bit。
  • Byte(字节):存储空间的基本计算单位(内存就是1字节为1个单元),1 Byte=8 bit,也就是说1Byte的空间,可以表示28种数字。
  • KB:没有特殊含义,就是单位变大了,1 KB = 210 Byte = 1024 Byte
  • MB:没有特殊含义,就是单位变大了,1MB = 10 KB = 1024 KB
  • 以此类推...
  • 其中最重要的是bit和byte比较容易混淆,别记混了!

结束语:一花一世界,一木一浮生,诸君共勉!

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

推荐阅读更多精彩内容