本文介绍了网页开发的基础知识，包括网页文件的组成、HTML的基本语法及常用标签的使用方法，如文字、段落、图像、音视频等标签，并讲解了超链接、列表、表格等元素的应用。
一、网页开发基础知识
网页文件：是使用一种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>
扫一扫
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
