把之前的课程整理记录：
HTML基础：
1、快捷键
Ctrl+c 复制
Ctrl+x 剪切
Ctrl+v 粘贴
Ctrl+z 撤销 返回上一步操作
Ctrl+s 保存
Ctrl+a 全选
alt+tab（windows+tab） 切换
ctrl+tab 软件内部的切换
windows+e 快速打开本地磁盘
notepad+回车 快速打开记事本
F2 重命名
F5 刷新
2、网页介绍
2.1、 网页的组成
网页：文字、图片、按钮、输入框、视频……元素组成
1：html 用来写网页的结构（身体的骨骼）
2：css 网页的美化师（人的衣服）
3：javascript 网页特效与网页交互
2.2、 浏览器
作用：浏览网页（IE、火狐、谷歌、猎豹、safari、opera等）
2.3、浏览器与服务器
浏览器向服务器请求报文，服务器收到后解析响应报文给浏览器。浏览器进行解析，渲染呈现出来。
3、 html
3.1html概念：
Hyper Text Markup Language（超文本标记语言）
超文本：实现网页跳转的文字（超链接）
标记：在网页中做记号（html标签）
3.2html结构
<!doctype html> 告诉浏览器当前文档类型html
<html> 根标签
<head> 定义了头部
<title></title> 网页的名称（标题）
<meta>
</head>
<body></body> 网页的主体（网页中看到的所有信息都放在boby标签中）
</html>
（写的时候快捷！+tab或者html：5+tab）
3.3 html标签关系分类
1：嵌套关系（父与子）
例如：<head>
<title></title>
</head>
2:并列关系（兄弟与兄弟之间）
例如：<head></head>
<body></body>2
3.4 html标签分类
1：双标签
有开始标签，有结束标签 例如：<head></head>
2:单标签
只有开始标签，没有结束标签
4、 开发工具
4.1 常用的开发工具
sublime/webstrom
输入：html：5+tab键或者！+tab键
sublime快捷键使用
Ctrl+L 快速选中
Ctrl+shift+↑（↓） 快速整体移动
Ctrl+h 查找替换
Ctrl+f 快速查找
Ctrl+p 快速定位打开网页
Ctrl+w 快速关闭
Ctrl+shift+d 快速复制
5、 认识html标签
5.1 单标签
文本注释标签：<!-- 文本注释内容--> ctrl+/
横线标签：<hr>
换行标签：<br>
5.2 双标签
1：标题标签 <hn></hn> n:1-6 特点：取值越大，字体越小。切记：没有h7以后的标签
2：段落标签：<p></p>
3：字体标签：<font></font>了解
4：文字加粗：<strong></strong>或者 <b></b>
5：文字斜体显示：<em></em>或者 <i></i>
6：下划线：<ins></ins>或者<u></u>
7：删除线：<del></del>或者<s></s>
5.3 图片标签
<img src="">
src=""属性：图片的名称或者图片的路径
alt=""属性：图片无法正常加载时候，对图片的说明
title=""属性：当鼠标放到图片上显示的文字
width=""属性：设置宽度
height=""属性：设置高度
英文下的符号
6 路径
6.1 相对路径：
1：当前文件和图片在同一文件夹中
src=“”直接写上文件名称
2：当前页面和图片（文件）不在同一文件夹中（图片在另一个文件夹中）
src=“”图片所在文件夹名称+/+图片名称
3：当前文档在一个文件夹中，图片在另一个文件夹中
src=“” ../+图片所在文件夹名称+/+图片名称
6.2 绝对路径
凡是但盘符的路径，都成为绝对路径：
7 超链接
7.1 a 标签
实现网页与网页之间的跳转
<a href="http://www.baidu.com" title="这是百度"></a>
target="_blank" 在新窗口中打开页面
title 鼠标放到超链接上显示的文字
7.2：锚链接
1：在页面中写一个超链接
<a href="#hh"></a>
2: 给任何一个标签id取值和a标签中的 href取值一样
<p id="hh">内容</p>
总结：实现在本页面中跳转
7.3 实现简单的下载功能
直接在a标签中给一个压缩文件，访问如下：
<a href="1.rar">下载</a>
7.4 特殊符号
1：大于号> > 2：小于号< < 3：空格  ；
8 列表
8.1 无序列表
<ul >
<li></li> 列表项
</u>
type属性：type="circle" type="square"
8.2 有序列表
<ol>
<li></li> 列表项
</ol>
type 1、A、a、I、i start 序号从第几开始
8.3 自定义列表
<dl>
<dt></dt>标题
<dd></dd> 用法和li一模一样
</dl>
9.介绍<meta>标签
<meta name="keyword" content=""> keyword 关键字 作用：对搜索引擎友好，实现网站推广。
<meta name="description content=""> description 描述 作用：对搜索引擎友好，实现网站推广（网站优化）
<meta charset="UTF-8"> 作用：当前文档的编码格式
10.表格（table）
结构：<table>定义一个表格
<tr> 定义行
<td></td>定义列（单元格）
</tr>
</table>
width设置宽度；height设置高度；border设置边框；
cellpadding=“”设置文字与td之间的距离；
cellspacing=“”设置td与td之间的距离 默认值为2；
align=“center” left、right 给表格设置，让表格居中，给td设置，让文字居中。
<th></th>设置表格内容标题（表头），用法和td用法一样。
<caption>人员信息表</caption>给表格加标题
table标准结构
<table>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
11.表单（form）
作用：搜集用户信息
<form></form>表单域
表单控件
提示信息
表单结构
<form>
表单控件
</form>
属性：action 指定处理表单信息的程序（如1.php） 属性：method get/post 表单提交方式
get：将我们的表单信息暴露在地址栏中（安全性差）
post：通过后台方式提交给处理程序（安全性比较高）
表单控件
1.输入框<input type="text" >
属性：name 输入框名字
value 获取（存储）数据
maxlength =“”设置最大长度
readonly=“readonly” 只读（不能输入信息）
disabled=“disabled” 控件未激活（不能使用）
2.密码输入框<input type="password">
属性：maxlength=“6” 设置最大长度
readonly=“readonly” 只读（不能输入信息）
disabled=“disabled”控件未激活（不能使用）
3.单选框<input type="radio">
设置默认选中：checked=“checked”
4.多选框：<input type="checkbox">
设置默认选中：checked=“checked”
5.下拉列表框：<select></select>
<option></option>选项
属性：multiple="multiple" 实现多选效果
属性：selected="selected" 设置下拉列表框实现默认选中
6.下拉列表分组显示
<optgroup label="">
<option></option>
</optgroup>
7.多行文框：<textarea></textarea>
属性：cols="30" 用法效果和width一样
rows="10"用法效果和height一样
8.上传控件<input type="file">
9.提交按钮<input type="submit">
10.按钮<input type="botton" value="例如确定”> 此按钮和JavaScript配合使用
11.重置按钮<input type="reset">将表单中的数据恢复到默认值
12.图片按钮<input type="image" src=""> 注意：此按钮和submit按钮都可以提交表单
表单分组控件
<fieldset>
<legend>人员注册信息</legend>
</fieldset>
<label>姓名：</label>
12.标签语义化
作用:让网页结构更合理（对搜索引擎友好）, 便于团队开发和维护
概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）
说白了：什么样的标签干什么样的事，当网页裸奔的时候，结构依然很合理===》标签语义化就很好
1：尽可能少的使用无语义的标签div和span
Div 和 span ====> 网页布局
2：在语义不明显时，既可以使用div或者p时，尽量用p.
3：不要使用纯样式标签，如：b、font、u等，改用css设置
4：需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）
2858
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
