Web前端知识(一)
Web前端全部知识点
知识 体系:
1)HTML
2)CSS
3)JavaScript
4)Web前端框架
lJquery
lbootstrap
5)5)Ajax
1.HTML
1.1.为何学习HTML
1.2.HTML.概述
HTML：Hyper Text Markup Language ：超文本标记语言。
超文本：功能比普通文本更加强大
标记语言：使用一组标签对内容进行描述的语言，
W3C组织
学习HTML的途径
1.3.HTML语言特点
1)HTML文件不需要编译,直接使用浏览器阅读即可
2)HTML文件的扩展名是.html或.htm
3)HTML结构都是由标签组成
标签名预先定义好的，我们只需了解其功能即可
标签名不区分大小写
通常情况下标签由开始标签和结束标签组成。例如
如果没有结束标签,建议以/结尾。例如:
4)HTML结构包括两部分: 头(head)和 身体(body)
1.4.HTML基本结构
到此，我们已经对HTML有了最基本的了解也知道如何制作一个HTML基本框架了，但是离我们案例的效果还差的很远，因为我们需要学习HTML中标签！！！
1.5.HTML标签
1.5.1.基础标签1
1.5.1.1.标题标签
代码效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<body>
<!--标题标签-->
<h1>公司简介</h1><br />
<h2>公司简介</h2><br />
<h3>公司简介</h3><br />
<h4>公司简介</h4><br />
<h5>公司简介</h5><br />
<h6>公司简介</h6><br />
<h100>公司简介</h100>
</body>
</html>
1.5.1.2.水平线标签
代码效果:
<< span="">html lang="en">
<< span="">head>
<< span="">meta charset="UTF-8">
<< span="">title>Titletitle>
head>
<< span="">body>
<< span="">h1>公司简介h1>
<< span="">hr size="10"/>
<< span="">hr size="10" noshade="noshade"/>
body>
html>
1.5.1.3.段落标签
标签用于在网页中定义段落
代码效果:
<< span="">p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，位于北京中轴线的中心，是中国古代宫廷建筑之精华。北京故宫以三大殿为中心，占地面积72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。是世界上现存规模最大、保存最为完整的木质结构古建筑之一。<< span="">p/>
<< span="">p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，位于北京中轴线的中心，是中国古代宫廷建筑之精华。北京故宫以三大殿为中心，占地面积72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。是世界上现存规模最大、保存最为完整的木质结构古建筑之一。p>
1.5.1.4.字体标签
内容
color:设置字体的颜色，可使用英文单词或者 16 进制
size：设置字体的大小，从 1 到 7 逐渐变大，最大显示为 7
face：设置字体
代码效果:
<< span="">font color="#ff0099" size="1">我是个大好人font><< span="">br/>
<< span="">font color="#ff0099" size="2">我是个大好人font><< span="">br/>
<< span="">font color="#ff0099" size="3">我是个大好人font><< span="">br/>
<< span="">font color="#ff0099" size="4">我是个大好人font><< span="">br/>
<< span="">font color="#ff0099" size="5">我是个大好人font><< span="">br/>
<< span="">font color="#ff0099" size="6">我是个大好人font><< span="">br/>
<< span="">font color="#ff0099" size="7" face="宋体">我是个大好人font><< span="">br/>
body>
html>
1.5.1.5.换行标签
在网页中需要换行使用
1.5.1.6.格式化标签
代码
<< span="">body> << span="">b>京东b> << span="">i>哈哈i> body> html>
案例1-网站信息显示页面
【效果图】：
【思路分析】：
第一步：创建一个 HTML 文件
第二步：创建一个标题标签显示公司简介
第三步：创建一个水平线标签
第四步：创建四个段落标签分别显示公司简介的一些文字性描述内容。
第五步：对文字内容进行完善(加粗、变色等设置)
代码：
<< span="">html lang="en">
<< span="">head>
<< span="">meta charset="UTF-8">
<< span="">title>Titletitle>
head>
<< span="">body>
<< span="">h2>公司简介h2>
<< span="">hr/>
<< span="">p><< span="">font color="red">拍拍网是京东战略收购的原腾讯电商旗下业务。font>拍拍网致力于打造一个<< span="">i>卖家和买家i>互联互通的<< span="">b>C2Cb>平台，通过提供包括服装服饰，母婴，食品和饮料，家居家装和消费电子产品等在内的丰富的产品，来全面满足消费者的需求。与此同时，拍拍网也为第三方卖家提供数据挖掘和分析等增值服务，这些增值服务将帮助卖家对消费者和市场做出精准分析，并为其产品规划和开展精准营销提供支持。通过布局拍拍网，京东正式进军C2C领域，京东原有的电商生态也在B2C的基础上得到了进一步丰富。p>
<< span="">p>拍拍网将秉持“坚决杜绝假货”和“更公平的流量分配体系“两条核心原则，扶持包括大学生、中小商家、农民等广泛的电子商务创业者群体，建立公平，透明的商家生态，吸纳优质商家和商品入驻，并充分保障中小卖家的权益，在帮助中小卖家的健康成长同时，服务好最终消费者。p>
<< span="">p>拍拍网建立规则公平和透明的流量分发体系，尤其是要帮助中小卖家成长。现在C2C市场内在的生态环境非常恶劣，优质的商家和商品需要支付高昂的广告和推广费用才能得到商品的曝光。拍拍网会建立更加科学和公平透明的流量分配机制，重视商家的服务质量，降低刷销量带来的搜索权重等。拍拍网将会充分保护中小卖家的权益，让他们在拍拍的平台上真正赚到钱。p>
body>
html>
到此我们已经学会了一些HTML中最基本的标签，但是我们试想一下，如果是这样子的一个网站，我们去了一次那么下次应该就不会再去了，为何呢?
1.5.2.基础标签2
1.5.2.1.图片标签
标签的 src 属性。
src：图片资源的路径
width：设置图片的宽度
height：设置图片的高度
alt：当图片无法正常显示的时候给出的提示信息，它的显示效果与浏览器有关
代码:
<< span="">html lang="en">
<< span="">head>
<< span="">meta charset="UTF-8">
<< span="">title>Titletitle>
head>
<< span="">body>
<< span="">img src="mm/mm2212.jpg" width="100" height="50" alt="网络故障">
body>
html>案例2-网站图片信息显示页面
效果图:
实现思路:
第一步：创建一个 html 文件
第二步：创建一个图片标签显示 logo 图片
第三步：创建一个图片标签显示 header 图片
代码效果:
<< span="">html lang="en">
<< span="">head>
<< span="">meta charset="UTF-8">
<< span="">title>Titletitle>
head>
<< span="">body>
<< span="">img src="img/5b9e0b56ce722.png" height="51" alt="">
<< span="">img src="img/header.png" alt="">
body>
html>
图片路径问题:
当前目录：直接写文件名称或者./文件名称
上一级目录：../文件名称
上上一级目录: ../../文件名称
下一级：目录名称/文件名称
1.5.3.基础标签4
1.5.3.1.列表标签
效果:
列表标签分类:
1)有序列表
ol用来定义有序列表
2)无序列表
ul用来定义无序列表
不管是有序的ol还是无序的ul，都需要结合li定义列表项一起配合使用，否则无意义！
代码:
<< span="">ul>
<< span="">li>百度li>
<< span="">li>腾讯li>
<< span="">li>阿里巴巴li>
ul>
body>
html>
<< span="">ol>
<< span="">li>百度li>
<< span="">li>腾讯li>
<< span="">li>阿里li>
ol>
无序列表ul的type属性取值: A、a、I、i、1等
有序列表ul的type属性取值:disc(实心圆)、square(方块)、circle(空心圆)
1.5.4.基础标签3
1.5.4.1.超链接标签
在网页中使用a标签
A标签是超链接，是在html页面提供一种可以访问其他位置的实现方式
效果:
<< span="">body>
<< span="">a>我是超链接a>
body>超链接的常见属性:
src属性 写上你要访问的网页路径 (1.可以是一个网页 2.可以是一个网址 3. #空链接)
target属性:确定以何种方式打开href所设置的页面,常见取值:_blank、_self等
_blank 在新窗口 中打开href确定的页面
_self默认,使用href确定的页面替换当前页面
代码:
<< span="">html lang="en">
<< span="">head>
<< span="">meta charset="UTF-8">
<< span="">title>Titletitle>
head>
<< span="">body>
<< span="">a href="01-水平线标签.html">我是超链接a>
body>
html>
1.5.5.基础标签5
1.5.5.1.表格标签
表格效果在网页中有很多地方都有，例如:咱们这个网站首页，需要进行排版，就需要使用到表格
在网页中实现表格效果，使用一个标签：table
常用的子标签
常用的子标签
<tr>:行
常用子标签:
<td>:列
<th>:表头单元格 默认居中加粗
注意:
一行必须有一个单元格或者一列
代码:
<< span="">body>
<< span="">table>
<< span="">tr>
<< span="">td>百度td>
<< span="">td>腾讯td>
<< span="">td>阿里td>
tr>
table>
body>
html>
table 的常用属性:
border:边框 像素值
width:宽度
align:表格对齐方式
bgcolor:表格背景颜色
代码:
<< span="">table border="1px" width="300px" align="right"> << span="">tr> << span="">td>11td> << span="">td>12td> << span="">td>13td> tr> << span="">tr> << span="">td>21td> << span="">td>22td> << span="">td>23td> tr> table> body>
tr 的常用属性:
align:内容对齐
<< span="">table border="1px" width="300px" align="right">
<< span="">tr>
<< span="">td>11td>
<< span="">td>12td>
<< span="">td>13td>
tr>
<< span="">tr>
<< span="">td>21td>
<< span="">td>22td>
<< span="">td>23td>
tr>
table>
body>
td 的常用属性:
align:内容对齐
colspan:跨列合并 值:合并的列数
rowspan:跨行合并
<< span="">table border="1px" width="300px" align="center"> << span="">tr align="center"> << span="">td>11td> << span="">td>12td> << span="">td>13td> tr> << span="">tr> << span="">td>21td> << span="">td align="center">22td> << span="">td>23td> tr> table>
跨列合并:
<< span="">table border="1px" width="300px" align="center" height="300px">
<< span="">tr>
<< span="">td>11td>
<< span="">td colspan="2">12&13td>
tr>
<< span="">tr>
<< span="">td>21td>
<< span="">td>22td>
<< span="">td>23td>
tr>
<< span="">tr>
<< span="">td>31td>
<< span="">td>32td>
<< span="">td>33td>
tr>
table>跨行合并:
<< span="">table border="1px" width="300px" align="center" height="300px">
<< span="">tr>
<< span="">td>11td>
<< span="">td>12td>
<< span="">td>13td>
tr>
<< span="">tr>
<< span="">td rowspan="2">21&31td>
<< span="">td>22td>
<< span="">td>23td>
tr>
<< span="">tr>
<< span="">td>32td>
<< span="">td>33td>
tr>
table>表头单元格:th
代码:
<< span="">table border="1px" width="300px" align="center" height="300px">
<< span="">tr>
<< span="">th>11th>
<< span="">th>12th>
<< span="">td>13td>
tr>
<< span="">tr>
<< span="">td rowspan="2">21&31td>
<< span="">td>22td>
<< span="">td>23td>
tr>
<< span="">tr>
<< span="">td>32td>
<< span="">td>33td>
tr>
table>案例3：网站首页效果
【实现思路】：
创建一个8行1列的表格
1.在第一行 放logo
嵌套一个1行3列的表格
2.第2行 放菜单
3.第3行 放图片
4.第4行 热门商品
嵌套一个2行7列的表格
5.第5行 放广告图片
6.第6行 最新商品
嵌套一个2行7列的表格
7.第7行 放一个图片
8.第8行
两个段落
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px" width="100%">
<!--嵌套一行三列-->
<tr>
<td>
<table width="100%">
<tr>
<td><img src="img/5b9e0b56ce722.png" alt=""></td>
<td align="center"><img src="img/header.png" alt=""></td>
<td align="right">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="black" height="40px">
<td>
<a href="#"><font size="4" color="white">首页</font></a>
<a href="#"><font size="4" color="white">公司简介</font></a>
<a href="#"><font size="4" color="white">关于我们</font></a>
<a href="#"><font size="4" color="white">关于我们</font></a>
</td>
</tr>
<tr>
<td><img src="img/1.jpg" alt=""></td>
</tr>
<tr>
<td>
<font>热门商品</font>
<img src="img/title2.jpg" alt="">
<table width="100%">
<tr>
<td rowspan="2">
<img src="img/big01.jpg" alt="">
</td>
<td colspan="3">
<img src="img/middle01.jpg" alt="">
</td>
<td>
<img src="img/small08.jpg" alt="">
<p align="center">电饭煲</p>
<p align="center">¥200</p>
</td>
<td>
<img src="img/small08.jpg" alt="">
<p align="center">电饭煲</p>
<p align="center">¥200</p>
</td>
<td>
<img src="img/small08.jpg" alt="">
<p align="center">电饭煲</p>
<p align="center">¥200</p>
</td>
</tr>
<tr>
<td>
<img src="img/small08.jpg" alt="">
<p align="center">电饭煲</p>
<p align="center">¥200</p>
</td>
<td>
<img src="img/small08.jpg" alt="">
<p align="center">电饭煲</p>
<p align="center">¥200</p>
</td>
<td>
<img src="img/small08.jpg" alt="">
<p align="center">电饭煲</p>
<p align="center">¥200</p>
</td>
<td>
<img src="img/small08.jpg" alt="">
<p align="center">电饭煲</p>
<p align="center">¥200</p>
</td>
<td>
<img src="img/small08.jpg" alt="">
<p align="center">电饭煲</p>
<p align="center">¥200</p>
</td>
<td>
<img src="img/small08.jpg" alt="">
<p align="center">电饭煲</p>
<p align="center">¥200</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="img/ad.jpg" alt="" width="100%"></td>
</tr>
<tr>
<td>
<font>热门商品</font>
<img src="img/title2.jpg" alt="">
<table width="100%">
<tr>
<td rowspan="2">
<img src="img/big01.jpg" alt="">
</td>
<td colspan="3">
<img src="img/middle01.jpg" alt="">
</td>
<td>
<img src="img/small08.jpg" alt="">
<p align="center">电饭煲</p>
<p align="center">¥200</p>
</td>
<td>
<img src="img/small08.jpg" alt="">
<p align="center">电饭煲</p>
<p align="center">¥200</p>
</td>
<td>
<img src="img/small08.jpg" alt="">
<p align="center">电饭煲</p>
<p align="center">¥200</p>
</td>
</tr>
<tr>
<td>
<img src="img/small08.jpg" alt="">
<p align="center">电饭煲</p>
<p align="center">¥200</p>
</td>
<td>
<img src="img/small08.jpg" alt="">
<p align="center">电饭煲</p>
<p align="center">¥200</p>
</td>
<td>
<img src="img/small08.jpg" alt="">
<p align="center">电饭煲</p>
<p align="center">¥200</p>
</td>
<td>
<img src="img/small08.jpg" alt="">
<p align="center">电饭煲</p>
<p align="center">¥200</p>
</td>
<td>
<img src="img/small08.jpg" alt="">
<p align="center">电饭煲</p>
<p align="center">¥200</p>
</td>
<td>
<img src="img/small08.jpg" alt="">
<p align="center">电饭煲</p>
<p align="center">¥200</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="img/footer.jpg" alt=""></td>
</tr>
<tr>
<td align="center">
<p><a href="#">关于我们</a><a href="#">关于我们</a><a href="#">关于我们</a><a href="#">关于我们</a><a href="#">关于我们</a></p>
<p>Copyright © 2005-2016 惠多多 版权所有</p>
</td>
</tr>
</table>
</body>
</html>