Html 5菜鸟教程（建议新生学习）
目录
引述
html简介
HTML和HTML5
软件链接
软件的下载
启动软件
创建项目
第一章
1-1文档的基本结构
1-2单标签和双标签
1-3代码的注释
1-4元素，元素内容，元素属性
1-5代码书写规范
学习的技巧和方法
第二章
2-1 文档头部浅解
2-2 标题栏图标
2-3标题栏图标2
2-4 关键字和描述(seo优化 可以忽略不看)
2-5 页面跳转
2-6定义样式和引入样式
第三章
3-1超链接
编辑
3-2 超链接四种状态
3-3 绝对路径
3-4 相对路径1
3-4 相对路径2
3-6 ID属性
3-7 class属性
3-8 title和style
3-9 自定义属性
3-10 文件下载
3-11锚链接和空链接1
3-12锚链接和空链接2
第四章
4-1 图片的引入
4-2 图片的引入
引述
此教程是针对于即将入学的涉及到此专业 html 网页设计 的计算机专业新生。
html简介
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。
HTML和HTML5
HTML:
超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。
HTML
不是一种编程语言，而是一种标记语言(markup language)，是网页制作所必备的。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
HTML5
在从前HTML4. 01的基础上进行了一定的改进，新增了一些标签，又废弃了一些标签，是html最新版本。使用文本文档，新建第一个网页。
开发工具的下载和安装
软件链接
编译器我这里推荐 HBuilderX 我推荐的路由是这个软件使用相对来说比较简单，易操作，适合新手入门
软件的下载
进入了这个网址之后直接点击 Download for Windows 就会自动进入下载状态
下载好后，是一个.zip的压缩包，将这个压缩包解压到C盘以外的盘符
包含程序文件夹的名字 HBuilderX
启动软件
打开HBuilderX.exe
软件打开的界面
如果你不喜欢这个页面的颜色 在 主题切换 切换到自己喜欢的颜色
创建项目
文件——新建——项目
普通项目——基本HTML项目
项目文件存储的路径需要手动调整一下，选择自己指定的目录（文件夹）即可
项目名字自定义即可
创建好后看到了一个名字为 test的目录 这个就是我刚刚创建的一个
他里面包含了 三个字目录
css：这个目录是建议性放 .css文件的（后期会学习这个）
img：这个目录是建议性 存放 图片的目录
js：这个目录是 .js 脚本文件的 存放目录（后期会学习这个）
打开index.html
这是一个创建好的基本框架
按 alt+p 打开内置浏览器
打开内置浏览器后就会发现右侧有一个 名叫web 浏览器的
这个就是在编辑标签（写代码）的时候，右侧的这个内置浏览器会在我们每次保存（ctrl+s）的时候进行一次刷新，这样就能时刻的看到我们运行代码的一个状态
以上就是软件的基本安装，及其使用
第一章
1-1文档的基本结构
我是浏览器标题栏的标题
head 标签相当于人的头部
body相当于人的身体
title:是网页的标题
1-2单标签和双标签
标签：也称为标记
由一对尖括号包含单词构成:
标签的形态：
1、标签形态：
1.双标签（对标签）：
a:成双成对出现，可以包含内容；
b:有开始标签，有结束标签,结束标签在单词前有“/”;
2.单标签：
a:只有开始标签,没有结束标签
b:单标签在开始标签中结束,通常应该在单标签的大于号前加"/"表示结束。 -->
c：单标签的功能需要使用属性来实现 -->
YJlio
测试
如果把单标签的属性去掉，它就不能正常使用
去掉了属性显示的文字就会乱码
1-3代码的注释
YJlio
1-4元素，元素内容，元素属性
注释：
1：不用浏览器解析的内容，可以使用注释
2：对代码进行说明，方便修改查看
3：养成良好的注释习惯，
4：浏览器不会看到，是给人看的
5：注释书写：
注释中不能再有注释
多条注释的格式
YJlio
1-5代码书写规范
代码书写规范：
1.htm15非常宽松的代码规范
2.htm15标签，属性可以大写也可以小写，还可以混合大小写
3.在htm15中，你可以不用关闭标签。
要求：
1.所有代码全部使用小写
2,所有标签都要正常关闭
3,所有代码必须在英文半角状态输入(很重要)
4..必须要写在最前
YJlio
学习的技巧和方法
html学习技巧:为了学习方便,对标签进行分类
使用频率高的标签和属性,熟练掌握
使用频率低,或有固定功能的标签和属性,仅做了解
基本不用,或已废弃的标签和属性,不用学习
通过标签分类，将需要重点学习的标签，缩减到30个以内
html学习方法
零基础不用怕，只要认真听讲，练习，都学得会
英语不好不用怕, html只是一个个单词,没有语法
没有需要背诵的内容,很多代码都是自动生成练习才是王道
第二章
2-1 文档头部浅解
head:
1.文档头部中的内容看不见（浏览器的窗口看不到）
2.标题,图标,元信息,文档样式,定义脚本...
3.文档头部作用于整篇文档
title:
定义浏览器标题栏里显示的文档标题
YJlioxxx
2-2 标题栏图标
link:引入外部文件
rel：定义当前文档与被链接文档间的关系
type：定义被链接文档的mime类型
href：定义被链接文档的路径
标题栏图标设置：
1.网站根目录下放一个名称:favicon.ico图片文件。浏览器会自动显示在标中。
2.使用ico图标作为标题栏图标
YJlio
我用的方法是将jpg的文件转换成ico ICO图标在线转换工具 (nyaasu.top) ，然后用链入的方式，在本地文件夹下创建文件，引用进去这样就形成了一个标题栏图标
标题栏图标
2-3标题栏图标2
link:引入外部文件
rel：定义当前文档与被链接文档间的关系
type：定义被链接文档的mime类型
href：定义被链接文档的路径
YJlio
标题栏图标设置：16x16像素1.网站根目录下放一个名称:favicon.ico图片文件。浏览器会自动显示在标中。2.使用ico图标作为标题栏图标可以使用工具生成ico图标3.使用jpg格式的图片作为标题栏图标4.使用png格式的图片作为标题栏图标5.使用gif格式的图片作为标题栏图标
2-4 关键字和描述(seo优化 可以忽略不看)
关键字和描述：
1.关键字和描述不是给人看，是用于供搜索引擎使用
2.关键字和描述是网页优化很重要的部分
关键字设置：
meta标签的两个标签
name="Keywords"
content="要设置的关键字，可以使用多个关键字，建议不超过5个。多个关键字用英文状态下的逗号, 分割"
描述设置：
meta标签的两个标签
name="description"
content="要设置的描述内容，字数不要太多"
YJlio
2-5 页面跳转
页面跳转
页面跳转语法：页面自动刷新：;
2-6定义样式和引入样式
在学习html 大家只考虑 基本结构就够了 样式 会在 css中学到
定义样式和引用样式
第三章
3-1超链接
超链接
_blank:在新窗口中打开目标页面
3-2 超链接四种状态
超链接
这是一个链接
百度
3-3 绝对路径
绝对路径
这是一个链接绝对路径：河北省张家口市宣化区春光乡149号，这就是用绝对的方式来描述一个地址。带有域名的完整路径,比如:https://www.baidu.com主要用来链接外部资源
3-4 相对路径1
在同一目录下的文件能够被直接链接到 【href="文件路径"】
通俗的来讲 就是 如果你想做一个相对路径 你就需要保证它们在同一个文件夹下，共用一个主目录
比如这个主卧室 次卧室，他们的主目录就是 房间
目录的层级结构：
主体
fj1
fj2
c.html
b.html
fj3
o.html
相对路径
链接到c
3-4 相对路径2
还有一种情况就是当你在你自己的房间中，需要去其他房间找东西，这时候你就要先出你的房间，再到指定的房间中去找东西
正常情况下如果你在 fj3中的 o.html中 找到 fj1中 fj2下的 a 或者 c 文件直接用相对路径来访问的话是访问不到的
Document
链接到c
如果想在 fj3中的 o.html中 找到 fj1中 fj2下的 a 或者 c 文件 就需要这样来做
在路径前面加上 ../ 一个../ 表示向上级退出一层
Document
链接到c
如果是这种情况下 访问c文件的话
fj3中的 fj4的o.html中 找到 fj1中 fj2下的 a 或者 c 文件
就需要加 两个 ../ 根据需要，对 不同层级的 目录进行引用 可以使用 多个 ../来进行组合
Document
链接到c
3-6 ID属性
ID是唯一的 像身份证一样，不能有重复
特殊属性; 元素特有的属性
标准属性： 几乎所有元素都可以拥有的属性
ID属性：
1.元素的唯一标识（身份证）
2.同一个页面中不能有相同的id
3.同一页面中，不同元素有相同的id也不行 -->
ID属性
测试1测试2
测试3
测试4
分别对4个不同的id做了css的样式，css的使用后面会说到
3-7 class属性
标准属性：几乎所有标签都可以有的属性
class属性（类）：
1.相同的元素，不同的元素可以有相同的类名（）class值
2.同一个元素可以有多个类名，用空格隔开
3·主要用来选择一堆元素,定义样式
4.规定类名时，类名不能以数字开头
ID属性
测试1
测试2
测试3
测试4
ID属性
测试1
测试2
测试3
测试4
3-8 title和style
标准属性：几乎所有标签都可以有的属性-
style属性：
1.规定元素的行内样式
2.style设置的样式会覆盖其它方式设置的样式
3.可以设置多个属性值，用";(英文状态下的分号)"隔开
title和style属性
测试\
3-9 自定义属性
自定义属性：几乎所有标签都可以有的属性
1.用于存储页面或应用程序的私有自定义数据
2.data-*属性包括两部分:
a."*"表示自定义的属性名,在data-之后至少有一个字符
b.属性值可以是任何字符串
3.在微信小程序中用的比较多
自定义属性
1 1
3-10 文件下载
文件下载：
href属性:指定文档下载路径
download 属性:指定下载文件名称
不添加download属性时：
浏览器不能识别文件。可以直接下载。如果浏览器能识别文件，会直接显示
添加download属性时：不管浏览器是否可以识别文件，都可以下载
文件下载
文件下载
3-11锚链接和空链接1
当网页内容太长需要翻页的时候，则需要创建锚点链接
锚链接
第一章第二章第三章 第一章片段盖闻天地之数，有十二万九千六百岁为一元。将一元分为十二会，乃子、丑、寅、卯、辰、巳（sì）、午、未、申、酉、戌、亥之十二支也。每会该一万八百岁。且就一日而论：子时得阳气，而丑则鸡鸣；寅不通光，而卯则日出；辰时食后，而巳则挨排；日午天中，而未则西蹉；申时晡而日落酉；戌黄昏而人定亥。譬于大数，若到戌会之终，则天地黑暗，而两间人物俱无矣，故曰混沌。又五千四百岁，：“冬至子之半，天心无改移。一阳初动处，万物未生时。”到此，天始有根。再五千四百岁，正当子会，轻清上腾，有日，有月，有星，有辰。日、月、星、辰，谓之四象。故曰，天开于子。又经五千四百岁，子会将终，近丑之会，而逐渐坚实。易曰：“大哉乾元！至哉坤元！万物资生，乃顺承天。”至此，地始凝结。再五千四百岁，正当丑会，重浊下凝，有水，有火，有山，有石，有土。水、火、山、石、土谓之五形。故曰，地辟于丑。又经五千四百岁，丑会终而寅会之初，发生万物。历曰：“天气下降，地气上升；天地交合，群物皆生。”至此，天清地爽，阴阳交合。再五千四百岁，正当寅会，生人，生兽，生禽，正谓天地人，三才定位。故曰，人生于寅。
第二章【判断盖闻天地之数，有十二万九千六百岁为一元。将一元分为十二会，乃子、丑、寅、卯、辰、巳（sì）、午、未、申、酉、戌、亥之十二支也。每会该一万八百岁。且就一日而论：子时得阳气，而丑则鸡鸣；寅不通光，而卯则日出；辰时食后，而巳则挨排；日午天中，而未则西蹉；申时晡而日落酉；戌黄昏而人定亥。譬于大数，若到戌会之终，则天地黑暗，而两间人物俱无矣，故曰混沌。又五千四百岁，：“冬至子之半，天心无改移。一阳初动处，万物未生时。”到此，天始有根。再五千四百岁，正当子会，轻清上腾，有日，有月，有星，有辰。日、月、星、辰，谓之四象。故曰，天开于子。又经五千四百岁，子会将终，近丑之会，而逐渐坚实。易曰：“大哉乾元！至哉坤元！万物资生，乃顺承天。”至此，地始凝结。再五千四百岁，正当丑会，重浊下凝，有水，有火，有山，有石，有土。水、火、山、石、土谓之五形。故曰，地辟于丑。又经五千四百岁，丑会终而寅会之初，发生万物。历曰：“天气下降，地气上升；天地交合，群物皆生。”至此，天清地爽，阴阳交合。再五千四百岁，正当寅会，生人，生兽，生禽，正谓天地人，三才定位。故曰，人生于寅。
第三章盖闻天地之数，有十二万九千六百岁为一元。将一元分为十二会，乃子、丑、寅、卯、辰、巳（sì）、午、未、申、酉、戌、亥之十二支也。每会该一万八百岁。且就一日而论：子时得阳气，而丑则鸡鸣；寅不通光，而卯则日出；辰时食后，而巳则挨排；日午天中，而未则西蹉；申时晡而日落酉；戌黄昏而人定亥。譬于大数，若到戌会之终，则天地黑暗，而两间人物俱无矣，故曰混沌。又五千四百岁，：“冬至子之半，天心无改移。一阳初动处，万物未生时。”到此，天始有根。再五千四百岁，正当子会，轻清上腾，有日，有月，有星，有辰。日、月、星、辰，谓之四象。故曰，天开于子。又经五千四百岁，子会将终，近丑之会，而逐渐坚实。易曰：“大哉乾元！至哉坤元！万物资生，乃顺承天。”至此，地始凝结。再五千四百岁，正当丑会，重浊下凝，有水，有火，有山，有石，有土。水、火、山、石、土谓之五形。故曰，地辟于丑。又经五千四百岁，丑会终而寅会之初，发生万物。历曰：“天气下降，地气上升；天地交合，群物皆生。”至此，天清地爽，阴阳交合。再五千四百岁，正当寅会，生人，生兽，生禽，正谓天地人，三才定位。故曰，人生于寅。
3-12锚链接和空链接2
跳转到其他页面具体位的锚链接
1.目标页面具体位置要设置锚点
2.用a标签中的href属性指定目标页面的路径，指定位置的ID
此页面3-12
第一章 第二章 第三章
返回到顶部 /*空链接返回页面的顶部*/
第四章
4-1 图片的引入
网页中引入图片：使用img标签， -->
src属性：
1·用来指定图片文件所在的路径,必须要有
2.图片路径可以是相对路径，也可以是绝对路径 -->
Document
4-2 图片的引入
alt属性：
1图片无法正常显示时替换文本，可以使用中文，也可以使用英文
2 路径不对，网速过慢，浏览器版本过低，图片格式不对…
width属性和height属性：
1.width属性:设置图片宽度, height属性:设置图片高度
2·不设置,图片会按原始尺寸显示
3.如果只设置1个属性,另一个会根据已设置的属性等比例缩放
4·默认单位为像素，也可以使用百分比
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！