01.01_网页开发基础知识
网页文件：html文件
编写工具：文本文档，HBuilder，DreamWeavwer
网页的主要组成：
结构：网页的结构和内容【包括各级标题，正文段落，各种列表】------》html
表现：设定网页的表现形式【每种组成部分的颜色，字体。。。】----------》css
行为：控制网页的行为【网页可以变化，可以和读者进行交互】--------》JavaScript
人体骨架-----》html
添加血肉-----》css
活动或者行为-----》javascript
总结：结构决定了网页是什么，表现决定了网页是什么样子，行为决定了网页能够做什么
初期：html可以同时担任结构和表现的双重行为
一个网站从无到有的建立过程：
扫描二维码关注公众号，回复： 3575402 查看本文章
客户策划-----》设计师【UI】进行设计界面和功能-----》程序员和设计师协同开发------》测试人员进行测试【软件测试】------》发布项目1.0-------》版本迭代
01.02_html简介
html简介
Hyper Text Markup Language,超文本标记语言，是最基础的网页语言，是解释型和编译型的语言
超文本：超出文本的范畴，比如：记事本中无法修改文字的颜色
标记：html中所有的操作都是通过标记实现的，标记就是一个标签，写法:<>
网页语言：制作网页的语言
html书写规范
a.一个html文件都包含<html></html>
举例：<font>:开始标签
</font>:结束标签
b.html包含两部分内容
1><head></head>:用来设置html的属性和配置信息
2></body>:显示在页面上的内容
c.html中的一部分标签是有开始标签和结束标签
举例：<title></title>
d.html中的一些标签是没有开始标签【在标签内开始，在当前标签内结束】
举例：<br />换行
<hr /> 分割线【水平线】
e.html中的标签不区分大小写【Python中的标识符严格区分大小写】,一般情况下，书写为小写
f.html项目命名格式：
数字，字母，下划线和$组成
不能以数字开头
最好不要有空格，最好不出现中文
遵守的规则：驼峰命名法
html代码编写思想
网页中有很多的数据，不同的数据可能需要显示不同的效果，我们需要使用标签将需要操作的数据封装起来，通过修改标签的值来控制显示的样式
一个标签就相当于是一个容器，想要修改标签的值，则只需要进行修改标签中属性的值，标签中的数据的样式会随着发生改变
01.03_html常用的标签
注释标签、文字标签和段落标签
注释标签
html: <!-- xxxxxx–> 注释快捷键： ctrl+/
文字标签
作用：修改文字的样式
<font></font>
属性：
size:文字的大小，取值范围1~7，超过7之后显示其实就是7
color:文字的颜色，有两种表示形式
方式一：颜色对应的单词：red,green
方式二：rgb【使用十六进制】
#123456，每两位表示一种颜色，分别表示红色，绿色，蓝色
其中，#ffffff表示白色，#000000表示黑色
段落标签
作用：设置段落
<p></p>
属性：
id:设置段落的标记style:设置段落的样式
和字体相关的其他标签
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--字体加粗-->
<font>hello</font>
<b>hello</b>
<strong>hello</strong>
<!--水平线-->
<hr />
<!--删除线-->
<s>hello</s>
<!--下划线-->
<u>hello</u>
<ins>hello</ins>
<!--斜体-->
<i>hello</i>
<em>hello</em>
<!--上标和下标-->
<!--
2(5)
log2
-->
2<sup>5</sup>
log<sub>2</sub>
<br />
<!--缩进表示引用-->
<blockquote>好好学习天天向上</blockquote>
</body>
</html>
标题标签和字符实体
标题标签
<hn></hn> 注意：n的取值范围为1~6的整数
作用：通常在网页中表示标题，n数值越大，标题越小
字符实体
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字符实体</title>
</head>
<body>
<!--<html>是一个标签-->
<html>是一个标签
<!--空格-->
<p> 爱撒娇的哈克建行的卡还是快点哈看见电话卡
撒大苏打实打实实打实大苏打实打实大苏打当时的首发式发生撒旦发射点发射
撒大苏打大苏打实打实打算离开急哦急哦进来看看就看见了看咪咪模块啊是大
</p>
<!--
2x3 = 6
6 / 3 = 2
-->
3×2=6
6÷3=2
<!--版权-->
©版权：xx大学出版社
<!--双引号-->
"古诗词"
</body>
</html>
图像标签和路径
图像标签
<img />
属性：
src:图片的路径
网络资源：直接赋值网络地址
本地路径：资源在当前工程下，尽量使用相对路径
width:宽度
height:高度
单位为:像素，百分比
alt:图片上的提示文字【图片替换文本，如果图片资源加载不出来的，则显示文字】
title:鼠标悬浮标题，和alt不同
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--直接设置图片，如果没有设置大小，则默认为图片本身的大小-->
<img src="img/pic2.jpg"/>
<!--width和height的使用-->
<img src="img/pic2.jpg" width="100px" height="200px"/>
<!--alt的使用-->
<img src="img/pic5.jpg" width="100px" height="200px" alt="hello"/>
<!--title的使用-->
<img src="img/pic2.jpg" width="100px" height="200px" alt="hello" title="dog"/>
</body>
</html>
路径
绝对路径：带有盘符
相对路径： 没有盘符，表示一个文件相对于另外一个文件的位置【常用】
体现形式：
a.图片和html文件在同一个目录下
b.图片的最上级目录和html平级
c.html的上级目录和img的上级目录平级
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--路径的形式一：平级-->
<img src="pic2.jpg"/>
<!--路径的形式二：图片的最上级目录和html平级-->
<img src="img/pic2.jpg"/>
<!--路径的形式三：html的上级目录和img的上级目录平级 ../../-->
<!--核心：参照物是当前的工程目录-->
<img src="../pic2.jpg" />
<img src="../img/pic2.jpg" />
</body>
</html>
超链接标签
<a></a>
属性：
href:表示需要连接到的资源路径【本地的html页面，一般使用相对路径 和 网络地址】
target:设置打开的方式，默认在当前窗口中打开
_blank:在一个新的窗口中打开
_self:在当前窗口中打开
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--引用本地资源-->
<a href="fontDemo01.html" target="_blank">点击</a>
<a href="fontDemo01.html" target="_self">点击1111</a>
<!--注意：加载本地资源，注意路径-->
<!--引用网络资源-->
<a href="http://www.baidu.com">百度</a>
<!--想让一张图片具有超链接的效果-->
<a id="img" href="http://www.baidu.com" target="_blank">
<img src="pic2.jpg" />
</a>
<!--不链接任何内容-->
<!--#表示一个占位符-->
<a href="#">点我</a>
<a href="javascript:void(0)">不链接</a>
<!--弹出一个提示框-->
<a href="javascript:void(0)" onclick="alert('啦啦啦啦啦')">点点点</a>
</body>
</html>
块标签
<p></p>
<div></div>:会自动换行，主要在css中使用的比较多，主要作用为了划分区域
<span></span>：在一行显示，不会换行，css中使用【注册用户名和密码时错误提示】
<pre></pre>:可以让标签内的内容按照原来的格式显示
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>这时div</div>
<div>这时div</div>
<div>这时div</div>
<span>这是span</span>
<br />
<span>这是span</span>
<br />
<span>这是span</span>
<p>
hello
Python
html
class Person(object):
pass
</p>
<pre>hello Python html
class Person(object):
pass</pre>
</body>
</html>
列表标签
自定义列表
<dl></dl>:列表的范围【父标签】
<dt></dt>:上层内容【子标签】
<dd></dd>:下层内容【子标签】
有序列表
<ol></ol>:表示有序列表的范围【父标签】
<li></li>:具体内容【子标签】
无序列表
<ul></ul>:表示无序列表的范围【父标签】
<li></li>:具体内容【子标签】
列表案例
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.自定义列表-->
<!--
<dl></dl>:列表的范围【父标签】
<dt></dt>:上层内容【子标签】
<dd></dd>:下层内容【子标签】
-->
<dl>
<dt>千锋教育</dt>
<dd>教学部</dd>
<dd>人事部</dd>
<dd>行政部</dd>
<dd>运营部</dd>
<dd>品质保障部</dd>
</dl>
<!--2.有序列表-->
<!--
<ol></ol>:表示有序列表的范围【父标签】
<li></li>:具体内容【子标签】
-->
<!--可以设置有序列表的表示形式，默认为阿拉伯数字-->
<!--type的值：1，a,A,i-->
<ol type="i">
<li>教学部</li>
<li>人事部</li>
<li>行政部</li>
<li>运营部</li>
<li>品质保障部</li>
</ol>
<!--start属性表示从几开始-->
<ol start="2" type="1">
<li>教学部</li>
<li>人事部</li>
<li>行政部</li>
<li>运营部</li>
<li>品质保障部</li>
</ol>
<!--3.无序列表-->
<!--
<ul></ul>:表示无序列表的范围【父标签】
<li></li>:具体内容【子标签】
-->
<!--type属性的值：circle空心圆,square方框,disc实心圆-->
<ul type="square">
<li>教学部</li>
<li>人事部</li>
<li>行政部</li>
<li>运营部</li>
<li>品质保障部</li>
</ul>
</body>
</html>
音视频标签
html5新增
音频：
视频：
src:需要加载的资源路径
autoplay:自动播放
controls:显示进度控制条
loop:循环播放
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
音频：<audio></audio>
视频：<video></video>
src:需要加载的资源路径
autoplay:自动播放
controls:显示进度控制条
loop:循环播放
-->
<audio src="img/JAEFOREAL,蜡笔大Boom - 追梦的蚂蚁.mp3" autoplay controls loop></audio>
<hr />
<video src="img/MovieTest.mp4" autoplay controls loop></video>
</body>
</html>
表格标签
简单使用
<table></table>；表示表格的范围【父标签】
<tr></tr>:表示行【父标签】
<td></td>:单元格
<caption></caption>设置表格的标题
属性：【table和caption都有】
border；表格线条宽度
bordercolor:线条颜色
cellspacing：单元格之间的间隔
width；宽度
height:高度
注意：tr和td中使用
align:对其方式
left,center,right,默认为左对齐
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<caption>人员信息</caption>
<table border="1" bordercolor="red" cellspacing="0" width="300px" height="300px">
<tr align="center">
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr align="center">
<td align="center">东方不败</td>
<td>20</td>
<td>不明</td>
</tr>
<tr align="center">
<td>林平之</td>
<td>30</td>
<td>男</td>
</tr>
<tr align="center">
<td>岳不群</td>
<td>25</td>
<td>女</td>
</tr>
</table>
</body>
</html>
合并单元格
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>合并单元格</title>
</head>
<body>
<!--
rowspan:跨行
colspan:跨列
-->
<table border="1" bordercolor="red" cellspacing="0" width="300px" height="300px">
<tr align="center">
<!--合并列-->
<!--td中使用colspan属性表示合并列-->
<td colspan="3">人员信息</td>
</tr>
<tr align="center">
<td align="center">东方不败</td>
<td>20</td>
<td>不明</td>
</tr>
<tr align="center">
<td>林平之</td>
<td>30</td>
<td>男</td>
</tr>
<tr align="center">
<td>岳不群</td>
<td>25</td>
<td>女</td>
</tr>
</table>
<hr />
<table border="1" bordercolor="red" cellspacing="0" width="300px" height="300px">
<tr align="center">
<td align="center">东方不败</td>
<td>20</td>
<!--是td中表示rowspan:合并行-->
<td rowspan="3">不明</td>
</tr>
<tr align="center">
<td>林平之</td>
<td>30</td>
</tr>
<tr align="center">
<td>岳不群</td>
<td>25</td>
</tr>
</table>
</body>
</html>