Web前端开发介绍
1.Web概述
Web开发技术分为服务器端开发技术与客户端开发技术也就是Web前端开发技术,其中客户端开发技术中用到的语言有HTML,CSS,JAVASCRIPT,DOM,BOM,AJAX,JQuery等。
2.Web起源
1984年蒂姆伯纳斯李创造了世界上第一个万维网导航站点,世界上第一个网站
3.Web的特点
1.易导航和图形化界面。
2.与平台无关。
3.分布式结构。
4.动态性。
5.交互性。
4,Web工作原理
首先用户通过internet直接访问Web服务器,基于TCP/IP协议,客户端与服务端通过互联网建立连接后发出请求信息,服务端向其发送响应信息,随后如果断开连接后四次挥手结束连接。
5.URL介绍
URL统一资源定位器可以理解为网址。
构成如下
协议类型:
//服务器地址(端口号)/路径/文件名
例子:
http://www.westos.org/bbs/index.html
HTML网页结构
1.HTML网页结构:HTML即是超文本标记语言,通过使用标记标签来描述页面文档结构和表现形式的一种语言,再由浏览器进行解析,然后把结果展示在网页上。
超文本指的是超连接
标记值的是标签
(1) HTML文件用编辑器打开显示的是文本,可以用文本的方式编辑。
(2) HTML文件用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。
2.HTML基本结构
文档声明:
<! DOCTYPE HTML>
< html >
< head >
< /head >
< body >
< /body >
< /html >
3.HTML文档类型
目前常用的两种文档类型是xhtml1.0和html5.0
4.HTML文档规范与注释
xhtml制定了文档的编写规范,html5可部分遵守,也可全部遵守,具体开开发要求。
- 所有标签必须小写
- 所有的属性必须用双引号括起来
- 所有标签必须闭合
- img必须要加alt属性(对图片的描述)
html文档代码中可以插入注释,注释是对代码的说明和注释,注释内容是不会显示在页面上,html代码中
插入注释的方法是:
< !-- 这是一段注释-- >
HTML标签
1.标题标签:
-
< h1 >一级标题
-
< h2 >二级标题
-
< h3 >三级标题
-
< h4 >四级标题
-
< h5 >五级标题
-
< h6 >六级标题
-
2.文本标签: -
< i > … < /i > 斜体
-
< em > … < /em > 强调斜体
-
< b > … < /b > 加粗
-
< strong > … < /strong > 强调加粗
-
< cite > … < /cite > 作品的标题(引用)
-
< sub > … < /sub > 下标< sup >…< /sup >上标
-
< del > … < /del > 删除线
3.换行标签:
- < br/ > 换行
- < p >…< /p >换段
- < hr/ > 水平分割线
4.列表标签:
- < ul >…< /ul > 无序列表
- < ol >…< /ol > 有序列表其中type类型值:Aali1 start属性表示起始值
- < li >…< /li > 列表项
- < dl >…< /dl > 自定义列表
- < dt >…< /dt > 自定义列表头
- < dd >…< /dd > 自定义列表内容
综合练习步骤:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签</title>
</head>
<body>
<b>四大名著</b><br/>
<ul>
<li>三国演义</li>
<li>水浒传</li>
<li>红楼梦</li>
<li>西游记</li>
</ul>
<b>把大象放进冰箱的步骤</b>
<hr/>
<ol>
<li>打开冰箱</li>
<li>把大象放进去</li>
<li>把冰箱门关上</li>
<li><del>把大象取出来</del></li>
</ol>
</body>
</html>
5.div与span标签:
< div >…< /div > 常用于组合块级元素,以便通过CSS来对这些元素进行格式化。
< span >…< /span >常用于包含的文本,您可以使用CSS对它定义样式,或者使用JavaScript对他进行操作。
6.图片标签:
< img >标签定义HTML页面重的图像。有两个必需的属性:src和alt。
- src:图片名以及url地址
- alt:图片加载失败时的提示信息
- tittle:文字提示属性
- width/height:图片宽度/高度
7.超链接标签
< a href=’’ ‘’ >…< /a > 超链接标签
属性:
href:必须,指的是链接跳转地址;
target:表示链接的打开方式。
_blank新窗口
_self 本窗口(默认)
title:文字提示属性
练习示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今日头条</title>
</head>
<body>
<h1 style='color:red'>NBA板块</h1><br/>
<hr>
<img src="./nba.jpg" alt ="图片加载失败" width="500px" height="200px"></body>
<ul>
<li><a href="NBAnews.html">无意外!鹈鹕用状元签选中锡安</a></li>
<li><a href="NBAnews.html">莱昂纳德3年1.12亿加盟快船</a></li>
<li><a href="NBAnews.html">威少保罗互换东家</a></li>
<li><a href="NBAnews.html">中国男篮拉斯维加斯夏季联赛获得一胜三负战绩</a></li>
<li><a href="NBAnews.html">安东尼.戴维斯4年1.62亿加盟湖人</a></li>
<li><a href="NBAnews.html">克莱.汤普森与勇士顶薪续约</a></li>
</ul>
</body>
</html>
结果显示:
超链接标签——锚点链接
1.定义一个锚点:
< a id=‘a1’ >< /a >百度一下< a name=‘a1’ >< /a >
2.使用锚点:
< a href="#a1" >跳到a1处< /a >
8.表格标签
在HTML文档中,广泛使用表格来存放网页上的文本和图像;
标签:
- 表格标签:table
- 行标签:tr
- 单元格(表示列的概念):td
- 表头:th:加粗并且居中
- 表格标题:caption
-标签合并:
行合并:rowspan
列合并:colspan
标签常用属性:
border:边框
width:宽度
height:高度
algin:对齐方式
center,left,right
练习示例:
<head>
<meta charset="UTF-8">
<title>课程表</title>
</head>
<body>
<table border="lpx" align="center" width="500px" style="text-align: center;background: fuchsia;" >
<caption><t1><b>课程表</b></t1></caption>
<tr>
<td><a>项目</a></td>
<td colspan="5"> <a>上课</a></td>
<th colspan="2"><a>休息</a></th>
</tr>
<tr>
<td>星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>计算机</td>
<td rowspan="4">休息</td>
</tr>
<tr>
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
</tr>
<tr>
<td>化学</td>
<td>语文</td>
<td>体育</td>
<td>计算机</td>
<td>英语</td>
<td>计算机</td>
</tr>
<tr>
<td>政治</td>
<td>英语</td>
<td>体育</td>
<td>计算机</td>
<td>英语</td>
<td>计算机</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>计算机</td>
<td rowspan="2">休息</td>
</tr>
<tr>
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
</tr>
</body>
</html>
结果显示:
9.表单标签:
常用属性:
- action属性:提交的目标地址
- method属性:提交方式:get(默认)和post
- get方式:URL地址栏可见,长度受限制,相对不安全
- post方式:URL地址不可见,长度不受限制,相对安全
表单项标签:
< input >表单项标签input定义输入字段,用户可在其中输入数据。在HTML5中,type属性有很多新的值。
type属性:表示表单项的类型:值如下:
- text:单行文本框
- password:密码输入框
- checkbox:多选框 注意要提供value值
- radio:单选框 注意要提供value值
- file:文件上传选择框
- button:普通按钮
- submit:提交按钮
- image:图片提交按钮
- reset:重置按钮,还原到开始(第一次打开时)的效果
- hidden:主表单隐藏域,要是和表单一起提交的信息,但是不需要用户修改
下拉列表标签:
< selec t>…< /select > 标签创建下拉列表。
name属性:定义名称,用于存储下拉值的
size:定义菜单中可见项目的数目,html5不支持
disabled 当该属性为 true 时,会禁用该菜单。
multiple 多选
< option >… < /option > 下拉选择项标签,用于嵌入到标签中使用的;
*value属性:下拉项的值
*selected属性:默认下拉指定项.
综合示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆页面</title>
</head>
<body>
<form action="#" method="post">
<table width="%50" align="center">
<tr>
<td colspan="2" style="text-align:center"><h3>用户登录</h3></td>
</tr>
<tr>
<td style="text-align:left">用户名</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td style="text-align: left">密码</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td style="text-align: left">性别</td>
<td style="text-align: left">
<input type="radio" name="gender" value="1">男
<input type="radio" name="gender" value="2">女
</td>
</tr>
<tr>
<td style="text-align: left">出生日期</td>
<td style="text-align: left"><input type="date" name="birth"></td>
</tr>
<tr>
<td style="text-align:left">个人简历</td>
<td style="text-align: left"><input type="file" name="interview"></td>
</tr>
<tr>
<td style="text-align:left">个人简历</td>
<td style="text-align: left"><textarea name="info" cols="50" rows="10" placeholder="个人简历填写"></textarea><br/></td>
</tr>
<tr>
<td colspan="2" style="text-align: center"><input type="submit" value="登陆"> </td>
</tr>
</table>
</form>
</body>
</html>
结果显示: