一、网页开发基础知识
网页文件:是使用一种html的标记语言书写的文本文件,它可以在浏览器中按照设计者设计的样式显示
网页主要由三部分组成;结构,表现和行为
结构;网页的结构和内容【一个网页包括各级标题,正文段落和各种列表等】----》html
表现:设定网页的表现样式【每种组成部分的字号,颜色,位置等】----》css
行为:控制网页的行为【鼠标点击,键盘点击等,完成和用户的交互】----》javascript
总之:结构决定了网页是什么,表现决定了网页是什么样子,行为决定了网页能做什么
注意:最开始html可以同时承担结构和表现的双重任务
一个网站从无到有的过程:客户策划和定义—》产品经理出需求【需求文档】----》UI设计【设计文档加设计图】—>开发—》测试
二、html简介
1.概述
全称:HyperText Markup Language,超文本标记语言,是最基础的网页语言,是解释性语言
超文本:超出文本的范畴
标记:html中所有的操作都是通过标记完成的,比如:<>
2.第一个html程序
html文件的格式:.html或者.htm
代码演示:
<html> <head> <title>这是一个标题</title> </head> <body> 这是<br />第一个html<font size="5" color="red">程序</font> </body> </html>
3.html的规范
a.一个html文件包含开始标签和结束标签:
b.html标签中包含两部分内容:
1>:用来设置当前html页面的属性和配置信息
:设置当前html文件的标题 2>:显示在网页中内容
c.html中有一部分特殊标签:在标签内开始,在标签内结束
例如:
换行 <hr / >水平线
d.html中标签不区分大小写,一般使用小写
代码演示:
<!--声明当前文件的类型--> <!DOCTYPE html> <html> <!--设置html页面的属性和配置信息--> <head> <!--设置当前html页面的编码格式为utf-8,避免在浏览器中演示的时候出现乱码--> <meta charset="utf-8" /> <!--设置当前html文件的标题--> <title>第一天</title> </head> <!--html的正文部分--> <body> <!--在html页面中设置哪些内容,统统都书写在body中--> </body> </html> <!-- 注释和取消注释: ctrl + / html标签之间的关系: 父子关系: 直接的包含【嵌套】关系:html和head 兄弟关系: 同级的标签关系:head和body 先辈后辈关系: 出现了隔代的情况 html和title -->
4.html的思想
网页中有很多的不同数据,不同的数据需要不同的显示效果,就需要使用标签将不同的数据封装起来,通过改变标签的属性值实现标签内数据样式的变化
一个标签相当于一个容器,想要修改容器中数据的样式,只需要改变容器的属性,就可以实现容器中数据的修改
三、html常用的标签
1.注释标签、文字标签和段落标签
1.1注释标签
注释标签:
添加注释和取消注释:ctrl + /
1.2文字标签
标签:
属性:
size:文字的大小,取值范围为1~7,数值超过之后仍然显示的是7对应的大小
color:文字的颜色
方式一:颜色的英文单词
方式二:使用十六进制表示,格式:#xxxxxx
例如:#123456,每两位代表一种颜色,分别为红色,绿色,蓝色【RGB】
注意:#ffffff #000000
方式三:rgb(r,g,b) 【r,g,b的取值范围为0~255】
rgba(r,g,b,a),a代表透明度,a的取值范围为0~1
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 作者:yangyang15510502328@sina.com 时间:2018-12-03 描述: --> <font size="7" color="#1234ab">这是一段文本</font> <font>这是一段文本</font><br /> <!--和字体有有关的其他标签--> <!--加粗标签--> <b>这是一段文本</b><br /> <strong>这是一段文本</strong><br /> <!--删除标签--> <s>这是一段文本</s><br /> <del>这是一段文本</del><br /> <!--斜体标签--> <!--只是一种字体:意大利体--> <i>这是一段文本</i><br /> <!--真正的斜体--> <em>这是一段文本</em><br /> <!--上标和下标--> <!-- 2^5 log2 --> 2<sup>5</sup><br /> log<sub>2</sub> </body> </html>
1.3段落标签
标签
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> <font color="green" size="6">贾乃亮</font>与李小璐是在某个饭局上认识, 随后他就对女方一见钟情,锲而不舍展开疯狂追求。 李小璐曾在某访谈节目中透露,当时贾乃亮为了追求自己,还特别去打了一串与自己一样的耳洞,而且感染化脓, 就只是为了引起她的注意,还有一次是李小璐发烧生病,贾乃亮衣不解带的守在身边照顾了5天5夜, 连头都来不及洗,就是一直陪在自己身边。但是这也没让李小璐接受对方的追求,直到快1年了 ,有一次她看到贾乃亮喝醉,在自己面前委屈痛哭,才惊觉对方是对自己是认真的,才点头同意交往 </p> <p> 据台湾媒体报道, 演员贾乃亮近日深陷婚变风波,老婆李小璐被拍到与饶舌歌手勾手、共度一夜的画面 ,他6日发出长文回应此事,内容却被网友解读为是在默认“被戴绿帽”,事情越演越烈, 两人过去在录节目的互动,以及放闪画面也一一被翻出 ,网友发现其实贾乃亮真的非常爱李小璐,向对方求了3次婚,而且还会为对方下厨等。 </p> <!--每个html标签都有一个id属性,style属性--> <p id="p1" style="background-color: blue;height: 100px;">第一段落</p> <p id="p2">第二段落</p> <p id="p3">第三段落</p> <p id="p4">第四段落</p> </body> </html>
2.标题标签、换行标签和水平线标签
2.1标题标签
标签:
注意:n的取值范围:1~6
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--标题标签--> <!-- 取值范围:1~6 数值越大,字号越小 区别于普通文本,做了加粗的操作 标题标签会自动的换行 --> <h1> <font color="purple">问君能有几多愁</font> </h1> <h2>问君能有几多愁</h2> <h3>问君能有几多愁</h3> <h4>问君能有几多愁</h4> <h5>问君能有几多愁</h5> <h6>问君能有几多愁</h6> </body> </html>
2.2换行标签和水平线标签
代码演示:
<!--水平线标签 一般情况下,但凡需要使用水平线标签,使用的都是默认设置 类似br 类似font --> <hr size="5" color="red"/> <!--换行标签 注意:br标签的位置比较灵活 --> <br />
3.字符实体
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--空格--> <p>问君 能有几多愁</p><br /> <!--乘号和除号--> <!-- 2 x 3 = 6 6 / 2 = 3 --> 3×2 = 6<br /> 6÷2 = 3<br /> <!--大于号和小于号--> <!--<html>是一个标签--> <html>是一个标签 <!--引号--> "古诗词" <!--版权--> ©版权:清华大学出版社 </body> </html>
4.图像标签
4.1使用
标签:
属性:
src:图片的路径
网络资源:直接赋值网址
本地资源:资源最好在当前工程下,最好使用相对路径
width:
图片的宽度
height:
图片的高度
注意:如果不手动设置,则加载的是图片的原尺寸
表示方式:
方式一:具体的数值,单位使用px【像素】
方式二:百分比【自适配】
alt:图片上的文字提示【图片的替换文本,如果图片资源加载失败,则显示该文字】
title:鼠标悬浮标题,注意和alt的区别
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--1.直接设置图片--> <!--<img src="img/背景1.jpg" />--> <!--2.设置图片的大小--> <!--<img src="img/背景1.jpg" width="100px" height="100px"/>--> <!--3.加载网络图片--> <!--<img src="https://www.baidu.com/img/bd_logo1.png" />--> <!--4.alt--> <!--<img src="img/背景2.jpg" width="100px" height="100px" alt="图片资源未加载成功"/>--> <!--5.title--> <img src="img/背景1.jpg" width="100px" height="100px" title="标题"/> </body> </html>
4.2路径问题
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--1.html文件和图片是平级的--> <img src="背景1.jpg" width="100px" height="100px"/> <!--2.html文件和图片的上级目录是平级的--> <!--一般情况下,实际项目开发中,将图片资源放置在img目录下--> <img src="img/背景1.jpg" width="100px" height="100px"/> <img src="img/subImg/背景1.jpg" width="100px" height="100px"/> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--3.html的上级目录和图片平级 --> <!-- 需要通过..找到工程的目录下 ..:退回到上一级目录 ../..:退回了两级目录 --> <img src="../背景1.jpg" /> <img src="../img/背景1.jpg" /> <img src="../img/subImg/背景1.jpg" /> </body> </html>
5.音视频标签
5.1音频
autoplay :自动播放
controls:控制条
loop:循环播放
5.2视频
autoplay :自动播放
controls:控制条
loop:循环播放
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--音频--> <!--<audio src="img/JAEFOREAL,蜡笔大Boom - 追梦的蚂蚁.mp3" autoplay controls loop></audio>--> <!--视频--> <video src="img/MovieTest.mp4" autoplay controls loop></video> <!--注意:src跟路径有关,相对路径,和图片的路径相同--> </body> </html>
6.超链接标签
标签:
属性:
href:表示需要链接到的目标文件的路径【类似于src属性】
网络地址
本地资源:相对路径,一般指的是本地的html页面
target:设置打开的方式,默认在当前窗口中打开
_blank:在一个新的窗口中打开
_self:在当前窗口中打开
注意:默认字体颜色为蓝色,自带有一个下划线
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--第一部分:基础用法--> <!--1.本地html文件--> <!--<a href="3.标题标签.html">跳转</a>--> <!--2.区分_blank和_self _blank:重新打开一个新的页面 _self:在当前页面中加载,回退按钮可以操作使得回到上一级页面 --> <a href="3.标题标签.html" target="_blank">跳转1</a> <a href="3.标题标签.html" target="_self">跳转2</a> <!--特点:超链接标签不会自动换行--> <br /> <!--3.加载网络地址--> <a href="http://www.baidu.com">跳转3</a> <br /> <!--4.使得一张图片有超链接的效果--> <a href="http://www.baidu.com"> <img src="背景1.jpg" width="30px" height="30px" /> </a> <!--5.不链接到任何地方--> <!--#:占位符--> <a href="#">点我点我</a> <br /> <a href="javascript:void(0)">点我点我~~~~~</a> <br /> <a href="javascript:void(0)" onclick="alert('啦啦啦啦啦啦')">点我点我~~~~~</a> </body> </html>
定位资源
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--第二部分:定位资源--> <!--1.在当前页面中定位资源:回到顶部--> <p> 贾乃亮与李小璐是在某个饭局上认识,随后他就对女方一见钟情,锲而不舍展开疯狂追求。李小璐曾在某访谈节目中透露,当时贾乃亮为了追求自己,还特别去打了一串与自己一样的耳洞,而且感染化脓,就只是为了引起她的注意,还有一次是李小璐发烧生病,贾乃亮衣不解带的守在身边照顾了5天5夜,连头都来不及洗,就是一直陪在自己身边。但是这也没让李小璐接受对方的追求,直到快1年了,有一次她看到贾乃亮喝醉,在自己面前委屈痛哭,才惊觉对方是对自己是认真的,才点头同意交往 据台湾媒体报道,演员贾乃亮近日深陷婚变风波,老婆李小璐被拍到与饶舌歌手勾手、共度一夜的画面,他6日发出长文回应此事,内容却被网友解读为是在默认“被戴绿帽”,事情越演越烈,两人过去在录节目的互动,以及放闪画面也一一被翻出,网友发现其实贾乃亮真的非常爱李小璐,向对方求了3次婚,而且还会为对方下厨等。 贾乃亮与李小璐是在某个饭局上认识,随后他就对女方一见钟情,锲而不舍展开疯狂追求。李小璐曾在某访谈节目中透露,当时贾乃亮为了追求自己,还特别去打了一串与自己一样的耳洞,而且感染化脓,就只是为了引起她的注意,还有一次是李小璐发烧生病,贾乃亮衣不解带的守在身边照顾了5天5夜,连头都来不及洗,就是一直陪在自己身边。但是这也没让李小璐接受对方的追求,直到快1年了,有一次她看到贾乃亮喝醉,在自己面前委屈痛哭,才惊觉对方是对自己是认真的,才点头同意交往。 贾乃亮与李小璐是在某个饭局上认识,随后他就对女方一见钟情,锲而不舍展开疯狂追求。李小璐曾在某访谈节目中透露,当时贾乃亮为了追求自己,还特别去打了一串与自己一样的耳洞,而且感染化脓,就只是为了引起她的注意,还有一次是李小璐发烧生病,贾乃亮衣不解带的守在身边照顾了5天5夜,连头都来不及洗,就是一直陪在自己身边。但是这也没让李小璐接受对方的追求,直到快1年了,有一次她看到贾乃亮喝醉,在自己面前委屈痛哭,才惊觉对方是对自己是认真的,才点头同意交往 据台湾媒体报道,演员贾乃亮近日深陷婚变风波,老婆李小璐被拍到与饶舌歌手勾手、共度一夜的画面,他6日发出长文回应此事,内容却被网友解读为是在默认“被戴绿帽”,事情越演越烈,两人过去在录节目的互动,以及放闪画面也一一被翻出,网友发现其实贾乃亮真的非常爱李小璐,向对方求了3次婚,而且还会为对方下厨等。 贾乃亮与李小璐是在某个饭局上认识,随后他就对女方一见钟情,锲而不舍展开疯狂追求。李小璐曾在某访谈节目中透露,当时贾乃亮为了追求自己,还特别去打了一串与自己一样的耳洞,而且感染化脓,就只是为了引起她的注意,还有一次是李小璐发烧生病,贾乃亮衣不解带的守在身边照顾了5天5夜,连头都来不及洗,就是一直陪在自己身边。但是这也没让李小璐接受对方的追求,直到快1年了,有一次她看到贾乃亮喝醉,在自己面前委屈痛哭,才惊觉对方是对自己是认真的,才点头同意交往。 贾乃亮与李小璐是在某个饭局上认识,随后他就对女方一见钟情,锲而不舍展开疯狂追求。李小璐曾在某访谈节目中透露,当时贾乃亮为了追求自己,还特别去打了一串与自己一样的耳洞,而且感染化脓,就只是为了引起她的注意,还有一次是李小璐发烧生病,贾乃亮衣不解带的守在身边照顾了5天5夜,连头都来不及洗,就是一直陪在自己身边。但是这也没让李小璐接受对方的追求,直到快1年了,有一次她看到贾乃亮喝醉,在自己面前委屈痛哭,才惊觉对方是对自己是认真的,才点头同意交往 据台湾媒体报道,演员贾乃亮近日深陷婚变风波,老婆李小璐被拍到与饶舌歌手勾手、共度一夜的画面,他6日发出长文回应此事,内容却被网友解读为是在默认“被戴绿帽”,事情越演越烈,两人过去在录节目的互动,以及放闪画面也一一被翻出,网友发现其实贾乃亮真的非常爱李小璐,向对方求了3次婚,而且还会为对方下厨等。 贾乃亮与李小璐是在某个饭局上认识,随后他就对女方一见钟情,锲而不舍展开疯狂追求。李小璐曾在某访谈节目中透露,当时贾乃亮为了追求自己,还特别去打了一串与自己一样的耳洞,而且感染化脓,就只是为了引起她的注意,还有一次是李小璐发烧生病,贾乃亮衣不解带的守在身边照顾了5天5夜,连头都来不及洗,就是一直陪在自己身边。但是这也没让李小璐接受对方的追求,直到快1年了,有一次她看到贾乃亮喝醉,在自己面前委屈痛哭,才惊觉对方是对自己是认真的,才点头同意交往。 贾乃亮与李小璐是在某个饭局上认识,随后他就对女方一见钟情,锲而不舍展开疯狂追求。李小璐曾在某访谈节目中透露,当时贾乃亮为了追求自己,还特别去打了一串与自己一样的耳洞,而且感染化脓,就只是为了引起她的注意,还有一次是李小璐发烧生病,贾乃亮衣不解带的守在身边照顾了5天5夜,连头都来不及洗,就是一直陪在自己身边。但是这也没让李小璐接受对方的追求,直到快1年了,有一次她看到贾乃亮喝醉,在自己面前委屈痛哭,才惊觉对方是对自己是认真的,才点头同意交往 据台湾媒体报道,演员贾乃亮近日深陷婚变风波,老婆李小璐被拍到与饶舌歌手勾手、共度一夜的画面,他6日发出长文回应此事,内容却被网友解读为是在默认“被戴绿帽”,事情越演越烈,两人过去在录节目的互动,以及放闪画面也一一被翻出,网友发现其实贾乃亮真的非常爱李小璐,向对方求了3次婚,而且还会为对方下厨等。 贾乃亮与李小璐是在某个饭局上认识,随后他就对女方一见钟情,锲而不舍展开疯狂追求。李小璐曾在某访谈节目中透露,当时贾乃亮为了追求自己,还特别去打了一串与自己一样的耳洞,而且感染化脓,就只是为了引起她的注意,还有一次是李小璐发烧生病,贾乃亮衣不解带的守在身边照顾了5天5夜,连头都来不及洗,就是一直陪在自己身边。但是这也没让李小璐接受对方的追求,直到快1年了,有一次她看到贾乃亮喝醉,在自己面前委屈痛哭,才惊觉对方是对自己是认真的,才点头同意交往。 贾乃亮与李小璐是在某个饭局上认识,随后他就对女方一见钟情,锲而不舍展开疯狂追求。李小璐曾在某访谈节目中透露,当时贾乃亮为了追求自己,还特别去打了一串与自己一样的耳洞,而且感染化脓,就只是为了引起她的注意,还有一次是李小璐发烧生病,贾乃亮衣不解带的守在身边照顾了5天5夜,连头都来不及洗,就是一直陪在自己身边。但是这也没让李小璐接受对方的追求,直到快1年了,有一次她看到贾乃亮喝醉,在自己面前委屈痛哭,才惊觉对方是对自己是认真的,才点头同意交往 据台湾媒体报道,演员贾乃亮近日深陷婚变风波,老婆李小璐被拍到与饶舌歌手勾手、共度一夜的画面,他6日发出长文回应此事,内容却被网友解读为是在默认“被戴绿帽”,事情越演越烈,两人过去在录节目的互动,以及放闪画面也一一被翻出,网友发现其实贾乃亮真的非常爱李小璐,向对方求了3次婚,而且还会为对方下厨等。 贾乃亮与李小璐是在某个饭局上认识,随后他就对女方一见钟情,锲而不舍展开疯狂追求。李小璐曾在某访谈节目中透露,当时贾乃亮为了追求自己,还特别去打了一串与自己一样的耳洞,而且感染化脓,就只是为了引起她的注意,还有一次是李小璐发烧生病,贾乃亮衣不解带的守在身边照顾了5天5夜,连头都来不及洗,就是一直陪在自己身边。但是这也没让李小璐接受对方的追求,直到快1年了,有一次她看到贾乃亮喝醉,在自己面前委屈痛哭,才惊觉对方是对自己是认真的,才点头同意交往。 </p> <!--回到顶部--> <a href="#top">回到顶部</a> <!--2.在不同的文件之间实现定位资源--> <a href="定位资源.html#p1">第一段落</a> <a href="定位资源.html#p2">第二段落</a> <a href="定位资源.html#p3">第三段落</a> <a href="定位资源.html#p4">第四段落</a> </body> </html>
7.块标签
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> 中文 hello html </p> <!--1.pre:其中的内容原样输出--> <pre> 中文 hello html </pre> <!--2.div:会自动的换行--> <!--主要用于页面的划分,其中可以嵌套任意的标签--> <div> 第一端文本 </div> <div> 第二端文本 </div> <!--3.span:类似于div,不会自动换行--> <!--主要用于注册错误提示--> <span> 第一端文本 </span> <span> 第一端文本 </span> </body> </html>
8.列表标签
a.自定义列表/解释性列表
:父标签
:子标签
:子标签b.有序列表
有序号:
阿拉伯数字:1,2,3,4.。。
罗马数字:I ,II ,III,IV…
字母:a,b,c,d,…
:父标签,表示有序列表的范围
- :具体内容,子标签
属性:
type:设置排序方式,默认为阿拉伯数字
c.无序列表【掌握】
特殊符号:
方框
实心圆
空心圆
:父标签,表示无序列表的范围
- :具体内容,子标签
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--1.自定义列表--> <dl> <dt>千锋教育</dt> <dd>财务部</dd> <dd>人事部</dd> <dd>教学部</dd> <dd>运营部</dd> </dl> <!--2.有序列表--> <!--注意:start表示从哪个位置开始,只对数字有效--> <ol start="3" type="1"> <li>财务部</li> <li>财务部</li> <li>财务部</li> <li>财务部</li> </ol> <!--3.无序列表--> <!--square;实心方框 circle:空心圆 disc:实心圆--> <ul type="square"> <li>财务部</li> <li>财务部</li> <li>财务部</li> <li>财务部</li> </ul> <!--li标签类似于标题标签,div,都是可以自动换行的--> <!--练习:在li标签的内部显示超链接--> <ul type="square"> <li><a href="#">财务部</a></li> <li><a href="#">财务部</a></li> <li><a href="#">财务部</a></li> <li><a href="#">财务部</a></li> </ul> </body> </html>
9.表格标签
标签:
:表示表格的范围,父标签
:表示行,子标签
:表示单元格【列】,子标签
:表示单元格【列】,子标签,其中的文本会加粗显示,会居中显示
:设置表格标题
属性:
border:表格线条宽度
bordercolor:线条颜色
cellspacing:单元格之间的间隔
width:宽度
height:高度
align:对齐方式【局左对齐,居中,居右对齐】
使用tr中:设置整行的对齐方式
使用td中:设置某一个单元格的对齐方式
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--需求:实现一个四行三列的表格--> <table border="1" bordercolor="blue" cellspacing="2" width="300" height="300"> <tr> <td>姓名</td> <td align="center">年龄</td> <td>性别</td> </tr> <tr align="center"> <td width="60px">东方不败</td> <td>28</td> <td>男</td> </tr> <tr> <td>岳不群</td> <td>18</td> <td>不男不女</td> </tr> <tr> <th>林平之</th> <td>28</td> <td>女</td> </tr> </table> </body> </html>
合并单元格
rowspan:跨行合并
colspan:跨列合并
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--需求:实现一个四行三列的表格--> <table border="1" bordercolor="blue" cellspacing="2" width="300" height="300"> <tr> <!--将多个列合并为一个列,在td中使用colspan属性,属性的值就为需要合并的列数--> <td colspan="3" align="center">人员信息</td> </tr> <tr> <td>东方不败</td> <td>28</td> <td>男</td> </tr> <tr> <td>岳不群</td> <td>18</td> <td>不男不女</td> </tr> <tr> <th>林平之</th> <td>28</td> <td>女</td> </tr> </table> <table border="1" bordercolor="blue" cellspacing="2" width="300" height="300"> <tr> <td>东方不败</td> <td>28</td> <td rowspan="3" align="center">男</td> </tr> <tr> <td>岳不群</td> <td>18</td> </tr> <tr> <th>林平之</th> <td>28</td> </tr> </table> </body> </html>