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

前修必备知识:

---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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 193,968评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,682评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,254评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,074评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,964评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,055评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,484评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,170评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,433评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,512评论 2 308
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,296评论 1 325
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,184评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,545评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,150评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,437评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,630评论 2 335

推荐阅读更多精彩内容