什么是html
html不是一种编程语言,它是一种标记语言,用于要告诉你的浏览器如何显示你访问的网页.
html是由一系列的元素组成的,例:我们将下行文字加一个段落元素
- my cat is very grumpy
>```html
2. <p>my cat is very grumpy</p>
html元素的剖析
让我们进一步来分析这个段落元素
元素的主要组成部分:
- 开始标签: 有尖括号包裹住标签名,表示元素开始或开始生效
- 结束标签: 也是用尖括号包裹住标签名,不过要在标签名前加上反斜杠"/",这表示元素结束的位置.
- 内容: 这是重要元素,在这种情况下仅仅是元素的内容.
- 元素: 开始标签+结束标签+内容=元素
元素也可以具有属性,如图:
属性包含你不希望在实际内容中显示的信息.这里,class是属性的名称,editor-note是属性值.
属性应始终包含:
- 它与元素名称之间的空格
- 属性名称,后跟一个"="号
- 属性值用双引号""包裹
嵌套元素
元素中的元素称为嵌套.如果我们想描述,猫的脾气非常暴躁,我们可以用"strong"元素包裹"非常",这意味着这个词要特别强调:
<p>my cat is <strong>very</strong>grumpy</p>
我们要保证正确的嵌套: 在上例,我们先写`<p>`元素然后再写`<strong>`元素.因此我们要结束`<strong>`元素,然后再是`<p>`元素,下面是错误的写法:
>```html
<p>my cat is <strong>very grumpy.</p></strong>
元素必须正确的打开和关闭,如果像上面一样,浏览器无法对内容做出正确的解释
空元素
有些元素没有内容,所以称为空元素,例如<img>:
这包括两个属性,但没有闭合标签,也没有包裹内容.这是因为图像元素不会包裹元素对其产生影响,它的目的是在HTML页面中嵌入一个图像
####html文档的解剖
现在我们来看看将各个元素组成一个完整的html页面
>```html
<!doctype html>
<html>
<head>
<meat charset="utf-8"/>
<title>my test page</title>
</head>
<body>
</body>
</html>
-
<!doctype html>: !doctype声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。指定了 HTML文档遵循的文档类型定义(DTD)。 -
<html></html>; 包裹整个页面,有时称为根元素 -
<head></head>:头里的内容不显示给用户,其中包括文件引用(css,js),seo优化,字符集的声明... -
<body></body>:<body>体包含了你想要呈现给用户的内容,包括文字 图片 流媒体,或任何其他内容 -
<meta charset="utf-8"/>: 设置字符集为utf-8 -
<title></title>: 设置你的页面标题,常用于浏览器书签
图片
让我们再次关注图像元素:
- `src`: 图像路径
- `alt`: 替代文本
####标记文字
本节将介绍一些关于标记文字的基本html元素
**标题**
标题元素允许你指定内容的某些部分是你的内容的标题或副标题.html包含6个标题级别,`<h1>-<h6>`,最多用到3-4.
>```html
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<h4>这是一个标题</h4>
任务:在图像下尝试添加合适的标题
段落
如上所述,<p>元素是包含文本的段落,在标记常规文字内容时会频繁使用:
<p>这是一个段落</p>
任务: 添加一个段落,放在图像下文
**列表**
很多web上内容都是列表.要标记列表通常包括两个元素.最常用的列表类型是有序列表和无序列表
1. *无序列表* 中项目的顺序并不重要,就像购物列表,这些内容被包括在`<ul>`元素里
2. *无序列表* 中项目的顺序很重要,就像一个食谱.这些内容被包括在一个`<ol>`元素里
列表内的每个项目被包括在一个`<li>`元素里
所以,如果我们想要将下面的段落碎片改成一个列表
>```html
<p>关于水果,我们有苹果 香蕉 梨子 菠萝...</p>
我们可以这样做
<p>关于水果,我们有</p>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>梨子</li>
<li>菠萝</li>
<ul>
任务: 尝试添加一个有序列表和无序列表到你的示例页面
####链接
链接非常重要,要植入一个链接,我们需要使用`<a>`标签,a是"anchor"(锚)的缩写.那么怎样添加链接呢,如下:
>```html
<a href="//www.greatytc.com">简书</a>
href这个名字是hypertext reference 的缩写
任务:为你的页面添加一个链接
总结
晒一下学习成果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<h1>好多水果</h1>
<p>关于水果</p>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>梨子</li>
<li>菠萝</li>
</ul>
<a href="//www.greatytc.com">简书</a>
</body>
</html>
如下图
