02_书写第一个html网页

Posted 2020-10-16

前修知识：

在html里面，其实大小写的作用是一样的，一般使用的是小写（理解为潜规则，一个标准吧）

【开头是声明用HTML5的协议，必须写，标题头这里面有个问题，如果没写可能是HTML4.01标准的】

---在一个网页里面，我们是通过一个个的标签来体现功能的，而这些标签也是成对出现的，除了声明意外，成对是为了往里面放入东西，裹入其中

----标签后面逐个添加属性，只需给个空格，不用逗号

----在这里，我们可以得到一个感受，因为我们要用路径，不要使用中文，特殊符号，用标准的

----开发使用当前路径，像百度用的是绝对路径，为什么呢？因为百度它们项目过于庞大，它们会拿出专门的服务器放图片，另一个服务器放图片...而我们要注意，使用相对路径

----快捷键，先保存一下文件，打个感叹号，再打个tab，一个简单的主体就会出来

对于标签，我们可以分为两类：

块标签：默认是占满一行

行内标签：是由内容所决定的，可以多个行内标签放一块

【进行网页的制作】

那么进行第一个网页的制作思路：

第一部分，网页开发环境运行环境的准备工作：浏览器+网页开发工具（记事本/超级记事本/IDE工具(集成开发环境（integrated development environment）（Dreamweaver/Hbuilder/WebStrom等等））

第二部分，第一个完整的网页结构

第三部分，网页开发的基本结构【网页文档声明、网页页面属性定义（标题、编码）、网页内容部分】

 

1、简单的网页搭建：

-----从这里我们可以看见，我们已经简单了展示了第一个网页的制作完成，注意的是，声明，编码解码格式，缩进问题，成对出现的标签（里面要裹东西）

----格式：一般写网页，大致分为两个部分，一个头和身体，它们是平级的，格式要保持一致

对于头来说，我们一般要写入声明--编码格式啊，标题头--让人大致要看懂我进入哪了，主要是起一个说明作用

而身体，也就是正文部分，也就是我们能看见的网页部分，我们要利用标签和属性了让网页变得更加丰富

2、增加网页的属性、内容，即正式进入正文部分

简单进行梳理一下：

页面注释：

如果我们想在sublimbe里面添加注释的话，要使用标准的格式，<!--   -->里面可以添加

<p></p>  表示段落，在英文中，段落之间的换行，是隔一行表示一个段落，两端文字之间有明显的空白行【对于我们的传统进行缩进两个字节，在后面再补充】

<hr /> 表示分隔符，对于这个标签，<hr>这样写也行，<hr/>这样也行，统统来说，不太正规，不标准，有人对这个/有疑问，我们是不是还可以进行调解它的大小，是可以的。实际上是改变它的高度和宽度，后面可以进行改变

<br /> 表示换行，类推<hr />

<h1>~<h6> 表示标题的级别，依次是减小的，如果说超过了，比如<h7>就会跟普通的段落文字一样的大小

<b></b>  表示加粗字体，严重性；这里面<strong></strong>也是可以的，突出，目前只是不用

<div></div> 代表的是一个块标签,如果说里面什么不写的话，网页是不可见的，肉眼看不见，它只会占用一个像素（不懂像素后面再说），如果写的有内容，不管写多少，都会默认占满一行，类比于我们生活所用的塑料袋，有东西就会涨起来。没有东西憋的

<span></span> 用来修饰文字的（span不会换行也是情理之中），比如文字的大小，背景颜色，字体颜色，我们初级先了解到这

<i></i> 表示斜体

<u></u>表示下划线

<del></del>表示删除忽略

--效果显示

3、超链接

一般来说，我们做网页都会把材料什么的放在同一个文件夹的下面，这样省的进行用决对路径

这里面，http和https区别在于后者使用暗码的，比较安全一点，前者明码

a表示超链接，有俩属性：

href：跳转

target:本网页完全跳转

 

4、图片

img标签中的

alt属性：图片因误删或者输错代码或者网络上的，而网络服务器关闭找不到的情况下，根据不同的浏览器会出现不同的bug样子，而alt属性就是出现这种问题的时候，给用户的提示

title属性：比如你把鼠标放在图片的上面，会出现给你提示的信息

---你不要同时运行绝对路径跟相对路径，还有就是后面的那个/要不要是无所谓，标准就是打一个空格带上

 

5、视频

controls如果不写无法播放，因为不可控制

autoplay 一打开自动播放

注意的是，键和值一样的时候，值可以不写

 

 

 

6、音频

controls 可以把音乐栏给展示出来