html书签菜鸟,菜鸟学习笔记: html基础

什么是html

html不是一种编程语言,它是一种标记语言,用于要告诉你的浏览器如何显示你访问的网页.

html是由一系列的元素组成的,例:我们将下行文字加一个段落元素

my cat is very grumpy

>```html

2.

my cat is very grumpy

html元素的剖析

让我们进一步来分析这个段落元素

html元素

元素的主要组成部分:

开始标签: 有尖括号包裹住标签名,表示元素开始或开始生效

结束标签: 也是用尖括号包裹住标签名,不过要在标签名前加上反斜杠"/",这表示元素结束的位置.

内容: 这是重要元素,在这种情况下仅仅是元素的内容.

元素: 开始标签+结束标签+内容=元素

元素也可以具有属性,如图:

html属性.png

属性包含你不希望在实际内容中显示的信息.这里,class是属性的名称,editor-note是属性值.

属性应始终包含:

它与元素名称之间的空格

属性名称,后跟一个"="号

属性值用双引号""包裹

嵌套元素

元素中的元素称为嵌套.如果我们想描述,猫的脾气非常暴躁,我们可以用"strong"元素包裹"非常",这意味着这个词要特别强调:

my cat is verygrumpy

我们要保证正确的嵌套: 在上例,我们先写`

`元素然后再写``元素.因此我们要结束``元素,然后再是`

`元素,下面是错误的写法:

>```html

my cat is very grumpy.

元素必须正确的打开和关闭,如果像上面一样,浏览器无法对内容做出正确的解释

空元素

有些元素没有内容,所以称为空元素,例如:

这包括两个属性,但没有闭合标签,也没有包裹内容.这是因为图像元素不会包裹元素对其产生影响,它的目的是在HTML页面中嵌入一个图像

####html文档的解剖

现在我们来看看将各个元素组成一个完整的html页面

>```html

my test page


: !doctype声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。指定了 HTML文档遵循的文档类型定义(DTD)。

; 包裹整个页面,有时称为根元素

: 设置字符集为utf-8

: 设置你的页面标题,常用于浏览器书签

图片

让我们再次关注图像元素:

- `src`: 图像路径

- `alt`: 替代文本

####标记文字

本节将介绍一些关于标记文字的基本html元素

**标题**

标题元素允许你指定内容的某些部分是你的内容的标题或副标题.html包含6个标题级别,`

-

`,最多用到3-4.

>```html

这是一个标题

这是一个标题

这是一个标题

这是一个标题

任务:在图像下尝试添加合适的标题

段落

如上所述,

元素是包含文本的段落,在标记常规文字内容时会频繁使用:

这是一个段落

任务: 添加一个段落,放在图像下文

**列表**

很多web上内容都是列表.要标记列表通常包括两个元素.最常用的列表类型是有序列表和无序列表

1. *无序列表* 中项目的顺序并不重要,就像购物列表,这些内容被包括在`

• `元素里

2. *无序列表* 中项目的顺序很重要,就像一个食谱.这些内容被包括在一个`

1. `元素里

列表内的每个项目被包括在一个`

`元素里

所以,如果我们想要将下面的段落碎片改成一个列表

>```html

关于水果,我们有苹果 香蕉 梨子 菠萝...

我们可以这样做

关于水果,我们有

• 苹果
• 香蕉
• 梨子
• 菠萝

任务: 尝试添加一个有序列表和无序列表到你的示例页面

####链接

链接非常重要,要植入一个链接,我们需要使用``标签,a是"anchor"(锚)的缩写.那么怎样添加链接呢,如下:

>```html

简书

href这个名字是hypertext reference 的缩写

任务:为你的页面添加一个链接

总结

晒一下学习成果

test

水果

好多水果

关于水果

• 苹果
• 香蕉
• 梨子
• 菠萝

简书

如下图