一、网页开发基础知识
网页文件：使用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>