HTML一

1.HTML

超文本标记语言 是一种用于创建网页的标准标记语言
HTML是标签语言

Eclipse中的快捷键：
添加注释：Ctrl + shift+/
取消注释：Ctrl + shift+\

2.HTML标签

1. 标签都是设置在尖括号里的
2. 标签通常是成对出现的。
3. 标签就是一个容器，里面还可以包含其他标签
4. 只有一个的标签叫做空标签，例如hr

3.常用的HTML标签

1. 文本相关标签
   h1-h6 p b i sup（上标） sub（下标）
2. 列表标签
   ol ul li
3. img标签
   src 属性 alt属性
4. 超链接a标签
   href 属性 target属性 name
5. 表格相关标签
   table tr td
   表格合并的属性
6. 表单相关标签

4.块级元素和内联元素

块级：div h1-h6 p table 等
内联：i a等
内联元素不能直接设置宽高，添加float或display可以设置宽高

5. 无序列表的用法

2.

6.相对路径

…/上一级

7.a标签超链接

1. href 属性：跳转资源的url
2. target属性：指定在什么地方打开超链接的内容 _self（默认：在当前页面打开） _blank(新页面打开）
3. name属性：设置锚点

<p>
<a href="#C4">参见第四章</a>
</p>

<p>
<h2>第一章</h2>
<p>本章解释了 ba bla bla</p>

<h2>第二章</h2>
<p>本章解释了 ba bla bla</p>

<h2>第三章</h2>
<p>本章解释了 ba bla bla</p>

<h2><a name="C4">第四章</a></h2>
<p>本章解释了 ba bla bla</p>

<h2>第五章</h2>
<p>本章解释了 ba bla bla</p>

8.表格

用途：用于布局，显示信息
caption：标题
th ：居中加粗显示

	<table border="1px" width="500px">
		<caption>学生一览表</caption>
		<tr>
			<th>学号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>专业</th>
		</tr>
		<tr>
			<td>1001</td>
			<td>zhang</td>
			<td>男</td>
			<td>计算机</td>
		</tr>
		<tr>
			<td>1002</td>
			<td>li</td>
			<td>女</td>
			<td>日语</td>
		</tr>
	</table>

合并边框：横向合并列colspan，纵向合并行 rowspan
表格边框合并：border-collapse:collapse;

9.表单

作用：收集用户信息，多用于登录页面或注册页面
表单项：文本框 密码框 单选 复选 提交按钮
form标签：

• action属性：规定当提交表单时向何处发送表单数据
• type属性：表单输入项目的类型，默认是type=“text” 文本框
• name属性： 表单输入项目的名称 即传递参数的名字
  https://www.baidu.com/?name=cindy&pwd=232323
• id属性：唯一性，方便JavaScript快速选择标签而设定
• value属性：表单输入项目的默认值，一般设置到单选框和复选框
• checked：设置单选框和复选框的选择状态

label 标签 的for属性规定label和那个表单元素绑定
显示联系：label标签的for属性关联表单项目的Id属性

<label for="name">用户名</label>
			<input  name="name" id="name">

隐式联系：

<div>
			<label>性别</label>
			<label>
				男<input type="radio" name="sex" value="male">
			</label>
			<label>
				女<input type="radio" name="sex" value="female">
			</label>
			
		</div>

单选框

• a. 一组单选框需要设置相同的name属性
• b. 选择某个单选框的值，由value属性决定
• c. 设置单选框的默认选择效果用checked属性

下拉列表

• • select标签，option标签 下拉列表的效果
• name，Id属性同上
  https://www.baidu.com/?name=&pwd=&sex=male&jiguan=liaoning

<div>
			<label for="jiguan">籍贯</label>
			<select name="jiguan" id="jiguan">
				<option value="liaoning">辽宁</option>
				<option value="jilin">吉林</option>
				<option value="heilongjiang">黑龙江</option>
			</select>
		</div>

多选框

<div>
			<label>爱好</label>
			<label>
				唱 <input type="checkbox" name="hobby" value="sing">
			</label>
			<label>
				跳 <input type="checkbox" name="hobby" value="dance">
			</label>
			<label>
				rap <input type="checkbox" name="hobby" value="rap">
			</label>
		</div>

文本域

<div>
			<label for="tips">备注</label>
			<textarea rows="4" cols="30" name="tips" id="tips"></textarea>
		</div>
		<div>
			<input type="submit" value="提交">
			<input type="reset" value="重置">
		</div>