一. web的基础知识
HTML5 是html4.0和xhtml1.0的升级版
html4.0 语法松散 <img>
xhtml1.0 语法严谨 <img/>
HTML5 兼容两种写法
1. web与internet
internet 全球性计算机互联网络
www服务，world wide web 万维网
BBS服务器，论坛
Email 邮箱
telnet 远程登录
web是专注于网站，移动端，微信
2. internet上服务程序的分类
C/S client(客户端)/server(服务器)
例如：王者荣耀，梦幻西游，QQ
B/S browser(浏览器)/server(服务器)
例如：页游，网站
c/s结构和b/s的区别，用户会不会被应用更新带来困扰
3. web的运行原理
基于浏览器和服务器，以及通讯协议来实现数据的传输和展示
web，是运行在internet上的一种应用
internet为web运行提供的网络环境
① 通讯协议,规范了数据是如何打包和传递的
http:// https:// file://
② 服务器
产品：TOMCAT,Apache,IIS
功能:存储数据，接收请求，发送响应，提供后台程序的运行环境,具备一定的安全性
技术:java php, .net , nodejs , python
③浏览器
产品:chrome,firefox,safari,opera,IE
功能:发送请求，接收响应，把数据解析成可视化的图形页面展示给用户看
技术:html js css
二. html快速入门
1. 什么是html
HyperText Markup language
超文本 标记 语言
超文本--有能力的文本
标记--让普通文本变为超文本的格式 <关键字>
语言--有语法
2. html的特点
1.必须以.html或者.htm为后缀
2.由浏览器解析执行（代码按照从上往下，从左往右的顺序执行）
3.用带有尖括号的标记，来表示超文本 <a></a>
4.可以调用js的脚本
3. html的基本语法
①标记
标签，元素，节点，对象
使用<>把关键字变成标签，具备了一些能力，功能
标记的分类
1.双标记（封闭类型标记）
<关键字>内容区域</关键字>
2.单标记(非封闭类型标记，空标记---因为没有内容区域)
<关键字> 或者 <关键字/>
②标记的嵌套
双标记的内容区域部分可以编写其它元素，形成功能的叠加或者结构的嵌套
发生嵌套的元素一定要添加缩进(2个空格)，增加代码的可读性
缩进属于语义要求
③元素的属性和值
用来修饰当前元素，都写在开始的标签中
<关键字 属性1=值1 属性2=值2......>
属性的分类
1.通用属性，所有元素都生效的属性
id 为元素添加唯一标识符，当前页面不能重复
title 鼠标悬停时显示的文本
class css调用类选择器，使用的属性
style css设置内联样式，使用的属性
2.专用属性，只对某些元素生效的属性
3.自定义属性
④注释
不会被解析运行的代码
一般编写代码的解释和思路
<!-- -->
写注释的注意事项
1.注释一定不能写在标签的<>内部
2.注释不能嵌套注释
4. html文档结构
1.文档类型的定义
告诉浏览器，当前这篇html使用h5的语法来编写的，你解析运行的时候，用h5解析
<!DOCTYPE html>
2.网页结构
<html> 表示页面的开始和结束，一个html文件中有且只有一对，必须是根元素
<head></head> 网页的头部，定义网页的全局信息
<body></body> 网页的主体，可视区域
</html>
3. <head></head>是所有定义网页全局信息的容器
<title></title> 页面的标题
<meta /> 定义页面的元数据 元数据就是对某一个事物的描述
<meta charset="utf-8">
<meta name="description" content="页面描述">
<meta name="Keywords" content="页面关键字">
<style></style> css 定义内部样式
<script></script> js 定义js或者调用js文件
<link/> css 引用外部样式
4. <body></body>
专有属性text="red" 设置文本颜色
bgcolor="lightcyan" 设置背景颜色
三. 文本标记
1. 标题
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
特点：1.字号有变化，h1最大，h6最小
2.字体加粗
3.独占一行
4.上下有垂直空间
专有属性：align: 设置文本的水平对齐方式
left(默认)/center/right
2. 段落paragraph
<p></p>
特点：独占一行，上下有垂直的空间
专属属性 align
注意:p标签中不允许嵌套块级元素
3. 水平分割线
<hr> 或者 <hr/>
功能：独占一行，页面上画出一行线
注意：属性值可以不带双引号，推荐加上双引号
属性值是数值，如果省略单位，默认按px解析
专属属性 size 设置高度
color 设置颜色
width 设置的宽度，以px为单位的数字，%是父元素宽度的百分比
align 设置水平对齐方式 left/center(默认值)/right
4. 空格折叠现象
浏览器在解析文本的时候
会把所有的连续的空格和回车，解析成一个空格展示
预格式化标签
<pre></pre>会把元素内容区域中的所有空格和回车保存住，在页面显示
单独成行
项目中很少使用，格式非常不好控制
换行<br>或者<br/>
特殊字符，实体
空格
< <
> >
© ©
® ®
¥ ¥
× ×
5. 文本样式标签
推荐使用带语义的标签
推荐使用带语义的标签
<b></b><strong></strong> 粗体
<i></i><em></em> 斜体
<s></s><del></del> 删除线
<u></u> 下划线
<sup></sup> 上标
<sub></sub> 下标
6. 分区元素
块分区<div></div> 做页面的结构布局时使用
特点，没有样式，单独成行
属性 align=””left/center/right
行分区<span></span> 同一行文本，如果有不同样式，使用span.修饰文本用的
特点，没有样式，与其他文本共用一行
7. 块级元素和行内元素
| 块级元素 | 行内元素 | 行内块元素 |
|---|---|---|
| 独占一行 | 与其他文本和其他行内元素还有行内块共用一行 | 与其他文本和其他行内元素还有行内块共用一行 |
| div p h1~h6 pre | span b strong i em u del s | input |
| 有align属性 | align属性失效 |
四. 图片与超链接
1. 图片的使用
<img src="图片资源路径/url">
2. url
Uniform Resource Locator
统一资源定位符--------------->简称路径
URL的分类
1.绝对路径
2.相对路径
①绝对路径
一个完整的资源路径地址
使用网络资源的时候，都使用绝对路径
网络资源的特点
优点：节省当前服务器的本地存储空间
缺点：资源不稳定
服务器本地资源不可能使用绝对路径，要使用相对路径
②相对路径
相对路径的参照物，是html本身
兄弟关系，直接调用兄弟资源的名称 src="资源名称"
兄弟的儿子 调用兄弟文件夹，使用/进入兄弟文件夹 src="兄弟文件夹/资源名称"
父级的兄弟 使用../进入父亲，直接写兄弟名称 src="../资源名称"
3.img的属性
src="" 引用资源路径
alt="" 资源加载失败时，显示的文本
width=””
height=””
注意，设置的宽高如果不符合图片原始的宽高比例，会出现图片的失真现象。一般宽高只设置一个，另外一个自动适应
4. 超链接
项目中，src还是href都不允许写空的
跳转到其它页面
<a href=""></a>
a标签的其它表现形式
<a href="1.zip">下载</a>
<a href="mailto:aaa@qq.com">发送邮件</a>
<a href="#">回到页面顶部</a> 如果开发的时候不知道要跳转的连接，先用#占位
<a href="javascript:show()">调用js</a>
5. 锚点
在页面中任意位置做一个记号
点击a标签，让页面跳转到这个记号，显示当前的内容
1.定义锚点
html4.0 规定使用a标签定义锚点 <a name="锚点名称"></a>
html5.0 使用任意元素的id当做锚点
2.跳转锚点，使用a标签跳转
<a href="#锚点名称"> </a>
6. a标签的属性
href="" 资源路径
name="" 使用a标签定义锚点时，设置锚点名称
target="" 设置跳转页面的打开方式
_self 默认值，在本页面打开
_blank 在新的选项卡页面打开
五. 表格
1. 表格
原始目的就是为了展示数据
表格后来常用于做布局
现在由于表格加载速度非常慢，所以回顾原始功能，只用来显示数据了
学习中，偶尔还有表格来写布局
<table>
<tr> table row
<td></td> table data
</tr>
</table>
2. 属性
①table
border="1" 设置表格边框
bordercolor="purple" 设置边框颜色
width="200" 设置宽度
height="200" 设置高度
bgcolor="pink" 设置背景颜色
align="left/center/right" 设置table本身的水平对齐方式。与块级元素设置的不同
cellspacing="0" 设置边框与边框之间的距离
cellpadding="20" 设置边框与文本之间的距离
②tr
align="right" 设置当前行文本水平对齐方式 left/center/right
valign="middle" 设置当前行文本垂直对齐方式 top/middle/bottom
bgcolor="" 设置当前行的背景色
③td
align="right" 设置当前行文本水平对齐方式 left/center/right
valign="top" 设置当前行文本垂直对齐方式 top/middle/bottom
bgcolor="" 设置当前单元格的背景色
width=""
height=""
colspan="" 列合并
rowspan="" 行合并
3. table是一种特殊的表现方式
1.某一列变宽时，不同行这一列都会一起变宽（不同行的同一列，宽度相同）
2.某一列变高时，这一行其它列都会一起变高（同一行的所有列的高度相同）
3.表格会把所有内容都一次性读取完，放到内存中
再一次性渲染到页面上
4.表格的尺寸，如果设置的尺寸大，内容小，以设置尺寸为准
如果设置的尺寸小，内容大，以内容为准
PS：浏览器对文本的解析，如果数字或者字符连续，不带空格，不换行
浏览器会认为他是一个完整的单词，不会自动折行
4.不规则的表格
①跨列，列合并
colspan="n" 当前单元格向右合并n个单元格(n包括这个单元格本身)
被合并的单元格要删除
②跨行，行合并
rowspan="n" 当前单元格向下合并n个单元格(n包括这个单元格本身)
被合并的单元格要删除
5. 表格的可选标记(可用可不用)
①表格的标题
必须写在table开始标签的后面
<caption> </caption>
②行/列的标题
th可以替代td
td所有的属性th都可以使用
th的效果，文本加粗，文本居中
6. 表格的复杂应用
①行分组
页面中不会出现行分组的效果
行分组，把某干行，放在同一个组中，方便控制，进行统一管理
如果没有写任何行分组，浏览器会自动把所有tr放入tbody
<table>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
②表格嵌套
表格的所有嵌套都要放在td/th中
六. 列表
table是早期用于做布局，由于加载效率低，所以现在只用于做数据展示
列表现在除了做数据展示外，还做页面布局
1. 列表的组成
1.列表类型
有序列表 <ol></ol> order list
无序列表 <ul></ul> unorder list
2.列表项 <li></li> list-item
2. 属性
①有序列表
type="" 设置列表项的类型
默认值是1，
a A I i
start="" 指定编号开始的位置
②无序列表
type="disc" 默认值，实心小圆点
circle 空心圆
square 实心小方块
none 没有列表标识
3. 列表的嵌套
列表要求，所有被嵌套的内容，必须写在li中
4. 定义列表
定义一个名词或者一项事物，以及对这个名词事物的解释说明
七. 结构标记
使用div做布局，但是代码可读性非常差，，为了增加代码的可读性，h5推出了一套功能和div一模一样的标签
让元素拥有语义
<header></header> 定义网页的头部，或者某个区域的头部
<section></section> 定义网页的主体
<footer></footer> 定义网页的底部，或者某个区域的底部
<nav></nav> 定义导航
<aside></aside> 定义侧边栏
<article></article> 定义与文字相关的部分(评论，回帖)
自己写项目时，推荐使用
八. 表单***
1. form功能
1.提供了可视化的用户输入控件
2.自动收集整理数据，并发送请求（填写参数的控件，必须有name属性）
3.form没有接收响应的能力
要使用ajax来发送请求，并接收响应，需要手动收集数据（不使用name）
总结：form和ajax二选一使用
使用form，控件必须有name属性，来自动收集数据
使用ajax，控件需要手动收集数据，不需要name属性，用id
使用场合：如果需要保存处理响应数据，用ajax
如果不需要处理响应数据，用form
2. form的组成
前端，提供表单控件，与用户交互的可视化控件
后端，表单要提交的接口
3. 表单
<form></form>
1.action="" 定义表单提交是发送的动作(接口url)
如果不写或者没有值，会把请求提交给本页面
2.method="" 定义表单提交的方法
get 默认值，明文提交，提交的内容会显示在浏览器的地址栏。
通过查询字符串(querystring) 后台 req.query 接收
提交的数据有大小限制，最大2KB
向服务器要数据的时候，使用get方法
post 隐式提交，提交的内容不会在地址栏显示，
通过请求主体传递参数 后台 req.body
没有数据大小限制
3.enctype=" " 设置表单提交的数据的格式
application/x-www-form-urlencoded 默认值
允许传递任意字符给服务器
text/plain 允许传递普通字符给服务器
普通字符：不许带有= & * # 等符号
multipart/form-data 可以传递文件+任意字符
4. 表单控件，在form标签中，能够与用户进行交互的可视化标签
1.input元素 基础的9种，h5新出的10种
2.textarea 多行文本域
3.select和option 下拉选择框
4.其它元素
①input 基础9种
1.文本框和密码框
type="text" 文本框 默认值（不写或者写错都会被解析成文本框）
type="password"
属性
maxlength="3" 设置输入的最大字符数
readonly 无值属性，只读，只能看不能改，可以提交
placeholder="" 提示占位符
2.按钮
type="submit" 提交按钮，只有放在form中才具备提交功能
type="button" 普通按钮，调用js
type="reset" 重置，恢复form表单的初始状态
属性：value设置按钮上的文本，而不会提交
<button>提交</button> submit
3.单选按钮/复选按钮
单选 type="radio"
多选 type="checkbox"
name属性除了作为控件的值以外，需要使用name属性来做分组
必须设置value值，不然提交的时候默认是on
属性，默认选中 checked 无值属性
4.文本选择框
type="file"
前提，form的属性method="post" enctype="multipart/form-data"
multiple 无值属性，多选
5.隐藏域
把需要提交，并不想让用户看到数据放入隐藏域中提交
type="hidden"
②文本域
<textarea></textarea>
cols 设置每行输入的个数
row 设置输入多少行
不准确，而且给用户操作的空间巨大
③下拉选择框
<select name="">
<option></option>
......
</select>
属性
select size="6" 默认1，下拉选择框
>1 滚动选择框 取值代表显示的行数
multiple 多选
option 当option没有value时，select的value是选中option的内容区域
有value时，select的value是选中的option的value
selected 默认选中
5 . 其它表单元素
①label
可以使用label替代form中span
与控件进行绑定
<label for="控件id">京东钱包</label>
②为控件分组
<fieldset> 分组
<legend> </legend> 分组的标题
</fieldset>
③浮动框架(不是表单的内容)
在一个html中，引入其他的html
<iframe ></iframe>
src="00_home.html" 引用的html路径
frameborder="0" 设置框架边框为0
width="100%" 设置宽度 100%为父元素宽度的百分比
height="550" 设置高度
scrolling="no" 去除滚动条
6. h5新出的表单控件
①邮箱控件
<input type="email" name="m1">
提交时，验证是否有@，以及@前后是否有字符
②搜索类型的控件
<input type="search" name="s1">
提供一个快速删除内容的小叉叉
③url类型
<input type="url" name="u1">
提交时，验证内容开头为http:
④电话号码类型
<input type="tel" name="t1">
在移动端使用时，激活后，弹出虚拟键盘
⑤数字类型
<input type="number" name="n1">
只允许填入数字，有上下选择的小箭头
⑥范围类型
<input type="range" name="r1">
提供了一个可以选择数字的滑块
⑦颜色类型
<input type="color" name="c1">
提供了一个取色板
⑧日期类型
<input type="date" name="d1">
提供了一个日期选择的控件
⑨月份类型
<input type="month" name="o1">
提供了一个月份选择控件
⑩周类型
<input type="week" name="w1">
提供了一个周控件
7.补充
1.js获取 type=radio 值的方法
<ul>
<li>
<input type="radio" name="radio" value="前台支付 " id="radio" />前台支付 ——如需整晚保留，请预付房费。
</li>
<li>
<input type="radio" name="radio" value="担保支付" id="radio" />担保支付 ——稍后客服人员会致电与您联系，
并确认担保需要的信息。
</li>
</ul>
var chkObjs=null;
var obj=document.getElementsByName("radio")
for (var i=0;i<obj.length;i++){ //遍历Radio
if(obj[i].checked){
chkObjs=obj[i].value;
}
}
alert(chkObjs);
2. js如何获取select下拉框的value以及文本内容
</HEAD>
<BODY>
书籍分类:
<select id="s1" >
<option value="1">教学类</option>
<option value="2"> 技术类</option>
</select>
</BODY>
</HTML>
window.onload = function(){
//首先获得下拉框的节点对象；
var select = document.getElementById("s1");
//1.如何获得当前选中的值？：
var value = select.value;
//2.如何获得该下拉框所有的option的节点对象
var options = select.options;
//注意：得到的options是一个对象数组
//3.如何获得第几个option的value值?比如我要获取第一option的value,可以这样：
var value1 = options[0].value;
//4.如何获得第几个option的文本内容?比如我要获取第一option的文本,可以这样：
var text1 = options[0].text;
//5.如何获得当前选中的option的索引？
var index = select.selectedIndex;
//6.如何获得当前选中的option的文本内容？
//从第2个问题，我们已经获得所有的option的对象数组options了
//又从第5个问题，我们获取到了当前选中的option的索引值
//所以我们只要同options[index]下标的方法得到当前选中的option了
var selectedText = options[index].text;
}
3540
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
