菜鸟学习笔记: html基础

什么是html

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

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

1. my cat is very grumpy

>```html
2. 
my cat is very grumpy

html元素的剖析

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

html元素

元素的主要组成部分:

1. 开始标签: 有尖括号包裹住标签名,表示元素开始或开始生效
2. 结束标签: 也是用尖括号包裹住标签名,不过要在标签名前加上反斜杠"/",这表示元素结束的位置.
3. 内容: 这是重要元素,在这种情况下仅仅是元素的内容.
4. 元素: 开始标签+结束标签+内容=元素
   元素也可以具有属性,如图:

html属性.png

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

1. 它与元素名称之间的空格
2. 属性名称,后跟一个"="号
3. 属性值用双引号""包裹

嵌套元素

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

my cat is verygrumpy

我们要保证正确的嵌套: 在上例,我们先写`
`元素然后再写``元素.因此我们要结束``元素,然后再是`
`元素,下面是错误的写法:
>```html
my cat is very grumpy.

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

空元素

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

这包括两个属性,但没有闭合标签,也没有包裹内容.这是因为图像元素不会包裹元素对其产生影响,它的目的是在HTML页面中嵌入一个图像
####html文档的解剖
现在我们来看看将各个元素组成一个完整的html页面
>```html


  
    
    
  
  
    ![](images/test.jpg)
  

• : !doctype声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。指定了 HTML文档遵循的文档类型定义(DTD)。
• ; 包裹整个页面,有时称为根元素
• :头里的内容不显示给用户,其中包括文件引用(css,js),seo优化,字符集的声明...
• : 体包含了你想要呈现给用户的内容,包括文字 图片 流媒体,或任何其他内容
• : 设置字符集为utf-8
• : 设置你的页面标题,常用于浏览器书签

图片

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

- `src`: 图像路径
- `alt`: 替代文本 
####标记文字
本节将介绍一些关于标记文字的基本html元素
**标题**
标题元素允许你指定内容的某些部分是你的内容的标题或副标题.html包含6个标题级别,`
-
`,最多用到3-4.
>```html
这是一个标题
这是一个标题
这是一个标题
这是一个标题

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

段落
如上所述,

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

这是一个段落

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

**列表**
很多web上内容都是列表.要标记列表通常包括两个元素.最常用的列表类型是有序列表和无序列表
1. *无序列表*  中项目的顺序并不重要,就像购物列表,这些内容被包括在`
`元素里
2. *无序列表* 中项目的顺序很重要,就像一个食谱.这些内容被包括在一个`
`元素里
列表内的每个项目被包括在一个`
`元素里
所以,如果我们想要将下面的段落碎片改成一个列表
>```html
关于水果,我们有苹果 香蕉 梨子 菠萝...

我们可以这样做

关于水果,我们有

• 苹果


• 香蕉


• 梨子


• 菠萝



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

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

href这个名字是hypertext reference 的缩写
任务:为你的页面添加一个链接

总结

晒一下学习成果












水果



好多水果




关于水果





• 苹果


• 香蕉


• 梨子


• 菠萝







如下图

![学习成果.png](http://upload-images.jianshu.io/upload_images/1457165-025358780017aba2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)