一、 Web -网页开发
1. 网页是基于浏览器的应用程序
B/S : Browser/Server 浏览器与服务器交互模式 C/S ：Client/Server 客户端与服务器交互
2. 组成
1. 浏览器
1. 代替用户发请求（用户代理） 2. 解析数据并呈现给用户
2. 服务器
1. 存储数据 2. 处理并响应请求
3. 协议
通信协议，规范数据在传输过程中以何种形式传递 http(s) : HyperText Transfer Protocal 超文本传输协议
3. 产品
1. 浏览器
Chrome - Google IE / Edge - Microsoft Safari - Apple FireFox - Mozilla Opera - Opera 引擎 ： 渲染引擎：关系整个页面的渲染 JS引擎：对JS代码的处理
2. 服务器
Apache Tomcat IIS - Internet Information Service Nginx
二、 HTML介绍
1. 超文本标记语言（HyperText Markup Language）
是浏览器能够识别和解析的语言，通过标签的形式构建页面结构和填充内容
2. 标签
也称为标记或元素，标记内容 语法 ：标签以<>为标志，标签名不区分大小写（建议小写） 分类 ： 双标签 ：有开始有结束，成对出现 单标签 ：只有开始标签，没有结束标签
3. 使用
1. 网页文件都以.html 或 .htm 为后缀
2. 添加网页基本结构
<!doctype html>//文档类型声明
<html> //文档开始
<head> //文档头部
<title>网页标题</title>
<meta charset="utf-8"> //字符编码
</head>
<body> //文档主体
</body>
</html>//文档结束
3. 标签嵌套
在双标签中嵌套添加其他标签，称为标签嵌套 1. 外层元素称为父元素，内层元素称为子元素 2. 多层嵌套中，外层元素称为祖先元素，内层元素称为后代元素 (祖先元素) (祖先/父元素) html -> head -> title (直接子元素) (间接子元素) 3. 兄弟元素，同级元素之间称为兄弟关系 head body 兄弟关系 meta title兄弟关系
4. 单标签与标签属性
1.标签的闭合以 / 为标志，单标签只有开始没有结束，可以书写为 ：
<meta></meta>
手动在末尾添加/表示闭合
2.标签属性 由属性名和属性值组成，属性值使用"" / ''表示，书写在开始标签中，使用 空格与标签名隔开，用于设置当前标签的显示内容或者修饰显示效果 同一个标签中可以添加几组标签属性，使用空格间隔 示例 ： <meta charset="utf-8"> <img src="" width="" height="">
5. HTML语法规范
1. 标签名不区分大小写 <html> <HTML> <Html> 建议全小写 2. 双标签如果缺少闭合，不报错，自动添加闭合标签 3. 标签名书写有误，不报错，对标签的解析会出现问题 4. 适当缩进和注释增加代码的可读性 注释 ： <!-- 注释内容 --> 注意 ：注释不能嵌套使用
三、常用标签
1.head中常用标签
字符集设置，网页标题设置，选项卡图标设置
2.body中常用标签
1）~ 4）见代码02-fontTags.html
1）标题
2）段落
3）普通文本
4）格式标签
5）图片与超链接 （见03-img.html）
1.图片
<img src="">
默认按照原始尺寸显示 标签属性： width/height:手动调整图片大小，取像素值，如果某个方向缺省 ，图片会等比例拉伸。 title:设置图片标题，鼠标悬停在图片上方时显示 alt:设置图片加载失败时的提示文本 2.超链接 通过用户点击，能够跳转至其他的资源文件 <a href="">百度</a> 标签属性： href 必填，设置目标文件的URL target 设置目标文件的打开方式，默认为self,在当前窗口打开；可设置 为blank表示新建窗口打开 特殊取值： href="" 为空会造成页面刷新 href="#" 不刷新页面,但是修改当前页面的URL href="javascript:void(0)" 阻止超链接默认的跳转行为，可以自定义添加
6）容器标签
<div></div>用于页面结构的划分，结合CSS实现网页基本结构和布局
7）列表
1.有序列表（ordered list）
<ol>
<li>list item 列表项</li>
<li>list item 列表项</li>
<li>list item 列表项</li>
</ol>
2.无序列表（unordered list）
<ul>
<li>list item 列表项</li>
<li>list item 列表项</li>
<li>list item 列表项</li>
</ul>
3.列表嵌套 在列表中嵌套添加内层列表，常见于下拉菜单。注意使用父子关系的嵌套 例：
<li>
<ol>
<li></li>
</ol>
</li>
8）表格（见05-table.html）
通过结构化的行和单元格显示数据或辅助排版 标签：
<table></table>:外围结构标签
<tr></tr>:table row 表格中的行 <td></td>:table data 行中的单元格 单元格合并：（见06-colspan.html） 属性只能添加在单元格上 跨列合并：colspan="3" 包含自身在内合并3个单元格 跨行合并：rowspan="4" 包含自身在内合并4个单元格 注意：一旦发生单元格合并，删除多余的单元格，保证表格结构 表格行分组标签： 可以将表格中的若干行划分为一组，表示表头，表尾，表格主体。默认情况下，所有的行都会自动加入表格主体中<tbody></tbody>. 表头行分组：<thead></thead> 表尾行分组：<tfoot></tfoot> 表格主体：<tbody></tbody> th标签的使用： th与td用法一致，表示单元格，自带加粗与居中效果
9）表单
采集用户信息并且提交给服务器 1.组成：表单元素和表单控件 2.表单元素： 表单负责发送数据
<form action="" method="" enctype="">
表单控件
</form>
标签属性： action:设置数据的提交地址 method:设置数据的提交方式，默认使用get提交，涉及二进制数据或加密数据必须使用post方式提交 enctype:设置数据传输时的编码类型。默认编码类型对应get方式，将数据转换成字符串以键值对的形式拼接在URL后面，携带传输；涉及二进制数据提交，必须指定post，同时设置编码类型"multipart/form-data".
3.表单控件(见01-form.html)：
负责收集用户信息或提交功能，重置，普通按钮 分类：
1.文本框与密码框
<input type="text"> <input type="password">
标签属性： type:指定控件类型，必填 name:设置控件名称，跟随数据一起发送，必填 value:设置或读取控件的值 placeholder:设置输入框的提示文本 maxlength：设置可输入的最大字符数 readonly:设置输入框只读
2.单选按钮和复选按钮
<input type="radio"> 单选钮 <input type="checkbox"> 复选钮
注意： 1）一组按钮的控件名称必须保持一致 2）必须指定控件的值，最终提交给服务器 3）设置checked表示默认选中 4）“label for id” 实现控件与文本的绑定
3.文件选择框
二进制数据只能通过post方式提交，同时设置编码类型为 "multipart/form-data"
4.下拉选择框（了解）
<select>
<option>河北</option>
<option>河南</option>
<option>山东</option>
</select>
5.功能按钮
1）提交按钮：<input type="submit"> 2）重置按钮：<input type="reset"> 3）普通按钮：<input type="button">需要自定义功能 4）按钮标签：点我，书写位置不同，功能不同。 表单中书写：等价于submit
扫一扫
1319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
