一、网页开发基础知识
网页文件：使用html的标记语言书写的文本文件，它可以在浏览器中按照设计者设计的样式呈现，书写一个网页文件，使用文本文档完成，HBuilder，Dreamweaver等
网页主要由三部分组成【掌握】： 结构：网页的结构和内容【一个网页包括标题，正文，列表，图片等】-----》html
表现：设定网页的呈现样式【字体，字号，颜色，标签的位置等】-----》css
行为：控制网页的行为【网页可以动态变化,可以和用户进行交互】----》javascript
总结：结构决定了网页是什么，表现决定了网页是什么样子，行为决定网页能做什么
其中：最开始html可以同时承担结构和表现的任务
二、html简介
1.概念
html:HyperText Markup Language,超文本标记语言，是最基础的网页语言，是解释性和编译型语言
超文本：超出文本的范畴【在记事本中无法文字的间距，颜色，大小等】
标记：html中所有的操作都是通过标记完成的，标记就是一个标签【元素】
h5:html5,html的最新版本
2.html程序
这是<font size="5" color="blue">第一个</font>html程序说明：font被称为标签【元素】，size和color被称为该标签的属性
html程序的后缀：.html或者.htm
3.html的规范
a.一个html文件都包含html开始标签和结束标签
b.html标签包含两部分内容
head标签：用来设置html页面的配置信息和属性
body标签：显示在网页上的内容
c.head标签包含其他的标签
title标签：设置当前网页的标题
meta标签：设置当前页面的编码格式，一般使用utf-8
d.一般的标签都有开始标签和结束标签，但是，有的标签只有开始标签
比如：meta,br【换行】,hr【水平线】
e.标签不区分大小写，一般书写为小写
<!--声明当前文件的类型为html --> <!DOCTYPE html> <html> <!--用来设置html页面的属性和配置信息--> <head> <!--设置的是编码格式--> <meta charset="utf-8" /> <!--设置网页的标题--> <title> 百度一下，你就知道 </title> </head> <!--在html中放置结构--> <body> 今天学习html标签 </body> </html> <!-- html标签之间的关系： a.父子关系 html标签直接包含head和body，html是head和body标签的父标签 b.兄弟关系 head和body是兄弟标签的关系 c.先辈或者后辈关系 出现了隔代的情况 html和meta或者title -->
4.html操作的思想
网页中很多不同的数据，不同的数据可能需要不同的显示方式，这时需要使用标签将需要操作的数据【封装：开始标签和结束标签】起来，通过修改标签的属性实现标签的样式改变
一个标签相当于一个容器，想要修改容器内数据的样式，只需要修改容器的属性
三、html常用标签
1.文字标签和段落标签
font:
size:文字的大小，取值范围为1~7，注意：数值越大，字号越大，数值超过7则显示的是7的大小
color:文字的颜色
表示1：简单的英文单词【red,green,blue…】
表示2：使用十六进制表示【#123456,每两位代表一种颜色，分别表示RGB】
#ffffff代表白色，#000000代表黑色
表示3：rgb() 或者 rgba()
rgb(r,g,b),r,g,b取值范围为0~255
rgba()，a表示透明度，取值范围为0~1
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <font size="4" color="lightskyblue">这是文字标签的演示</font> <br /> <font size="4" color="#ff45aa">这是文字标签的演示</font> <br /> <!--了解--> <!--删除标签--> <s>文字标签</s> <del>文字标签</del> <!--加粗标签--> <b>文字标签</b> <strong>文字标签</strong> <!--斜体标签--> <!--只是一种字体，类似于黑体，微软雅黑等，被称为意大利体--> <i>文字标签</i> <!--真正倾斜一定的角度--> <em>文字标签</em> <!--下划线标签--> <u>文字标签</u> <ins>文字标签</ins> <!--上标和下标--> <!-- 2（5） log2 --> 2<sup>5</sup> log<sub>2</sub> </body> </html>p
注意：如果在html中要设置段落中的内容，一般通过嵌套font标签实现
p标签默认会自动换行
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p><font size="5" color="green">贾</font>乃亮与李小璐是在某个饭局上认识，随后他就对女方一见钟情，锲而不舍展开疯狂追求。 李小璐曾在某访谈节目中透露，当时贾乃亮为了追求自己，还特别去打了一串与自己一样的耳洞， 而且感染化脓，就只是为了引起她的注意，还有一次是李小璐发烧生病， 贾乃亮衣不解带的守在身边照顾了5天5夜，连头都来不及洗， 就是一直陪在自己身边。但是这也没让李小璐接受对方的追求， 直到快1年了，有一次她看到贾乃亮喝醉，在自己面前委屈痛哭， 才惊觉对方是对自己是认真的，才点头同意交往 </p> <!--每个html标签都有一个style属性，用来设置当前标签的样式，属于css--> <!--每个html标签都有一个id属性--> <p style="height: 100px;background-color: cyan;">11111</p> <p>11111</p> <p>11111</p> <!--练习--> <p><font size="4" color="darkgray">望庐山瀑布</font></p> <p><font size="2" color="lightseagreen">望庐山瀑布，</font></p> <p><font size="2" color="lightseagreen">望庐山瀑布，</font></p> <p><font size="2" color="lightseagreen">望庐山瀑布，</font></p> <p><font size="2" color="lightseagreen">望庐山瀑布，</font></p> <p style="color: rgb(23,40,18);font-size: 30px;">望庐山瀑布</p> <p style="color: rgb(46,0,200);font-size: 16px;">望庐山瀑布,</p> </body> </html>
2.标题标签、水平线标签、换行标签
hn:n的取值范围为1~6，数值越大，标题的字号越小
注意：标题标签默认会自动换行，字体加粗
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>望庐山瀑布</h1> <h2>望庐山瀑布</h2> <h3>望庐山瀑布</h3> <h4>望庐山瀑布</h4> <h5>望庐山瀑布</h5> <h6>望庐山瀑布</h6> <!--换行标签--> <font>4672364</font> <br /> <font>fahwjghj</font> <!--水平线标签--> <!--可以通过size和color设置水平线的宽度和颜色--> <hr size="3" color="red" /> </body> </html>
3.字符实体
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--<html>是一个网页的开始--> <html>是一个网页的开始 <!--html文本中不管有多少个空格，只识别1个--> 一个网页 的开始 3×2=6 6÷3=2 </body> </html>
4.图片标签
img
属性：
src:图片的路径
网络资源：直接赋值网址即可
本地资源：资源一般在当前工程下，一般放置工程下的img文件夹，注意图片的相对路径
width:设置图片的宽度
height:设置图片的高度
注意：如果不设置图片的宽高，默认显示的是图片本来的大小
alt:图片的替换文本，如果图片资源不存在的时候，则显示该文本
title:鼠标悬浮标题，只有当鼠标移动到图片上方的时候才会显示该标题
<!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="200px" height="200px" /> <img src="img/背景1.jpg" width="50%" height="50%" /> <br /> <img src="img/背景2.jpg" width="200px" height="200px" alt="图片资源" /> <img src="img/背景1.jpg" width="200px" height="200px" title="背景图片" /> </body> </html>
路径
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--形式一：图片和html文件平级--> <img src="背景1.jpg" /> <!--形式2：图片的上级目录和html文件平级--> <!--通过/进行路径的拼接，多级目录：xx/xx/xx/...--> <img src="img/背景2.jpg" /> </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" /> </body> </html>
5.音视频标签
html5新增的特性
音频：audio
视频：video
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> </body> </html>
6.超链接标签
a
属性：
href:类似于图片中的src，表示需要链接到的路径
网络地址
本地html文件，一般使用相对路径，路径的使用和图片的使用相同的
target:设置打开的方式，默认在当前窗口中打开
_self:在当前窗口中打开
_blank:打开一个新的窗口
注意：a默认不会自动换行
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a href="http://www.baidu.com" target="_blank">按钮一</a> <a href="http://www.baidu.com" target="_self">按钮二</a> <a href="2.段落标签的使用.html">按钮三</a> <!--让一张图片有超链接的效果--> <a href="http://www.baidu.com"> <img src="背景1.jpg" width="50px" height="50px" /> </a> <br /> <!--超链接不链接到任何地方--> <!--#是一个占位符--> <a href="#">点我点我</a> <a href="javascript:void(0)">点我点我~~~</a> <a href="javascript:void(0)" onclick="alert('hello')">点我点我~~~</a> </body> </html>
6.1定位资源：回到顶部
<!--回到顶部--> <a href="#top">回到顶部</a>
6.2定位资源：跳转到指定的段落
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--格式：本地文件的路径#id属性的值--> <a href="pageInfo.html#p1">第一个段落</a> <a href="pageInfo.html#p2">第二个段落</a> <a href="pageInfo.html#p3">第三个段落</a> <a href="pageInfo.html#p4">第四个段落</a> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p id="p1" style="height: 1000px;background-color: red;"></p> <p id="p2" style="height: 1000px;background-color: gray;"></p> <p id="p3" style="height: 1000px;background-color: blue;"></p> <p id="p4" style="height: 1000px;background-color: cyan;"></p> </body> </html>
7.块标签
div:会自动换行，使用场景：主要用于网页的划分
注意：可以在div的内部嵌套任意的标签
span：不会自动换行，使用场景：输入框输入内容的提示或者校验
8.列表标签
a.自定义列表【解释型列表】 了解
dl:父标签，列表的范围
dt：子标签，上层内容
dd：子标签，下层内容
b.有序列表
ol：父标签，列表的范围
li:子标签，具体的内容
属性：type:设置排序方式，默认为1，可以设置为a【A】或者i【I】
c.无序列表
ul:父标签，列表的范围
li:子标签，具体的内容
属性：type：设置表示样式，circle空心圆，disc实心圆，square方框，默认为disc
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--自定义列表--> <dl> <dt>千锋教育</dt> <dd>行政部</dd> <dd>人事部</dd> <dd>运营部</dd> </dl> <!--有序列表--> <!--li会自动换行，类似于p,h，div--> <ol type="I"> <li>行政部</li> <li>行政部</li> <li>行政部</li> <li>行政部</li> </ol> <!--start对数字起作用--> <ol start="c" type="a"> <li>行政部</li> <li>行政部</li> <li>行政部</li> <li>行政部</li> <li>行政部</li> <li>行政部</li> </ol> <!--无序列表--> <ul type="square"> <li>行政部</li> <li>行政部</li> <li>行政部</li> <li>行政部</li> <li>行政部</li> <li>行政部</li> </ul> </body> </html>