前言
本文为HTML基础知识与语法介绍，Java全栈学习路线可参考：【Java全栈学习路线】最全的Java学习路线及知识清单，Java自学方向指引，内含最全Java全栈学习技术清单~
一、什么是HTML
HTML：Hyper Text Markup Language（超文本标记语言）
超文本包括：文字，图片，音频，视频，动画等
二、字体
u标签：下划线
i标签：倾斜
em标签：倾斜
b标签：加粗
strong标签：加粗
&ge符号：>
<符号：<
 符号：空格
三、设置样式
height：高度
width：宽度
color：颜色
background ：背景
center：居中对齐
四、导入图片
img：导入图片标签
src：图片的位置
alt：当找不到图片输出什么
title：鼠标指到图片输出的文字
height：图片的高度，单位px（也可以百分比）
width：图片宽度 单位px（也可以百分比）
代码格式：
<img src="绝对地址或者相对地址" alc="图片" title="鼠标指到输出的文字" height="高度px" width="宽度px">
五、导入视频
video:关键字
src：资源路径
controls：控制条
autoplay：自动播放
代码格式：
<video src="资源路径" controls autoplay></video>
六、导入音频
audio:关键字
src：资源路径
controls：控制条
autoplay：自动播放
代码格式：
<audio src="资源路径" controls autoplay></audio>
七、超链接
1.锚链接
代码格式：
<a name="top">顶部</a> <a href=#top>返回顶部</a>
2.功能链接
邮件连接：mailto
代码格式：
<a href="mailto:28495694@qq.com">点击联系我</a>
QQ连接：去百度qq推广
代码格式：
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img bord
八、块元素与行内元素
1.块元素
无论内容多少，该元素独占一行
如：p，h1-h6……
2.行内元素
内容撑开宽度，左右都是行内元素的可以排在一行
如：a，strong，em……
九、列表
1.有序列表
代码格式：
<ol> <li></li> <li></li> <li></li> <li></li> <li></li> </ol>
2.无序列表
代码格式：
<ul> <li></li> <li></li> <li></li> <li></li> </ul>
3.自定义列表
dt：列表名称
dd：列表内容
代码格式：
<dl> <dt></dt> <dd></dd> <dd></dd> </dl>
十、表格
table：表格关键字
tr：行
td：列
border：加边框
colspan：跨列
rowspan：跨行
代码格式：
// 基本表格： <table border="1px"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> // 跨列表格： <table border="1px"> <tr> <td colspan="2">1</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> // 跨行表格： <table border="1px"> <tr rowspan="2"> <td colspan="2">1</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table>
十一、表单
class=”form-inline” 加这个可以在一行上面显示
代码格式：
<form action="${pageContext.request.contextPath}/book/adbook" method="post"> <div class="form-group"> <label >书籍名称：</label> <input type="text" name="bookname" placeholder="书籍名称" required> </div> <div class="form-group"> <label >书籍数量：</label> <input type="text" name="booknum" placeholder="书籍数量" required> </div> <div class="form-group"> <label >书籍描述：</label> <input type="text" name="detail" placeholder="书籍描述" required> </div> <%--点击提交就走上面的addbook请求--%> <input type="submit" value="添加"> </form>
十二、iframe内联框架
iframe：关键字
src：引用网络地址
name：框架标识名
代码格式：
<ifrane src="引用网站" name="框架标识符" width="宽度" height="高度"></ifrane>
十三、input
input：输入什么类型
type：类型可以是 text（文本框），password（密码文本框），image（图片），radio（单选框标签），默认是文本框
size：指定文本框长度
vlaue：初始值
maxlength：最大长度
name：表示组
checked：默认选择
代码格式：
// 基本input <input type="text" name="username" vlaue="名字只能取8位" maxlength="8" size="30"> // radio的使用格式必须要要value（单选框） <center><p> 性别： <input type="radio" value="boy" name="sex"/>男 //name取名相同,相当于同一个组只能选择一个 <input type="radio" value="girl" name="sex"/>女 </p></center> // checkbox多选框必须要value（多选框） <input type="checkbox" value="sleep" name="like">睡觉 <input type="checkbox" value="study" name="like">上课 <input type="checkbox" value="code" name="like">敲代码 <input type="checkbox" value="game" name="like">打游戏 <input type="checkbox" value="1" name="like">撩妹 <input type="checkbox" value="food" name="like">干饭
十四、按钮
1.按钮类型与使用
<input type="button"普通按钮>
<input type="image"图片按钮>
<input type="submit"提交按钮>
<input type="reset"重置按钮>
两种使用方法：
<input type="button" value="按钮1" name="anniu" > <button name="button">按钮2</button>
代码格式：
// 下拉框 // select：下拉框关键字 // option ：选择权 <select name="study"> <option value="china" checked>中国</option> <option value="us">美国</option> <option value="japanese">日本</option> <option value="y">英国</option> </select>
2.文本域
textarea：关键字
cols：文本高度
rows：文本宽度(行)
代码格式：
<p>反馈： <textarea name="textarea" cols="50" rows="10">文本内容</textarea> </p>
3.文件域
file：文件
代码格式：
<p>反馈： <textarea name="textarea" cols="50" rows="10">文本内容</textarea> </p>
十五、简单验证
邮箱E-mail
<p>邮箱： <input type="email" name="email"> </p>
url验证
<p>url<input type="url" name="url"</p>
滑块rabge
<p>音量<input type="range" name="audio" max="100" min="0"></p>
数字取值范围
// max:最大 // min：最小 // step：累加（步骤） <p>数字<input type="number"name="number" max="100" min="0" step="5"</p>
搜索框
<p>搜索<input type="search"name="search"></p>
提交
<input type="submit" disabled>
清空
<input type="reset" value="清空">
十六、标签的应用
隐藏域：hidden
<p>数字<input type="number"name="number" max="100" min="0" step="5" hidden></p>
禁用：disabled 禁用按钮也可以禁用文本框
<input type="submit" disabled >
只读：readonly 只能看value的属性不能修改
<input type="text" maxlength="8" value="只能输入8位" readonly>
十七、表单初级验证
placeholder：提示信息（好像只能在文本框内使用）
required：非空判断
pattern：正确表达式
代码格式：
<input type="text" maxlength="8" placeholder="只能输入八位"> <input type="text" maxlength="8" required"> <input type="text" maxlength="8" pattern="正则表达式">
