技术体系
一 HTML
1 网页的组成部分
- 内容（结构）：在页面中可以看到的数据。我们称之为内容。一般使用 HTML 技术展示。
- 表现：内容在页面上的展示形式，比如布局，颜色，大小等等。一般使用CSS 技术实现。
- 行为：页面中元素与输入设备交互的响应。一般使用 JavaScript 技术实现。
2 HTML 概述
- Hyper Text Markup Language （超文本标记语言），网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容。
- HTML 文件不需要编译，直接由浏览器进行解析执行。
- 书写规范：大致由 head 和 body 两部分组成。
<html lang="en"> <!-- 页面开始 -->
<head> <!-- HEAD -->
<meta charset="UTF-8">
<title> 我的标题 </title>
</head>
<body> <!-- BODY -->
hello!
</body>
</html> <!-- 页面结束 -->
3 HTML 标签
- 标签名对大小写不敏感。
- 双标签的格式：<标签名> 封装的数据 </标签名>
单标签的格式：<标签名/> - 标签拥有自己的属性，分为基本属性和事件属性。属性必须有值，属性值必须加引号。
- 双标签必须正确关闭，不能交叉嵌套。
- 想显示“转义字符”的问题（比如想打印出左尖括号<），用实体名称解决（对应的实体名称是<）。
<body onclick="alert('警告')"> <!-- 带有事件属性 -->
点击body部分会出现警告 <hr/> <!-- 单标签 -->
<font color="blue"> 蓝色的字体 </font> <!-- 双标签，带有基本属性 -->
</body>
4 常用标签
重点是超链接、表格、表单
<!--标题标签，最大是h1，最小是h6，对齐可以选择 left/ center/ right-->
<h1 align="center"> 标题 </h1>
<!--字体-->
<font color="red" size="7"> 字体 </font>
<!--超链接，可选参数 target （_self 在当前页面跳转，_blank 在新页面跳转...）-->
<a href="www.baidu.com" target="_blank"> 超链接 </a>
<!--无序列表（有序将ul改为ol）-->
<ul>
<li> item1 </li>
<li> item2 </li>
</ul>
<!--图片
img标签是图片标签,用来显示图片
src属性可以设置图片的路径
width属性设置图片的宽度
height属性设置图片的高度
border属性设置图片边框大小
alt属性设置当指定路径找不到图片时,用来代替显示的文本内容
绝对路径的正确格式是: http://ip:port/工程名/资源路径
-->
<img src="./imgs/1.jpg" width="100" height="200"/>
<!--表格
table 标签是表格标签
border 设置表格标签
width 设置表格宽度
height 设置表格高度
align 设置表格相对于页面的对齐方式
cellspacing 设置单元格间距
tr 是行标签
th 是表头标签
td 是单元格标签
align 设置单元格文本对齐方式
b 是加粗标签
如果要实现跨行、跨列，改变 td 的 colspan、rowspan 属性
-->
<table align="center" border="1" width="300" height="300" cellspacing="0">
<tr>
<th>1.1</th>
<th>1.2</th>
<th>1.3</th>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
<!--iframe标签，在原页面之上显示一个小的页面
其中的 name 属性可以作为超链接的 target 属性，点击超链接后将在 iframe 中显示-->
<iframe src="1.html" width="500" height="400" name="abc"></iframe>
<a href="2.html" target="abc"> 超链接 </a>
5 表单与表单的提交
表单类型单独列出，可以使用 table 实现对齐。
<!-- 要顺利提交表单，需要为所有项加上 value 或者 name 属性 -->
<form action="http://localhost:8080" method="post">
姓名：<input type="text" value="默认姓名"/></br>
密码：<input type="password" value="default"/></br>
<!-- name 属性用于分组，同一组的选项互斥-->
性别：<input type="radio" name="sex" checked="checked"/>男 <input type="radio" name="sex"/>女</br>
爱好：<input type="checkbox" checked="checked"/>跑步 <input type="checkbox"/>跳绳</br>
国籍：<select>
<option>--请选择--</option>
<option selected="selected">CHN</option>
<option>USA</option>
</select><br/>
简介：<textarea rows="10" cols="20">默认简介</textarea><br/>
附件：<input type="file"/></br>
<input type="reset" value="重置">
<input type="submit" value="提交">
</form>
- form 标签的 action 属性设置提交的服务器地址，method 属性设置提交的方式 GET(默认) 或 POST
- GET 请求的特点是：
- 浏览器地址栏中的地址是：服务器地址 + ? + 请求参数（请求参数的格式是 name=value&name=value）
- 不安全
- 有数据长度的限制
- POST 请求的特点：
- 浏览器地址栏中只有服务器地址（action的属性值）
- 相对于GET请求要安全
- 理论上没有数据长度的限制
- 表单提交的时候，数据没有发送给服务器的三种情况：
- 表单项没有name属性值
- 单选 radio 、复选 checkbox、下拉列表中的 option 标签 都需要添加value属性，以便发送给服务器
- 表单项不在提交的form标签中
二 CSS
1 语法格式
/* 标签名选择器，样式绑定标签 */
label_name {
property1: val1;
property2: val2;
}
/* id选择器，样式绑定具体的id，id是人为设定的，每个实例不相同*/
#id {
property1: val1;
property2: val2;
}
/* class选择器，样式绑定标签分配的class，可以多个实例绑定一个class */
.class class_name {
property1: val1;
property2: val2;
}
/* 组合选择器，选择器间是并的关系 */
选择器1, 选择器2 ... {
property1: val1;
property2: val2;
}
2 使用方法
<head> <!-- HEAD -->
<meta charset="UTF-8">
<title> my_title </title>
/* 导入已经写好的CSS文件（推荐） */
<link rel="stylesheet" type="text/CSS" href="mycss.css">
/* 或者把CSS写到此处的 style 标签中 */
<style type="text/css">
label_name {
property1: val1;
property2: val2;
}
</style>
</head>