一、网页开发基础知识
网页文件:使用html标记语言书写的文本文件
作用:可以在浏览器中按照设计者所设计的方式显示指定的样式
网页主要由三部分组成:结构,表现和行为
结构:网页的结构和内容【一个网页包含各级标题,正文段落等】------》html
表现:设定网页的表现样式【每个组成部分的字体,颜色,字号】------》css
行为:控制网页的行为【网页可以发生变化,可以和用户进行交互】----》javascript
总之:结构决定了网页是什么,表现决定了网页是什么样子,行为决定了网页能做什么
其中:最初,html需要承担结构和表现双重任务
二、html简介
1.概念
HyperText Markup Language, 超文本标记语言,是最基础的网络编程语言,是解释性的语言
超文本:超出文本的范畴
标记:html中所有的操作都是通过标记实现的,标记就是一个标签
2.第一个html程序
代码演示:
<html> <head> <title>网页标题</title> </head> <body> 这是<font size="5" color="red">第一个</font>html程序<br />和Python的区别 <hr /> hellohello </body> </html>
<!--文档声明。表示当前文件为html文件 --> <!DOCTYPE html> <html> <head> <!--设置当前页面的编码格式,为utf-8,避免在浏览器中出现乱码的情况--> <meta charset="utf-8" /> <!--设置当前网页的标题--> <title>第一个html程序</title> </head> <!-- 设置需要显示的内容 --> <body> <font color="aqua">hello</font> </body> </html> <!-- html标签之前的关系 父子关系【直接嵌套关系】 html包含head标签 html是head标签的父标签 head标签时html标签的子标签 兄弟关系【平级关系】 head和body同时存在于html标签下 先辈后辈关系【隔代关系】 html是title的先辈标签 title是html的后辈标签 html中的标签是可以任意嵌套的 -->
3.html的编码规范
a.一个html文件都包含指定的开始标签和结束标签:<html></html>
b.html包含两部分内容:
head:用来设置html页面的属性和配置信息
body:需要显示在网页上的内容
c.head中包含内容:<title></title>,body中包含任意的标签
d.一般情况下,所有的标签都由开始标签和结束标签组成,但是,一些标签只有开始标签,没有结束标签
例如:<br /> 换行
<hr /> 水平线
e.html中的标签不区分大小写
4.html的思想
封装
网页中很多的数据,不同的数据可能需要有不同的显示效果,这个时候需要使用标签将需要操作的数据封装起来【开始标签和结束标签之间】,通过修改标签的属性就可以概念数据的样式
一个标签就是一个容器,想要修改数据的样式,则只需要设置容器的属性
三、html中常用的标签
1.注释标签、文字标签和段落标签
1.1注释标签
html的注释:<!- - 注释内容 - -> 【!为英文状态下的】
添加注释:快捷键 ctrl+/ 【取消注释:仍然按ctrl+/】
1.2文字标签
文字标签: 标签: <font</font> 属性: size:文字的大小,取值范围为1~7,数值超过7则表示7的大小 color:文字的颜色 方式一:英文单词【red,green,yellow等】 方式二:使用十六进制表示 举例:#123456,每两位代表一种颜色,分别是三原色中的红色,绿色,蓝色【RGB】 #ffffff:白色 #000000:黑色 方式三:rgb(r,g,b) rgba(r,g,b,a) 其中的参数r,g,b的取值范围0~255 a表示透明度,取值范围0~1
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <font size="4" color="#56abfe">文字字体</font> </body> </html>
1.3段落标签
段落标签:
<p></p>特点:会自动换行 在其中可以嵌套其他的标签
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>第一段落</p> <p>第二段落</p> <p> <font size="5" color="green">贾</font>乃亮与李小璐是在某个饭局上认识, 随后他就对女方一见钟情,锲而不舍展开疯狂追求。 李小璐曾在某访谈节目中透露,当时贾乃亮为了追求自己, 还特别去打了一串与自己一样的耳洞,而且感染化脓,就只是为了引起她的注意, 还有一次是李小璐发烧生病,贾乃亮衣不解带的守在身边照顾了5天5夜,连头都来不及洗, 就是一直陪在自己身边。但是这也没让李小璐接受对方的追求,直到快1年了,有一次她看到贾乃亮喝醉, 在自己面前委屈痛哭,才惊觉对方是对自己是认真的,才点头同意交往 </p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- html中所有的标签都有一个id属性,都有style【风格,样式】属性 --> <p id="p1" style="background-color: red;height: 500px;"> 就是一直陪在自己身边。但是这也没让李小璐接受对方的追求,直到快1年了,有一次她看到贾乃亮喝醉, 在自己面前委屈痛哭,才惊觉对方是对自己是认真的,才点头同意交往 </p> <p id="p2">第二段落</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p><font size="5">望庐山瀑布</font></p> <p><font size="2" color="aquamarine">fhjgjagh</font></p> <p style="font-size: 12px;color: rgb(100,100,100);">hfjghaj</p> </body> </html>
1.4和文字有关的其他的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--加粗标签-->
<font>hello</font>
<b>hello</b>
<strong>hello</strong>
<!--添加删除线-->
<s>hello</s>
<del>hello</del>
<!--添加下划线-->
<u>hello</u>
<ins>hello</ins>
<!--设置文字斜体-->
<i>hello</i>
<em>hello</em>
<br />
<!--上标和下标-->
<!--
log2
-->
2<sup>5</sup>
log<sub>2</sub>
</body>
</html>
2.标题标签、换行标签和水平线标签
2.1标题标签
<hn></hn>
说明:n的取值范围:1~6,通过数字的大小表示标题的层级关系,数字越大,表示标题对应的文字越小,注意:标题标签会自动换行
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--标题标签--> <h1><font color="red">问君能有几多愁</font></h1> <h2>问君能有几多愁</h2> <h3>问君能有几多愁</h3> <h4>问君能有几多愁</h4> <h5>问君能有几多愁</h5> <h6>问君能有几多愁</h6> <!--水平线标签--> <hr /> <hr size="7" color="aqua" /> </body> </html>
2.2换行标签
<br />
2.3水平线标签
<hr />
属性:
size:水平线的宽度
color:水平线的颜色
3.图像标签
<img />
属性:
src:图片的路径
网络资源:直接赋值网址即可
本地资源:资源一般情况下加载到当前工程下【相对路径】
width:图片显示的宽度
height:图片显示的高度
方式一:使用px【像素】作为单位
方式二:以百分比表示
alt:图片上文字提示【图片的替换文本,当图片资源加载不出来的时候显示该文字】
title:鼠标悬浮标题,注意和alt的区别
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--加载本地图片--> <!--注意:如果不设置图片的显示大小,则默认为图片的原大小--> <!--<img src="img/背景1.jpg" />--> <!--加载网络图片--> <img src="https://www.baidu.com/img/bd_logo1.png" /> <img src="img/背景1.jpg" width="100px" height="100px" /> <br /> <img src="img/背景1.jpg" width="50%" height="50%" /> <!-- 图片比例:a:b = w:h 如果已知w,求h h = b * w / a --> <br /> <!--alt:表示图片资源不存在时候的提示文字--> <img src="img/背景2.jpg" width="100px" height="100px" alt="图片资源不存在" /> <!--title:鼠标悬浮标题--> <img src="img/背景1.jpg" width="100px" height="100px" title="背景" /> <!--路径问题--> <!--形式一:--> <img src="背景1.jpg" /> <!--形式二:--> <img src="img/背景1.jpg" /> <img src="img/text/背景1.jpg" /> </body> </html>
路径
绝对路径:包含盘符的路径
相对路径:没有盘符,表示一个文件相对于另外一个文件的位置,在web开发中常用相对路径
体现形式:
a.图片文件和html文件是平级
b.图片的上级目录或者上上级目录和html文件是平级【最多】
c.html的上级目录或者上上级目录和图片是平级
4.超链接标签
<a></a>
1》链接资源
属性:
href:表示需要链接到的资源的路径【类似于img中图片的路径】
target:设置打开的方式,默认在当前窗口中打开
_blank:在一个新的窗口中打开指定资源
_self:在当前窗口中打开指定资源
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--加载本地资源--> <a href="1.html的组成.html">点击</a> <!--加载网络资源--> <a href="http://www.baidu.com">百度一下</a> <!--_self表示在当前窗口中打开,会出现一个后退按钮,_blank表示在一个新的窗口中打开,没有后退按钮--> <a href="http://www.baidu.com" target="_self">百度一下~~~</a> <!--将一张图片设置为超链接--> <a href="http://www.baidu.com"> <img src="img/text/背景1.jpg" width="50px" height="50px" /> </a> <!--链接不到任何地方--> <a href="#">点我点我</a> <a href="javascript:void(0)">不链接</a> </body> </html>
2》定位资源
a.回到顶部
b.定位到指定页面的指定段落
5.块标签
<pre></pre>;其中的内容原样输出
<div></div>:会自动换行,使用最广,主要用于页面的划分【百度云盘,qq空间】
<span></span>:和div类似,不会自动换行【注册用户时错误后面的提示】
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--原样输出--> <pre> hello html 这一秒 不失望, 下一秒就有 希望 </pre> hello html 这一秒 不失望, 下一秒就有 希望 <div>111</div> <div>222</div> <div>333</div> <span>aaa</span> <span>bbb</span> <span>ccc</span> </body> </html>
字符实体
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--空格--> hello hi <br /> <html>代表html页面的开始 2×3=6 6÷3=2 <br /> ©版权:清华大学出版社 ®注册商标 </body> </html>
6.列表标签
6.1自定义列表
a.自定义列表/解释型列表【了解】
<dl></dl>;表示列表的范围【父标签】
<dt></dt>:上层内容【子标签】
<dd></dd>:下层内容【子标签】
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <dl> <dt>千锋教育</dt> <dd>教学部</dd> <dd>人事部</dd> <dd>财务部</dd> <dd>行政部</dd> </dl> </body> </html>
6.2有序列表
b.有序列表
<ol></ol>有序列表的范围【父标签】
<li></li>:具体内容【子标签】
属性:type;设置排列方式,默认为阿拉伯数字,还可以设置为字母和罗马数字
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--1,a,A,i,I--> <ol type="A"> <li>html</li> <li>java</li> <li>pathon</li> <li>php</li> </ol> <ol start="2"> <li>html</li> <li>java</li> <li>pathon</li> <li>php</li> </ol> <!--注意:li标签会自动换行--> </body> </html>
6.3无序列表
c.无序列表
<ul></ul>:无序列表的范围【父标签】
<li></li>:具体内容【子标签】
属性:type:圆点【disc】,空心圆【circle】,方框【square】,默认为disc
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul type="circle"> <li>html</li> <li>java</li> <li>pathon</li> <li>php</li> </ul> </body> </html>
7.音视频标签
html5新增的标签
音频:<audio></audio>
视频:<video></video>
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--音频 mp3,wav,ogg autoplay:自动加载 controls:显示进度控制条 loop:循环播放 --> <audio src="img/JAEFOREAL,蜡笔大Boom - 追梦的蚂蚁.mp3" autoplay controls loop></audio> <br /> <!--视频 mp4,wav --> <video src="img/MovieTest.mp4" autoplay controls loop></video> </body> </html>
8.表格标签
作用:可以对数据进行格式化,使得数据显示更加清晰
标签:
<table></table>;表格的范围【父标签】
<tr></tr>:行【子标签】
<td></td>:单元格【是tr的子标签】
<th></th>:和td是相同,不同的是其中的文本加粗显示
<caption></caption>:设置表格的标题【不常用】
属性:
border:表格线条的宽度
bordercolor:线条的颜色
cellspacing:单元格之间的间隔
width:表格的宽度或者单元格的宽度
height:表格的高度或者单元格的高度
align:对齐方式,取值为left,center,right,默认居左对齐【table/td/tr】
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--四行三列--> <!-- table:align="center"表示将整个表格显示在浏览器中的中间--> <table border="1" bordercolor="blue" cellspacing="1" width="300px" height="300px"> <tr align="center"> <td>姓名</td> <td>年龄</td> <td>性别</td> </tr> <tr align="center"> <td>东方不败</td> <td>20</td> <td>男</td> </tr> <tr align="center"> <td>岳不群</td> <td>22</td> <td>女</td> </tr> <tr align="center"> <th>林平之</th> <td>30</td> <td>男</td> </tr> </table> </body> </html>
合并单元格:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--合并列:colspan,将指定的列合并为一列--> <table border="1" bordercolor="blue" cellspacing="1" width="300px" height="300px"> <tr align="center"> <td colspan="3">人员信息</td> </tr> <tr align="center"> <td>东方不败</td> <td>20</td> <td>男</td> </tr> <tr align="center"> <td>岳不群</td> <td>22</td> <td>女</td> </tr> <tr align="center"> <th>林平之</th> <td>30</td> <td>男</td> </tr> </table> <!--合并行:rowspan--> <table border="1" bordercolor="blue" cellspacing="1" width="300px" height="300px"> <tr align="center"> <td>东方不败</td> <td>男</td> <td rowspan="3">20</td> </tr> <tr align="center"> <td>岳不群</td> <td>女</td> </tr> <tr align="center"> <th>林平之</th> <td>男</td> </tr> </table> </body> </html>