【HTML详解】一文掌握HTML基础语法

---

前言

本文为HTML基础知识与语法介绍，Java全栈学习路线可参考：【Java全栈学习路线】最全的Java学习路线及知识清单，Java自学方向指引，内含最全Java全栈学习技术清单~

一、什么是HTML

• HTML：Hyper Text Markup Language（超文本标记语言）
• 超文本包括：文字，图片，音频，视频，动画等

二、字体

• u标签：下划线
• i标签：倾斜
• em标签：倾斜
• b标签：加粗
• strong标签：加粗
• &ge符号：>
• &lt符号：<
• &nbsp符号：空格

三、设置样式

• 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 border="0" src="http://wpa.qq.com/pa?p=2::53" alt="点击我，带你进入新世界" title="点击我，带你进入新世界"/></a>

八、块元素与行内元素

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="正则表达式">