学习前端工程师从小白到大师--第一章 HTML基础（开发工具--HBuilderX）

所学内容是从腾讯课堂来的，腾讯课堂-腾讯推出的专业职业培训在线教育平台（挺不错的一款学习app）

一、HTML基础结构

 

文档声明（告诉浏览器使用哪个HTML版本进行解析，注意：千万不要忘记哦）

html元素 顶级元素或根元素

html里面只能包含head元素或者body元素

head元素存放的是元数据，用来描述html文档本身的信息  比如title，表示名称是什么

body元素存放页面的内容 比如h1和p元素，显示在浏览器的页面区域

二、HTML元素

什么是元素，在html中，成对出现的结构，称之为元素   例如  

我是一段文本段落

但是看下这个元素，没有结束标签，是个单标签元素

切记，并不是所有元素都有成对的标签的

元素由 开始标签 + 内容 +结束标签 组成

实际开发中，元素并不是简简单单的出现，会伴随着html属性出现，以下如示：

 

属性总会出现在元素开始的标签，不可能出现在结束标签内

 

三、HTML嵌套

p元素在body里面，为p元素嵌套在bodyl里

四、编辑器

不要用word（有富文本，不能被浏览器识别）,不建议记事本（效率低）。我们想要一款，代码高亮，错误提示，格式化，自动完成 。  

推荐使用  Sublimit编辑器    下载地址：https://www.sublimetextcn.com/

五、创建图片

网页中随处可见各种图片，可以通过元素来创建。除了用元素创建外，还可以使用CSS的背景图的形式表现。

图片地址：http://coding.imweb.io/img/img-style.png

首先元素没有闭合标签，这点一定要记得。除此之外，元素还有几个重要属性如下:

 src：必备属性，表示图片地址

alt：必备属性，如果图片加载失败将会显示该内容

width：可选属性，用于设置图片的宽度，如width="100"

height：可选属性，跟width类似，用于设置图片的高度，如height=“100”

实际页面中，有些图片还是个链接，点击图片会跳转到其他页面，其实无非是把图片放在了元素里面当做了内容，如下代码: