【html】01--第一个html网页

作者: 创造new_world | 来源:发表于2017-12-04 12:22 被阅读0次

前修必备知识：

---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/>这样也行，统统来说，不太正规，不标准，有人对这个/有疑问，我们是不是还可以进行调解它的大小，是可以的。实际上是改变它的高度和宽度，后面可以进行改变

<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标签的效果】