HTML 指的是超文本标记语言,HTML文档由各种html元素组成
HTML 标签:
HTML 标签是由尖括号包围的关键词，比如 <html>
标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 元素:
HTML 元素以开始标签起始,以结束标签终止
元素的内容是开始标签与结束标签之间的内容
大多数 HTML 元素可拥有属性
HTML 属性:
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
例如 a 标签里面的 herf属性 <a href=""></a>
img标签里面的 src属性 <img src="" alt="">
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body align="center"> <h1>HTML 指的是超文本标记语言,HTML文档由各种html元素组成</h1> <p>HTML文档由各种html元素组成</p> <p style="color: blueviolet">标签可以有属性</p> <strong style="color:coral">这是一段文字</strong><br> <hr> <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=322155002,3830386593&fm=26&gp=0.jpg" alt="大美女"> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
HTML列表有三种，分为 有序列表, 无序列表, 定义列表，用的最多的是无序列表，它们通常是组合标签出现
无序列表:无序列表始于 <ul> 标签。每个列表项始于 <li>
实例
<ul> <li><a href="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3074604593,2724332664&fm=26&gp=0.jpg" target="_blank">美女图片</a></li> <li>文字</li> <li>视频</li> <li>文章</li> </ul>
运行实例 »
点击 "运行实例" 按钮查看在线实例
有序列表: 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签
实例
<ol> <li><a href="" style="color:cornflowerblue"><ins>公司主页</ins></a></li> <li><a href="" style="color:crimson"><ins>公司简介</ins></a></li> <li><a href="" style="color:darkgreen"><ins>公司动态</ins></a></li> <li><a href="" style="color: darkviolet"><ins>关于我们</ins></a></li> <li><a href="" style="color: hotpink"><ins>联系我们</ins></a></li> </ol>
运行实例 »
点击 "运行实例" 按钮查看在线实例
定义列表: 自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始
实例
<dl> <dt>新闻标题1</dt> <dt>新闻标题2</dt> <dd>新闻内容1</dd> <dd>新闻内容2</dd> <dd>新闻内容3</dd> </dl>
运行实例 »
点击 "运行实例" 按钮查看在线实例
列表 由 ol、ul、dl 标签来表定义，内部有li或者dt,dd组成，表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）,字母 td 指表格数据。如果数据比较简单，就用列表来表示，如果有多列数据，就适合用表格来表示
列表 实例
<ul> <li>学习HTML</li> <li>学习PHP</li> <li>项目实践</li> </ul> <ol> <li>学习HTML</li> <li>学习PHP</li> <li>项目实践</li> </ol> <dl> <dt>学习HTML</dt> <dd>掌握各种html各种标签的应用,css,等等..</dd> <dt>学习PHP</dt> <dd>掌握php后端各种命令,并实现与前端的交互,等等..</dd> <dt>项目实践</dt> <dd>结合自己所学到的东西,独立开发完成属于自己的项目</dd> </dl>
运行实例 »
点击 "运行实例" 按钮查看在线实例
表格 实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>购物清单</title> </head> <body> <table cellspacing="0" border="1" width="550" align="center" cellpadding="6"> <caption> <h1>购物清单</h1> </caption> <tr bgcolor="green"> <th>编号</th> <th>类别</th> <th>物品名</th> <th>单价/元</th> <th>数量/斤</th> <th>总计</th> </tr> <tr align="center"> <td><b>1</b></td> <td rowspan="4" bgcolor="lightgreen" style="color:mediumslateblue"><b>水果</b></td> <td>苹果</td> <td>7</td> <td>5</td> <td>35</td> </tr> <tr align="center"> <td><b>2</b></td> <td>香蕉</td> <td>5</td> <td>5</td> <td>25</td> </tr> <tr align="center"> <td><b>3</b></td> <td>山竹</td> <td>18</td> <td>2</td> <td>36</td> </tr> <tr align="center"> <td><b>4</b></td> <td>芒果</td> <td>10</td> <td>4</td> <td>40</td> </tr> <tr align="center"> <td><b>5</b></td> <td rowspan="4" bgcolor="lightgreen" style="color: mediumslateblue"><b>蔬菜</b></td> <td>白菜</td> <td>2</td> <td>2</td> <td>4</td> </tr> <tr align="center"> <td><b>6</b></td> <td>胡萝卜</td> <td>3</td> <td>2</td> <td>6</td> </tr> <tr align="center"> <td><b>7</b></td> <td>茄子</td> <td>1</td> <td>3</td> <td>3</td> </tr> <tr align="center"> <td><b>8</b></td> <td>黄瓜</td> <td>4</td> <td>2</td> <td>8</td> </tr> <tr align="center" bgcolor="yellow"> <td colspan="4"><b>合计:</b></td> <td style="color: mediumvioletred"><b>25</b></td> <td style="color: mediumvioletred"><b>157</b></td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
注册表单实例
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>注册系统</h1> <form action="login.php" method="POST"> <p> <label for="username">账号:</label> <input type="text" id="username" name="username" value="ceshi" placeholder="4-8位字母"> </p> <p> <label for="password">密码:</label> <input type="password" id="password" name="password" placeholder="6-12位,并含有大小写字母"> </p> <p> <label for="email">邮箱:</label> <input type="email" id="email" name="email" placeholder="1234@qq.com"> </p> <p> <label for="age">年龄:</label> <input type="number" id="age" name="age" min="16" max="80"> </p> <p> <label for="">城市</label> <select name="city" id=""> <optgroup label="湖北"> <option value="">武汉</option> <option value="" selected="selected">黄石</option> <option value="">潜江</option> </optgroup> <optgroup label="湖南"> <option value="">常德</option> <option value="">长沙</option> <option value="">湘潭</option> </optgroup> </select> <label for="">学历:</label> <select name="degree" id=""> <option value="">本科</option> <option value="" selected="selected">大专</option> <option value="">中专</option> </select> </p> <p> <label for="">语言:</label> <input type="checkbox" name="language[]" id="chinese" value="chinese" checked><label for="">汉语</label> <input type="checkbox" name="language[]" id="english" value="english" checked><label for="">英语</label> <input type="checkbox" name="language[]" id="Japanese" value="japanese"><label for="">日语</label> <input type="checkbox" name="language[]" id="korean" value="korean"><label for="">韩语</label> </p> <p> <label for="">性别:</label> <input type="radio" name="gender" value="girl"><label for="">男</label> <input type="radio" name="gender" value="male"><label for="">女</label> <input type="radio" name="gender" value="secret" checked><label for="">保密</label> </p> <p> <input type="submit" name="submit" value="submit注册"> <button type="button">button注册</button> <input type="reset" name="reset" value="重置"> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结:
h1~h6 标签应用在页面主体标题 突出重点
a 标签 应用在文字 , 图片 点击时 会自动跳转到 herf属性的地址的对应网站中,必须要写全地址https：
ul ol dl 标签 一般用来做网页导航条
table 一般用于数据的明细统计,便于查看
cellpading：表格单元边界与单元内容之间的间距（单元格里面的内容与单元格边框之间的距离）
cellspacing：表格单元格间距（单元格与单元格之间的距离）
rowspan:合并行
colspan:合并列
form 一般用于前端,与后端交互信息的媒介
form 表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等
包含 menus、textarea、fieldset、legend 和 label 元素