1.html简介
1.1 什么是html?
html是一种超文本标记语言，网页语言
** 超文本：超出文本范畴，使用HTML可以轻松实现
** 标记：HTML所有操作都是通过标记实现的，标记就是标签，例：<标签名称>
** 网页语言
1.2 操作规范（遵循）
（1）一个HTML文件开始标签和结束标签 …
定义一个java方法{ }
（2）HTML包含两部分内容
①设置相关信息
②显示在页面上的内容都写在body里面
（3）绝大多数标签有开始标签也有结束标签，
也有几个只有开始标签没有结束标签的。
例如 换行</br>,水平线</hr>,图片<img/>
(4) html代码是不区分大小写的
2.html标签，元素，属性
2.1. 标签嵌套
2.2 标签和属性
3.文件结构，字符与编码
3.1 文件结构
<!DOCTYPE html>
<html lang="en">//lang属性:搜索引擎 en英文，zh中文
<head>
<meta charset="UFT-8">
<title> </title>
</head>
<body>
</body>
</html>
3.2 字符与编码
4.标签（I）h1-h6,p,br,pre,span,hr
4.1 标题h1-h6
<h1>标题内容</h1> //h1至h6字体依次减小
4.2 段落p
<p>这是一个段落，每个段落自动换行。</p>
<p>这是一个段落，每个段落自动换行。</p>
<p>段落内部文字忽略连续 空格，
也不会显示空行，且不会换行</p>
效果如图：
4.3 段内换行br
**单独出现的标签，直接结束
<p>这是一个段落。<br />注意“/”的位置是在后面</p>
效果如图：
4.4 空格字符
<body>
<p>段落内部文字忽略连续 空格<p/>
<body/>
效果如图：
4.5 预留格式pre
**定义预格式化的文本，文本的空格和换行符会被保留
**在pre标签里面是怎么样的显示就是怎么样的
4.6 行内组合span
**组合行内元素，以便通过css样式来格式化
4.7 水平线hr
<p>正文段落</p>
<hr/>
<p>正文段落</p>
效果：
4.8 注释
格式： <!--注释内容-->
5.标签（II）超链接
<a href = "网址">文字或图片</a> //基本格式
target属性： ①_blank:在新页面打开 ②_self:当前窗口打开
例如：
5.1 链接到本站点其他网页
<a href = "news.html">新闻</a>
5.2 链接到其他站点
<a href = "http://www.baidu.com">百度一下</a>
5.3 虚拟超链接
<a href = "#">版块</a>
此时鼠标悬停在文字上，鼠标变小手，但是单击不会跳转
6.标签（III）图片标签
6.1基本格式
<img src="w3school.gif" alt="w3c" /> //src属性：路径+文件名
6.2绝对路径与相对路径
7.标签（IV）div,ul,ol,table
7.1 区域标签div
<div align="center">
<h1>web 前端开发</h1>
<p>html</p>
<p>css</p>
<p>JavaScript</p>
</div>
效果如图：
7.2无序列表 ul,li
7.3有序列表 ol,li
7.4表格 table tr td
<table>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</table>
效果如图：
7.5表头单元格
8.标签（V）form,input,selec,textarea
8.1表单form
<form action="数据处理网页">
表单元素
</form>
8.2 文本框，密码框input
<form>
<input type="text|password"/> //文本框用text,密码框用password
</form>
举例：
<form>
账户：<input type="text" name="userName">
<br/>
密码：<input type="password" name="userName"/>
</form>
效果：
8.3提交按钮input——submit
**按钮：提交按钮，重置按钮
<form>
姓名：
<input type="text" value="" name="myName">
<input type="submit" value="提交" name="submitBtn"/>
</form>
//type :submit
//value:按钮显示的文字
效果如图：
8.4重置按钮input——reset
**type值:reset
<form>
爱好：
<input type="text">
<input type="submit" value="确定" />
<input type="reset" value="重置" />
</form>
效果如图：
8.5单选框和复选框input——radio或checkbox
**单选框：只能选一项
**复选框：任意选多项
基本格式如下：
<form>
<input type="radio|checkbox"
value="值" name="名称" checked="checked">
</form>
//checked:当checked="checked"时，该选项被默认选中
举例：
<form>
性别：
男 <input type="radio" value="boy" name="gender" checked="checked" />
女 <input type="radio" value="girl" name="gender" />
<br/>
爱好：
<input type="checkbox" value="1" name="music" checked="checked">音乐
<input type="checkbox" value="2" name="sport" >体育
<input type="checkbox" value="3" name="reading" >阅读
</form>
效果如图：
8.6 下拉列表框select option
<select>
<option>选项1</option>
<option selected="selected">选项2</option>
</select>
// selected="selected":被选择的那项，默认显示的那项
效果如图：
8.7 文本域
<textarea rows="行数" cols="列数">文本内容</taxtarea>
举例：
<form>
个人简介：<br/>
<textarea cols="50" rows="10">
在这里输入内容
</textarea>
<br/>
<input type="submit" value="确定" />
<input type="reset" value="重置" />
</form>
效果如图：
9.常用的快捷键(sublime)部分也适用于其他软件
1 分屏：alt+shift+数字 分成多少屏
2 折叠代码：点击左侧数字
3.ctrl+D选一个单词 ctrl+L选一行
4.缩进：①选择代码
②ctrl+[ 或者 ]
5.注释：①选择代码
②Ctrl+/
③撤销操作：ctrl+shift+/
6.扩展操作
例如：①p{段落内容}
②tab键后变成<p>段落内容</p>
7.图片扩展操作
img[src=logo.jpg]+tab=<img …>
8.标签嵌套
p>span + tab = <p><span></span></p>
9.同级标签的添加
p>img+a
<p><img src="" alt=""><a href=""></a></p>
10.标签的分组
（div>p）+ (div>img)
<div>
<p></p>
</div>
<div>
<img src="" alt="" />
</div>
11.快速生成多个元素
ul>li*3 + tab
扫一扫
4313
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
