自学html的回顾（1/1）
- HTML概述
- 基本结构
- 基本标签
- 表格
- 超链接
- 背景
- 列表
- 表单
- id属性、div和span的重要性
HTML概述
html是超文本编辑语言，由大量标签组成，每个标签都有开始和结束，语句较为松散，这套语言是由W3C（世界万维网联盟）定制的一套规范。
基本结构
普遍的系统结构分为两种：
1、B/S结构：
浏览器/服务器的结构
优点：更新快
缺点：速度慢、用户体验不好、界面不美观
2、C/S结构：
客户端/服务器的结构
优点：速度快、界面好
缺点：更新麻烦，维护成本高
基本标签
一个基本的html代码组成是由html、head、body、title标签组成，以html开始和结束，头部主要写标题，身体部分主要写网页的内容。而标签就是帮助构建网页的重要组成部分。
<html>
<head>
<title>我的主页</title>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<h1>第一标题</h1>
<h2>第二标题</h2>
<h3>第三标题</h3>
<h4>第四标题</h4>
<h5>第五标题</h5>
<h6>第六标题</h6>
<br>换行
<pre>预留文本格式</pre>
<br>
<hr color="green" width="20%"></hr>
<del>删除字</del>
<ins>插入字</ins>
<b>粗体字</b>
<i>斜体字<i/>
10<sup>2</sup>
10<sub>2</sub>
<font color='red'>红色字</font>
b<a>c<!--实体符号以&开始,以;结束。lt是<,gt是>,nbsp是空格-->
</body>
</html>
表格
关键字：table、tr（行）、td（每一个单元格）
table中有几个常用的属性：
1、border：边框
2、width：宽度
3、height：长度
4、align：所处布局位置
td的合并单元格：
1、rowspan：向下合并单元格。
2、colspan：向左右合并单元格
<html>
<head>
<title>表格</title>
</head>
<body>
<table border="1px" width="50%" height="50%" align="center">
<tr align="center">
<td>1</td>
<td rowspan="2">2</td>
<td>3</td>
</tr>
<tr align="center">
<td>4</td>
<td>6</td>
</tr>
<tr align="center">
<td>7</td>
<td colspan="2">8</td>
</tr>
</table>
</body>
</html>
超链接
关键字：a
a标签中的重要属性：
1、href：代表url，即连接到的地址，对地址发送请求。
2、target：
获取链接后显示的方式
（1）blank：新的页面
（2）_self：当前窗口
（3）_top：顶级窗口
（4）_parent：父窗口
超链接可以是文字，也可以是图片，也可以是其他各种样式
<html>
<head>
<title>超链接</title>
</head>
<body>
<a href="http://wwww.baidu.com" target="blank">
百度
</a>
</body>
</html>
背景
关键字：bgcolor（背景颜色）、background（背景图片）、img（图片）
img有几个常用的属性：
1、title：
鼠标悬停在图片上显示的文字
2、alt：
找不到这个图片资源的时候会显示
<html>
<head>
<title>背景</title>
</head>
<body bgcolor="green" background="1.png">
<img src="2.jpg" title="图片" alt="图片找不到"></img>
</body>
</html>
列表
关键字：ol（有序列表）、ul（无序列表）、li（列表的元素）,
列表可以嵌套。
<html>
<head>
<title>列表</title>
</head>
<body>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ul>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
表单
关键字：form、input
表单中的数据是要提交给指定的url，需要提交的带上name和value，如果是手写的文本就可以不用指定value，如果是鼠标点击的就必须要指定value，格式是action?name=value&name=value。
input中有几个常用的属性：
1、type：
指定类型：
（1）text：文本框
（2）radio：单选按钮，如果想让多个单选按钮只有一个能被选中，就多个单选按钮为同一name。
（3）checkbox：勾选框。
（4）select：下拉列表，其中option代表选项，属性multiple代表可多选，属性size代表可显示的选项个数。
（5）file：指定上传文件
（6）hidden：指隐藏，数据照常上传，但是用户不可见
（7）submit：提交表单中数据的按钮
（8）reset：重置表单中的数据
2、name：提交数据不可缺少的部分
3、value：指定name的上传数据
form中有几个常用的属性：
1、action：和href相同，表示目标地址。
2、method：post和get，post代表提交的数据在地址栏中不可见，get表示可见，默认是可见。
<html>
<head>
<title>表单</title>
</head>
<body>
<!--表单往服务器上提交的是value格式是：action?name=value-->
<form action="背景.html" >
<input type="text" name="1"></input>
<input type="radio" name="2" value="1">男</input>
<input type="radio" name="2" value="0">女</input>
<input type="checkbox" name="3" value="1" checked>是否成年</input>
<select name="4" multiple="multiple" size="2">
<option value="0">本科</option>
<option value="1">硕士</option>
<option value="0">高中</option>
<option value="1">专科</option>
</select>
<br>
<input type="file"></input>
<input type="hidden" name="5" value="6" />
<textarea rows="10" cols="60" name="6"></textarea>
<input type="submit" value="提交"></input>
<input type="reset"></input>
</form>
</body>
</html>
id属性、div和span的重要性
id属性：每一个元素都有id属性，类似于身份证，不可重复，javaScript通过id属性进行增删改。
div和span：是一个块级元素，类似于一个空的盒子，在网页制作的时候会经常用到。
div占用的位置是一行，
span占用的是内容有多宽就占用多宽的空间距离。