HTML入门

一、HTML是什么 ?

  • HTML 是用来描述网页的一种语言。
  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言,而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面
  • 可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。

HTML文档的后缀名

  • .html
  • .htm
    以上两种后缀名没有区别,都可以使用。

二、HTML网页结构

只有 在<body> 区域 (白色部分) 才会在浏览器中显示。


image.png

示例:浏览器中运行


image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试案例</title>
</head>
<body> 
    <h1>我的第一个标题</h1> 
    <p>我的第一个段落。</p> 
</body>
</html>

示例解析:

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元(meta)数据
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

注意: 对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码。
有些浏览器会设置 GBK 为默认编码,需要设置 <meta charset="gbk">。

三、HTML版本

image.png

四、HTML标签 和元素

image.png

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词,比如 <html>
HTML 标签通常是成对出现的,比如 <b> 和 </b>
标签对中的第一个标签是开始标签,第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
内容(Content):这是元素的内容,在这种情况下只是文本。
元素(Element):开始标记,加结束标记,加内容,等于元素。
空元素在开始标签中进行关闭(以开始标签的结束而结束)

(一)嵌套元素
把元素放到其它元素之中被称作嵌套。

正确示例:<p>My cat is <strong>very</strong> grumpy.</p>
错误示例:<p>My cat is <strong>very grumpy.</p></strong>

需要确保元素被正确的嵌套:在上面的例子中先打开<p>元素,然后再打开<strong>元素,因此必须先将<strong>元素关闭,然后再去关闭<p>元素。

(二)块级元素和内联元素

  • 块级元素在页面中以块的形式展现,会出现在新的一行,其后的内容也会被挤到下一行展现。
    块级元素通常用于展示页面上结构化的内容,例如段落、列表、导航菜单、页脚等等。
    一个以block形式展现的块级元素不会被嵌套进内联元素中,但可以嵌套在其它块级元素中。
  • 内联元素通常出现在块级元素中并包裹文档内容的一小部分,而不是一整个段落或者一组内容。
    内联元素不会导致文本换行,它通常出现在一堆文字之间,例如超链接元素<a>或者强调元素<em>和 <strong>。

(三)空元素
不是所有元素都拥有开始标签,内容和结束标记. 一些元素只有一个标签,通常用来在此元素所在位置插入/嵌入一些东西 。
例如:<img src="img/demo.png">元素<img>是用来在元素所在位置插入一张指定的图片。

五、HTML 属性

属性是 HTML 元素提供的附加信息,这些信息不会出现在实际的内容中。


image.png
  • HTML 元素可以设置属性
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现,比如:name="value"。
  • 属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。
    提示: 在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name='John "ShotGun" Nelson'
  • 属性和属性值对大小写不敏感。不过,万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
    而新版本的 (X)HTML 要求使用小写属性。
  • 布尔属性:有时会看到没有值的属性,它是合法的。这些属性被称为布尔属性,他们只能有跟它的属性名一样的属性值。例如disabled 属性,他们可以标记表单输入使之变为不可用(变灰色),此时用户不能向他们输入任何数据。
    <input type="text" disabled="disabled"><input type="text" disabled>

适用于大多数 HTML 元素的属性:


image.png

六、实体引用: 在HTML中包含特殊字符

在HTML中,字符 <, >,",' 和 & 是特殊字符,它们是HTML语法自身的一部分。
必须使用字符引用表示字符的特殊编码, 每个字符引用以符号&开始, 以分号(;)结束。


image.png

提示: 维基百科上有一个包含所有可用HTML字符实体引用的列表:XML和HTML字符实体引用列表

七、HTML注释

在HTML中有一种可用的机制来在代码中书写注释 ,注释是被浏览器忽略的,而且是对用户不可见的,它们的目的是允许描述你的代码是如何工作的和不同部分的代码做了什么等等。

为了将一段HTML中的内容置为注释,你需要将其用特殊的记号包括起来, 比如:

<!-- 测试 -->
<p>测试部分</p> 

参考:菜鸟教程

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