预备知识
web学习推荐网站:
W3C: http://www.w3school.com.cn/
MDN: https://developer.mozilla.org/zh-CN/
网页是由网页元素组成的 ， 这些元素是利用html标签描述出来，然后通过浏览器解析，就可以显示给用户了。
HTML 指的是超文本标记语言，所谓超文本，有2层含义：
- 因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制）
- 不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。
web标准：结构（structure html），表现（presentation css），行为（behavior js）
Web标准不是某一个标准，而是由W3C组织和其他标准化组织制定的一系列标准的集合。
<!DOCTYPE html>文档类型声明标签，告诉浏览器这个页面采取html5版本来显示页面
<html lang="zh-CN">告诉搜索引擎这是一个中文网站，页面采取中文显示
<meta charset="UTF-8">必须写，采取UTF-8编码方式来保存文字。UTF-8 万国码 基本包含全世界所有国家需要用到的字符。如果不写可能会出现乱码。HTML骨架：
<!DOCTYPE html> <html lang="en"> <head><!-- 表示头部信息，一般包含三部分内容：title标签、css样式、js代码--> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body><!--body标签是整个html页面显示的主题内容--> ... </body> </html>
常用标签
标题标签：
<h1>-<h6>(重要性依数字逐级递减) h：head
标题独占一行且加黑加粗
段落标签：
<p>``</p> p:passage
- 文本在一个段落中会根据浏览器窗口的大小自动换行
- 段落与段落之间保有空隙
换行标签：
<br />或<br> br:break
<br />是个单标签<br />标签只是简单的开始新的一行，跟段落不一样，段落之间会插入一些间距
文本格式化标签：
- 加粗：
<strong></strong>或<b></b> - 倾斜：
<em></em>或<i></i> - 删除线：
<del></del>或<s></s> - 下划线：
<ins></ins>或<u></u>
更推荐使用前一组标签，语义更强烈
<div>和<span>标签：
<div>和<span>标签没有任何语义，他们就是一个盒子，用来装内容
<div></div>用来布局（纵向），一行只能放一个<div>，大盒 div：division<span></span>用来布局（横向），一行可以多个<span>,小盒子
图像标签
<img src="图像URL" />img：image src：source
- src 图片路径 为必须属性
若图像URL为文件名，则该文件必须与html页面在同一个目录
URL也可以是链接 - alt 替换文本 图像不能显示时显示替换文本
- title 提示文本 鼠标放在图像上时显示提示的文字
- width 像素 设置图像的宽度
- height 像素 设置图像的高度 （一般只修改宽度或高度中的某一个属性，另一个会等比例缩放）
- border 像素 设置图像的边框粗细
- 图像标签和路径
相对路径：以引用文件所在位置为参考基础 分为三级：
同一级路径（url=”文件名”） 下一级路径（/） 上一级路径（../）
超链接标签
<a></a>a:anchor
链接的语法格式：<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
herf属性：用于指定链接目标的url地址（必须属性）当标签用了herf属性时他就有了超链接的功能
target属性：用于指定链接页面打开的方式，其中_self为默认值是在当前窗口打开，_blank为在新窗口打开
ifarme标签可以在页面上开辟一个小区域显示一个单独的页面
iframe和a标签组合使用
在iframe标签中使用name属性定义一个名称
在a标签的target属性上设置iframe的name属性值
eg：
<!-- 点击yyy.html链接，在当前页面开一个宽500高400的小窗跳转到页面xxx.html--> <iframe scr="xxx.html",width="500" height= "400" name = "abc"></iframe><br/> <a href = "yyy.html" target="abc"> yyy.html</a>
- 链接分类：
- 外部链接：外部链接地址一定要写为http：//网址 的形式
- 内部链接：网站内部页面之间的相互链接，直接链接内部网页名称即可
- 空连接：如果当时没有确定链接目标时即可用”#”来定义href属性 eg:
<a href="#">首页</a> - 下载链接：如果href里面地址是一个文件或压缩包，那么点击超链接会下载这个文件
- 网页元素链接：在网页中的各种网页元素，如文本，图像，表格，音频，视频等都可以添加超链接
- 锚点链接：点击链接，可以快速定位到同一页面中的某个位置
<1 在链接文本的href属性中，设置属性值为 #名字 的形式，如：<a href="#two">第二集</a>
<2 找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id="two">第二集</h3>
注释：
<!--需要注释的语句--> 快捷键：ctrl+/
常用特殊字符：
| |空格号 | | nbsp：Non-breaking space |
|: |: :|: :| :|
| < | 小于号| < | lt:less then |
| > | 大于号 | > | gt:greater then |
注：html中，如果用空格键产生空格，空格不会累加，只会显示一个空格
在html5中单标签可以不写/ eg<br>,<img src="url">
表格标签
- 基本语法
要填的数据
…
<table></table>用来定义表格的标签<tr></tr>用来定义表格中的行，必须嵌套在<table>标签中 tr:table row<td></td>用来定义普通单元格，必须嵌套在<tr>标签中 td：table data<th></th>用来定义表头单元格，突出重要性，表头单元格中的文字会加粗居中显示 th：table head
表格属性（不常用，一般通过css写）
属性名 属性值 描述 align left center right 表格在页面中的的位置 border 1，0 表格是否有边框 cellpadding 单元格中数据到单元格边框的距离 cellspacing 表格格边框与表格边框之间的距离 表格结构标签
一般表格较长时用表格结构标签使代码结构分明
<thead></thead>:用于定义表格的头部，<thead>内部必须有<tr>标签，一般是位于第一行<tbody></tbody>:用于定义表格的主体，主要用于放数据本体- 以上标签都是放在
<table></table>标签中
- 合并单元格方式:
- 跨行合并：rowspan=”合并单元格的个数”
- 跨列合并：colspan=”合并单元格的个数”
- 合并单元格三部曲：
1> 先确定是跨行还是跨列合并
2> 找到目标单元格，在单元格标签中写上合并方式=合并的单元格数量 eg：<td colspan="2"></td>
3> 删除多余的单元格
列表标签
- 无序列表（重点）
基本语法格式：
- 列表项1
- 列表项2
- 列表项3
…
- 无序列表的各个列表项之间没有顺序级别之分，是并列的
<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或文字的做法是不被允许的<li>与</li>之间相当于一个容器，可收纳所有元素- 无序列表会有自己的样式属性，但在实际使用时，我们会用css来设置
- 有序列表
基本语法格式：
- 列表项1
- 列表项2
- 列表项3
…
- 有序列表的各个列表项之间有顺序级别之分
<ol></ol>中只能嵌套<li></li>,直接在<ol></ol>标签中输入其他标签或文字的做法是不被允许的<li>与</li>之间相当于一个容器，可收纳所有元素- 有序列表会有自己的样式属性，但在实际使用时，我们会用css来设置
- 自定义列表
- 列表项1
- 列表项2
- 列表项3
- 列表项1
- 列表项2
- 列表项3
…
…
…
<dl></dl>中只能嵌套<dt></dt>和<dd></dd>,直接在<dl></dl>标签中输入其他标签或文字的做法是不被允许的<dd>标签中包含数据与<dt>标签中包含的数据相关
表单标签
- 在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成
- 表单控件：
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。 - 提示信息：
一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。 - 表单域：
他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
- 表单input控件（重点）
语法：
<input type="属性值" value="">（input标签为单标签）type属性
value 默认的文本值
有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置。name属性
name表单的名字， 这样，后台可以通过这个name属性找到这个表单。 页面中的表单很多，name主要作用就是用于区别不同的表单。
1>name属性后面的值，是我们自己定义的。
2>radio中name属性需一致以实现多选一checked属性表示默认选项，打开html页面就选中
一般将表单放在表格标签中使表单格式更工整。
lable标签
作用：当我们鼠标点击 label标签里面的文字时， 光标会定位到指定的表单里面
用法：
- 第一种用法就是用label直接包括input表单。
适合单个表单选择
2. 第二种用法 for 属性规定 label 与哪个表单元素绑定。
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
textarea控件(文本域)
语法：
<textarea cols="" rows=""> 文本内容 </textarea>作用：
通过textarea控件可以轻松地创建多行文本输入框.
cols=”每行中的字符数” rows=”显示的行数” 我们实际开发不用
select下拉列表
目的:
如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表.
语法:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
注意：
<select>...</select>中至少包含一对 option- 在option 中定义selected =”selected”时，当前项即为默认选中项。
form表单域
- 目的：
在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。 - 语法:
<form action="url地址" method="提交方式" name="表单名称"></form> - 各种表单控件
常用属性:属性 属性值 作用 action url地址 用于指定接收并处理表单数据的服务器程序的url地址。 method get/post 用于设置表单数据的提交方式，其取值为get或post。 name 名称 用于指定表单的名称，以区分同一个页面中的多个表单。
- GET请求特点：
- 浏览器地址栏的地址是：action属性[+?+请求参数]
- 请求参数的个数是：name=value&name=value
- 不安全
- 有数据长度限制
- 浏览器地址栏的地址是：action属性[+?+请求参数]
- POST请求特点:
- 浏览器地址栏中只有action属性值（服务器地址）
- 相对于GET请求较安全
- 理论上没有数据长度限制
建议将单选、多选（下拉列表中的option标签）标签中的value属性以及表单项的name属性都赋值，表单项包含在提交的form标签中，以便将数据都发送给服务器。
