前修必备知识：
---1、在HTML里面，其实大小写的作用是一样的，一般使用的是小写 （理解为潜规则，一个标准吧）
---2、meta，一般而言申明页面的属性，开头是声明用HTML5的协议，必须写，标题头这里面有个问题，如果没写可能是HTML4.01标准的，位置是放在有效代码第一行（字节头一般是不加/的，因为不会成对出现，建议加上，标签也是一样，比如下面的<br>、<br/>效果一样，H5的标准，实际上也是<br></br>的缩写）
height
---3、在一个网页里面，我们是通过一个个的标签来体现功能的，而这些标签也是成对出现的，除了声明意外，成对是为了往里面放入东西，裹入其中
----4、标签后面逐个添加属性，只需给个空格，不用逗号
----5、在这里，我们可以得到一个感受，因为我们要用路径，不要使用中文，特殊符号，用标准的
----6、开发使用当前路径，像百度用的是绝对路径，为什么呢？因为百度它们项目过于庞大，它们会拿出专门的服务器放图片，另一个服务器放图片...而我们要注意，使用相对路径
----7、快捷键，先保存一下文件，打个感叹号，再打个tab，一个简单的主体就会出来
----8、HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)
<html lang="en">---对于这个老师没有重点讲，就不要深究了，这个网页是可以用英文进行开发的
lang="zh"设置网页默认语言为中文（包括简体，繁体）;
lang="zh-cn"则是设置为简体中文
注意：lang属性中的语言代码不区分大小写,用于声明当前页面的语言类型。
对于标签，我们可以分为两类：
【要是把行标签放入块标签的话，不管怎么设置大小都是不管用的】
块标签：默认是占满一行
行内标签：是由内容所决定的，可以多个行内标签放一块
进行网页的简单制作思路：
第一部分，网页开发环境和运行环境：开发环境是任何可编辑工具，运行环境浏览器就行
浏览器+网页开发工具（记事本/超级记事本/IDE工具(又称集成开发环境（integrated development environment））-----包括（Dreamweaver/Hbuilder/WebStrom/pycharm等等））
第二部分，第一个完整的网页结构
第三部分，网页开发的基本结构【网页文档声明、网页页面属性定义（标题、编码）、网页内容部分】
实际操作步骤1：简单的网页搭建
1、必须明白点：
从这里我们可以看见，我们已经简单了展示了第一个网页的制作完成，注意的是，声明，编码解码格式，缩进问题，成对出现的标签（里面要裹东西）
2、格式：
一般写网页，大致分为两个部分，一个头和身体，它们是平级的，格式要保持一致
3、代码全面布局：
HTML的结构：
声明部分：主要作用是用来告诉浏览器这个页面使用的是哪个标准。是HTML5标准。
head部分：将页面的一些额外信息告诉服务器。不会显示在页面上。
body部分：我们所写的代码必须放在此标签內。
目前，IE浏览器是完全不支持H5的，支持最好的是Opera浏览器，可以支持95%以上；其次是google，可以支持一部分H5。
备注：
所有的浏览器默认情况下都会忽略空格和空行
每个标签都有私有属性。也都有公有属性。
html中表示长度的单位都是像素。HTML只有一种单位就是像素。
对于标签头来说：
我们一般要写入声明--编码格式啊，标题头--让人大致要看懂我进入哪了，主要是起一个说明作用
而身体：
也就是正文部分，也就是我们能看见的网页部分，也就是我们进行布局展示给用户看的界面，在后面我们会利用标签和属性了让网页变得更加丰富
4、页面渲染：
其实，在head里面还有style标签，起到一个渲染效果，后面逐步会碰到
实际操作步骤2：增加网页的属性、内容，即正式进入正文部分
简单进行梳理一下：
页面注释：
如果我们想在sublimbe里面添加注释的话，要使用标准的格式，<!-- -->里面可以添加
<p></p> 表示段落，在英文中，段落之间的换行，是隔一行表示一个段落，两端文字之间有明显的空白行【对于我们的传统进行缩进两个字节，在后面再补充】
<hr /> 表示分隔符，对于这个标签，<hr>这样写也行，<hr/>这样也行，统统来说，不太正规，不标准，有人对这个/有疑问，我们是不是还可以进行调解它的大小，是可以的。实际上是改变它的高度和宽度，后面可以进行改变
<br /> 表示换行，类推<hr />
<h1>~<h6> 表示标题的级别，依次是减小的，如果说超过了，比如<h7>就会跟普通的段落文字一样的大小
<b></b> 表示加粗字体，严重性；这里面<strong></strong>也是可以的，突出，目前只是不用
<div></div> 代表的是一个块标签,如果说里面什么不写的话，网页是不可见的，肉眼看不见，它只会占用一个像素（不懂像素后面再说），如果写的有内容，不管写多少，都会默认占满一行，类比于我们生活所用的塑料袋，有东西就会涨起来。没有东西憋的
【在后面图片轮换的时候，当时我对老师那个问题很不理解，后来发现，老师定个div，这个div肯定是比图片大的，一般在公司的话，我们设计，由美工专门做出那样大小的图片给我们，我们自己在做的时候，图片并不会适合你的div大小。同时放多张，div会被撑大，一直往下排，这点上应该不应该不理解，div并不是一个固定的框架，如果说大了会撑出来】
------主要作用是添加一个结构框架，助于排版
<span></span> 用来修饰文字的（span不会换行也是情理之中），比如文字的大小，背景颜色，字体颜色
------span标签，行内标签。当对它应用样式时，它才会产生视觉上的变化。
主要作用就是对行内的元素进行分组或标识. 我的感觉是，就是和p标签进行搭配
div与span标签区别：
-----能用div就不用span
<i></i> 表示斜体
<u></u>表示下划线
<del></del>表示中划线
HTML标签是分等级的，HTML将所有的标签分为两种：
文本级标签：p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。
容器级标签：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。
从学习p的第一天开始，就要死死记住：p标签是一个文本级标签，p里面只能放文字、图片、表单元素。其他的一律不能放。【经实验，当你在p标签里面放入其他标签的时候，比如h标签，网页会给你想要的效果，但是浏览器自动在你的代码上屏蔽了p标签对h标签的效果】
--效果显示
----------------------------------------------------渲染界面------------------------------------------------------
1、图片
img标签属性：
alt属性：图片因误删或者输错代码或者网络上的，而网络服务器关闭找不到的情况下，根据不同的浏览器会出现不同的bug样子，而alt属性就是出现这种问题的时候，给用户的提示
title属性：比如你把鼠标放在图片的上面，会出现给你提示的信息
---你不要同时运行绝对路径跟相对路径，还有就是后面的那个/要不要是无所谓，标准就是打一个空格带上
设置图片宽高： ----注意的是，没有length这个属性
width="300" height="500"
2、视频
controls如果不写无法播放，因为不可控制
autoplay 一打开自动播放
注意的是，键和值一样的时候，值可以不写
2.1、
2.2、能够播放
2.3、打开网页自动播放
3、音频 audio
----音频跟视频差不多
controls 可以把音乐栏给展示出来
3.1、会隐藏
controls不写
3.2、可以手动播放
3.3、自动播放
---应该加个congtrols，不然没法显示音乐栏
----单曲循环加个属性loop
网友评论