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>
结果显示：
1441
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
