HTML
- 重点知识：图像标签、超链接标签、表格标签、表单标签、其他标签（div、span）
- 重点知识：三种基本选择器、复合选择器、边框（border）、内边距（padding）、外边距（margin）、position：absolute【绝对定位】relative【相对定位】
单标签：<input />
1.html简介
1>. Web 标准构成
- 主要包括结构（Structure）[ HTML ]、表现（Presentation）[ CSS ]和行为（Behavior） [ js ]三个方面
2>. html骨架
- 声明位于文档中的最前面的位置，处在 html 标签之前，此标签可告知浏览器文档使用哪种Html 或 XHTML 规范
- UTF-8则基本包含全世界所有国家需要用到的字符
<!DOCTYPE html> //html是超文本标记语言 <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
3>. 排版标签
①. 标题标签:
①. 标题标签:<h1>最大–<h6>最小
②. 段落标签：<p>
③. 水平线标签：<hr/> (单标签 )
④. 换行标签 ：<br/>(单标签 )
⑤. div标签用来布局的，现在一行只能放一个div
⑥. span标签用来布局的，一行上可以放好多个span
4>. 文本格式化标签
5>.图像标签 [ 掌握 ]
• src:图片的路径
• width和height：单位默认为px（每像素）
• titile：鼠标悬停时显示的内容
• alt:替换文本，图片不显示的时候显示的文字（有些浏览器下不显示）[ 了解 ]
6>. 超链接：[重点掌握]
1. 基本使用
- href：用于指定链接目标的url地址（必须属性）
- target: 设置打开的方式，默认是当前页打开 [ blank:在一个新窗口打开；self：在当前页打开（默认）]
- 当超链接不需要到任何的地址，在href中加上一个# 这是一个超链接
2. 锚点 [ 掌握 ]
<a href="#one">第一集</a> <br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/> <h1 id="one">我就是第一集</h1> <br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/>
7>. 路径的介绍[重点掌握]
1. 绝对路径
.
2.相对路径 → 一个文件相对于另一个文件的位置
- ①.html和图片在一个路径下，可以直接写名称
<img src="b1.jpg" alt="这是一个美女">
②.图片在html的下层目录（在html文件中，使用img文件夹下面的a.jpg）
<img src="img/b1.jpg" alt="这是一个美女">
③.图片在html文件的上层目录
<img src="../b1.png">
8>. 其他的几个标签
1. base 标签
- base可以设置整体连接打开的状态
- base写到之间
- 把所有的链接都默认添加target="_blank".
2.特殊符号
块元素：div就是一个块元素，所谓块元素就是会独占一行的元素 [div h1、h2等 ] 作用:块元素主要用来做页面的布局，内联元素主要用来选中文本设置样式 内联元素: 所谓的内联元素，指的是只占自身大小的元素，不会占用一行 [span、a、img、iframe] 一般情况下只会使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素 a元素可以包含任何元素，除了它本身 p元素里面不能包含任何块元素
2. 表格、列表、表单
1>. 表格 [重点掌握]
- ①. 表格的样式
//设置显示方式:align：left、center、right <table border="1"> <tr> <td><b>班 级</b></td> <td><b>学生数</b></td> <td><b>平均成绩</b></td> </tr> <tr> <td>一班</td> <td>30</td> <td>89</td> </tr> <tr> <td>二班</td> <td>35</td> <td>85</td> </tr> <tr> <td>三班</td> <td>32</td> <td>70</td> </tr> </table>
- ②. th也是一个单元格，只不过和普通的td单元格不一样，它会让自己里面的文字居中且加粗
- ③. 跨行合并: rowspan="合并单元格的个数" ； 跨列合并：colspan="合并单元格的个数"
<table border="1"> <tr> <td colspan="2">1</td> <!-- 跨行--> <td>1</td> </tr> <tr> <td rowspan="2">1</td> <!-- 跨列--> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> </tr> </table>
- ④. 表格标题caption
- ⑤.表格总结
//caption元素定义表格标题，通常这个标题会被居中显示于表格之上 //caption标签必须紧随table标签之后 //这个标签只存在表格里面才有意义，你是风儿我是沙 <table border="1"> <caption>我是表题</caption> </table>
- ⑥. 表格划分结构
1. <thead><thead>：用于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有<tr>标签! 2. <tbody></tbody>:用来定义表格的主体，放数据本体 3. <tfoot></tfoot>:放表格的脚注之类 4. 以上标签都是放在table标签中
2>. 列表
①. 无序列表
<ul> <li>coffee</li> <li>Tea</li> </ul>
②. 有序列表
<ol> <li>coffee<li> <li>Tea<li> </ol>
③. 自定义列表
<dl> <dt>列表标题</dt> <dd>列表内容</dd> <dd>列表内容</dd> </dl>
3>.表单 [重点掌握]
1. form 表单域标签
①. action：规定提交的url页面
②. method：规定提交表单时所用的HTTP方法。默认(get)
③.name：用于指定表单的名称，以区分同一个页面中的多个表单
2. input控件
文本框：type=“text”
密码框：type= “password”
单选框：type= “radio”
复选框：type= “checkbox”
文件上传：type= “file”
普通按钮：type= “button”
重置按钮：type= “reset”
提交按钮：type=“submit”
3.下拉列表：
//<select multiple="multiple" size="2"> 月份：<select name="yf"> <option value="请选择">请选择</option> <option value="一月">一月</option> <option value="二月">二月</option> <option value="三月">三月</option> <option value="四月">四月</option> </select>
4. 文本域
①. <textarea name=”多行文本框名称” cols=”列数” rows=”行数”>
②. 在<textarea><textarea>标签之间可以输入默认值
解释说明： <textarea name="for intance" rows="3" cols="20"></textarea>
5.文件上传
6.按钮
<input type="buttom" value="按钮"> <input type="submit" value="提交"> <input type="reset" value="重置">
