前端复习(一)——HTML
起因:转专业的泪，期末复习，写这个只是方便复习的时候可以看看，没什么太大作用~
基础
- HTML不区分大小写
- 每个标签都有
- id 定义元素的唯一id
- style 规定元素的行内样式
- title 描述元素的额外信息
- class 为html定义一个或多个类名
结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>标题</title>
...
</head>
<body>
主体
</body>
</html>
头部声明
<!DOCTYPE>声明必须在HTML第一行,在<html>之前,作用是指示web浏览器关于页面使用哪个HTML版本进行编写，html5只有一种声明方式<!DOCTYPE html><meta charset="utf-8">对于中文网页需要使用，声明编码，否则会出现乱码<meta name="keywords" content="xx,xx,">为搜索引擎大量定义关键词<meta name="description" content="xxxx">为网站定义描述内容<meta name="author" content="作者名"定义网页作者<meta http-equiv="refresh" content="30"><title></tile>声明确定标题lang="en"或"zh"是搜索引擎，en英文，zh中文<link rel="stylesheet" type="text/css" herf="xxx.css">表示链接到样式表<style></style>内部可以用来写css样式
标签
基础文本标签
标题h1-h6
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
段内换行<br>
<br/>单独出现的标签，直接结束
<P>
这是一个标签<br/>
</P>
段内分组span
<style type="text/css">
span{...}
</style>
<p>
最新
<span>中国人口调查报告</span>
指出
</p>
组合行内元素，以便通过CSS样式来格式化
段落 <p>
<P>这是一个段落</P>
每个段落会自动换行，段落内部文字忽略连续空格
空格字符 
 特殊字符,全小写，显示空格
预留格式 <pre>
定义预格式化的文本，文本中的空格和换行符会被保留，很适合显示计算机代码
水平线hr
分割线·
<p>...</p>
<hr/>
<p>...</p>
粗体文本<b>
着重文字 <em>
斜体字 <i>
小号字<small>
加重语气 <strong>
上标 <sup>下标<sub>
插入字 <ins>
删除字 <del>
注释
<!-- 注释内容 -->
a标签
超链接
<a herf="xxx.com" target="_blank">
target 属性设置为 “_blank”, 链接将在新窗口打开。
链接到本站点其他网页
<a href="a.html"></a>
链接到其他站点
<a href="http://www.bamboosir920.cn"></a>
虚拟超链接
<a href="#">板块2</a>
img标签
支持格式:jpg,gif,png等
- alt 当图片不能加载时，替换文本属性会告诉他们失去的信息
<img src="img.png" alt="img" />
<!--src文件路径-->
<!--路径有相对路径和绝对路径-->
div 列表 表格
div
div盒子
<div>
....
</div>
无序列表 ul li
<ul>
<li></li>
<li></li>
</ul>
有序列表
<ol>
<li></li>
<li></li>
</ol>
表格 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>
**table属性: ** border=“1” 边框
表头单元格: th作为表头单元格
| 标签 | 描述 |
|---|---|
<table> |
定义表格 |
<th> |
定义表格的表头 |
<tr> |
定义表格的行 |
<td> |
定义表格单元 |
<caption> |
定义表格标题 |
<colgroup> |
定义表格列的组 |
<col> |
定义用于表格列的属性 |
<thead> |
定义表格的页眉 |
<tbody> |
定义表格的主体 |
<tfoot> |
定义表格的页脚 |
HTMLform标签
**表单: **是一个区域，采集用户信息
**表单元素:**文本框，按钮，单选，复选，下拉列表，文本域
<form action="xxx">
<!--表单元素-->
<input type="text|password|submit|reset|radio|checkbox"/>
<!--text 文本框 password 密码框 submit 提交按钮 reset 重置按钮-->
<input type="submit" value="按钮上显示的字" name="xxx"/>
<input value="值" name="名称,名字相同归于一个组内，如果是但单选框，则只能二选一"type="radio|checkbox" checked="checked"/>
<!--radio单选框，checkbox复选框，checked默认该选项被选中-->
</form>
- type=“text” 文本框
- value=“默认显示的值”
- type=“password” 密码框
- type="submit"
- value=“按钮上显示的字”
- type=“reset” 重置按钮
- value=“上同”
- type=“radio” 单选框
- name=“名称，名字相同归于一个组内”
- checked=“checked” 默认该项被选中
- value=“提交的值”
- type=“checkbox” 复选框
- 上同
<select><option>下拉列表框- selected=“selected” 被选择的那一项
<select>
<option>选项1</option>
<option selected="selected">选项2</option>
</select>
<textarea>文本域
<textarea rows="行数" cols="列数">初始文本</textarea>
| 标签 | 描述 |
|---|---|
<form> |
定义供用户输入的表单 |
<input> |
定义输入域 |
<textarea> |
定义文本域 (一个多行的输入控件) |
<label> |
定义了 元素的标签，一般为输入标题 |
<fieldset> |
定义了一组相关的表单元素，并使用外框包含起来 |
<legend> |
定义了 元素的标题 |
<select> |
定义了下拉选项列表 |
<optgroup> |
定义选项组 |
<option> |
定义下拉列表中的选项 |
<button> |
定义一个点击按钮 |
<datalist> |
指定一个预先定义的输入控件选项列表 |
<keygen> |
定义了表单的密钥对生成器字段 |
<output> |
定义一个计算结果 |
元素<script>
加载javascript脚本文件
框架iframe
你可以通过使用框架，在同一个浏览器矿口显示不止一个页面
<iframe src="url"></iframe>