把之前的课程整理记录:
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)