HTML总述
本文来源于java1234《一头扎进html》
第一节：无
第二节：文本排版
2.1 段落标签<p>
2.2 换行标签<br>
2.3 标题标签<h1>~<h6>
2.4 文字居中标签<center>
2.5 文字段落缩进标签<blockquote>
第三节：设置文字列表
3.1 无序列表 ul
3.2 有序列表 ol
第四节：HTML 标记与 HTML 属性
4.1 用 align 属性控制段落的左对齐、居中、右对齐(left\center\right)
格式：<p align="center">段落</p>
<html>
<head/>
<body>
<!-- <p align="left"> -->
<!-- <p align="center"> -->
<p align="right">
锄禾<br/>
锄禾日当午，<br/>
汗滴禾下土。<br/>
谁知盘中餐，<br/>
粒粒皆辛苦。<br/>
</p>
</body>
</head>
4.2 用 bgcolor 属性设置背景颜色
1），直接颜色表示 如 red、blue ；
2），利用 R/G/B 表示 16 进制 #FFFF00 ；
格式：<body bgcolor="#ff112B"/>
4.3 设置文字的特殊样式
| 标记 | 显示效果 |
|---|---|
| <b></b> | 文字以粗体方式显示 |
| <i></i> | 文字以斜体方式显示 |
| <u></u> | 文字以加下划线方式显示 |
| <s></s> | 文字以加下删除方式显示 |
| <big></big> | 文字以放大方式显示 |
| <small></small> | 文字以缩小方式显示 |
| <strong></strong> | 文字以加强强调方式显示 |
| <em></em> | 文字以强调方式显示 |
| <address></address> | 用来显示电子邮件地址或网址 |
| <code></code> | 用来说明代码与指令 |
4.4 设置文字的大小和颜色 font 标签
<body>
<font color="green" size="10" face="仿宋">锄禾<br/></font>
</body>
第五节：特殊文字符号
| 符号 | HTML 代码 |
|---|---|
| < | < |
| > | > |
| © | © |
| 上标 | <sup></sup> |
| 下标 | <sub></sub> |
实例：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
尖括号：<br><br/>
版权：©<br/>
3<sup>2</sup><br/>
log<sub>2</sub>3<br/>
</body>
</html>
结果：
第六节 网页图片
1、图片路径示例：
<body>
<img src="1.jpg"/><!--相对路径，同级目录-->
<img src="../2.jpg"/><!--相对路径，上级目录-->
<!--绝对路径-->
<img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1525870898&di=577ee1774ec9d94dc51aef2b50f9193f&src=http://img.mp.itc.cn/upload/20160802/7981293c24cb4c9bb19be32a635fcc3f_th.jpg">
<img src=d://3.jpg/><!--绝对路径-->
</body>
2、设置图片尺寸
<body>
<img width="150" height="200" src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1525870898&di=577ee1774ec9d94dc51aef2b50f9193f&src=http://img.mp.itc.cn/upload/20160802/7981293c24cb4c9bb19be32a635fcc3f_th.jpg">
</body>
3、alt 替换文本
<img width="150" height="200" alt="雪球" src="d://1.jpg"/>
4、title 标题
<img width="150" height="200" alt="雪球" title="这是雪球" src="d://1.jpg"/>
第七节 超链接、frameset
1、文字、图片超链接
2、在新窗口显示页面
3、frameset 网页分块
https://www.jianshu.com/p/e46ba1b3e9b2
第八讲 框架之间创立链接
https://www.jianshu.com/p/357214380c3b
第九讲 嵌入式框架iframe
<body><iframe width="700" height="500" src="http://www.baidu.com"/></body>
第十讲 html表格
| 行：<tr> | 列：<td> | 表头：<th> |
|---|
合并单元格
| colspan 列合并 | rowspan 行合并 |
|---|
实例：
https://www.jianshu.com/p/4c82c49143eb
第十一讲 html <table>属性
<table>属性：width、height
align属性： 对齐方式
bgcolor属性： 背景色
cellspadding属性： 内容到边框距离
cellspacing属性： 边框到边框距离
实例：https://www.jianshu.com/p/6eb2b10c204e
第十二讲 html 表单
form表单：向服务器提交数据
<body>
<form action="j.jsp" method="get/post">
表单内容
</form>
</body>
<input> 标签：文本框、密码框、文本域、submit按钮、button按钮
<body>
<form action="a.jsp" method="post">
<table>
<tr>
<td>用户名：</td>
<td><input type="text" name="userName" id="userName"/></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="pwd" id="pwd"/></td>
</tr>
<tr>
<td><input type="submit" value="登陆"/></td>
<td><input type="button" value="重置"/></td>
</tr>
</table>
</form>
</body>
单选框：(name相同)
<form>性别：
<input type="radio" name="sex" checked="checked"/>male
<input type="radio" name="sex"/>female
</form>
复选框：(name相同)
<form>
<input type="checkbox" name="hobby" checked="checked">java
<input type="checkbox" name="hobby">足球
<input type="checkbox" name="hobby">绘画
<br/>小学：
<select id="grade" name="grade">
<option value="1">一年级</option>
<option value="2">二年级</option>
<option value="3">三年级</option>
</select>
</form>
文件上传：
<input type="file" id="file" name="file"/>
第十三讲：<div> <span>
<div> 块级元素，可以组合其他元素的容器，自动换行
<div id="d1" style="border:1px red solid;">
<h1>呵呵</h1>
<h2>嘿嘿</h2>
<p>嘻嘻</p>
</div>
<span>内联元素，可作为文本容器，不自动换行
<p>这<span style="color:red">是</span>p</p>
