码迷,mamicode.com
首页 > Web开发 > 详细

02_书写第一个html网页

时间:2017-12-04 23:27:52      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:html网页   eve   根据   html4   音乐   绝对路径   像素   idt   top   

前修知识:

在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 可以把音乐栏给展示出来

02_书写第一个html网页

标签:html网页   eve   根据   html4   音乐   绝对路径   像素   idt   top   

原文地址:http://www.cnblogs.com/123fantao/p/7979254.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!