<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
网页内容
</body>
</html>
一. 基本标签
1. <br/>：换行；2. <h1> </h1>：段落标题；3. <p> </p>：段落；
4.?<img />：插入图片；? 5. <a> </a>：超链接；
6. <ol> <li> </li> </ol>：有序列表；7. <ul> <li> </li> </ul>：无序列表；8. <b> </b>：加粗；
9. <i> </i>：斜体；10. <u> </u>：下划线；11. <sup> </sup>：上标；12. <sub> </sub>：下标
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<!-- 在body里写网页的具体内容 --> <!-- -->
内容1
内容2 <br/> <!-- <br/> ：换行 -->
内容3
<h1> 标题1 </h1> <!-- <h1> </h1>：标题 -->
<h1> 标题2 </h1>
<p> 第一段 </p> <!-- <p> </p>：段落 -->
<p> 第二段 </p>
<h3> 标题3 </h3>
<p> 段落1 </p>
<p> 段落2 </p>
<!-- <img src = "图像文件的位置" width = "宽" height = "高" alt = "图像的文本描述"> ，
alt中的值表示：如果图像不能正常显示，将会用这个文本代替 -->
<img src = "imgs/map.jpg" width = "64" height = "64" alt = "图片" /> <br/>
<!-- <a href = "目标页面路径" target = "" title = "所要链接页面的描述"> 内容 </a> -->
<!-- target = "_blank"表示打开新的窗口来显示链接的页面，默认为覆盖原页面显示（"_self"） -->
<!-- title = "" 内的内容表示鼠标放在链接处，上面会显示title的内容，可以为任何元素增加title属性-->
<a href = "http://www.baidu.com" target = "_blank" title = "百度"> 百度一下 </a> <br/>
<!-- 有序列表 -->
开发语言有：
<ol type = "" start = "3"> <!-- <ol>将所有元素归为一组，type表示显示的类型，start表示从第几开始 -->
<li>Java</li> <!-- type = "A"表示排序为ABCD....，start = "3" 表示从C开始 -->
<li>Python</li> <!-- type的类型有：数字1（默认）、A、a、I、i -->
<li>C++</li> <!-- <li>用来标识列表中的每个元素 -->
<li>Go</li>
</ol>
<ol>
<li>Java</li>
<li>Python</li>
<li>C++</li>
<li>Go</li>
</ol>
<!-- 无序列表 -->
开发语言有：
<ul type = ""> <!-- type的类型有：disc（默认）、circle、square-->
<li>Java</li>
<li>Python</li>
<li>C++</li>
<li>Go</li>
</ul>
<!-- 加粗、斜体、下划线 -->
HTML标签学习：<b>加粗</b>、<i>斜体</i>、<u>下划线</u>、<b><i><u>加粗斜体下划线</u></i></b> <br/>
<!-- 上标 -->
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup> <br/>
<!-- 下标 -->
D<sub>1</sub>
</body>
</html>
二. table表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- table：表格 tr：行 td：列 th：表头列（可选）-->
<table>
<tr>
<td> 第一行第一列 </td>
<td> 第一行第二列 </td>
</tr>
<tr>
<td> 第二行第一列 </td>
<td> 第二行第二列 </td>
</tr>
<tr>
<td> 第三行第一列 </td>
<td> 第三行第二列 </td>
</tr>
</table>
<!-- 给表格设置边框 —— border表示边框的粗细
width表示表格中单元格的宽度，height表示单元格的高度
cellspacing = "0" 单元格间距：将单元格之间的空隙设置为0
cellpadding = "10" 表示将单元格内容与单元格左边框之间的距离设置为10
align = "center" 单元格内容居中 -->
<table border = "1" width = "400" height = "300" cellspacing = "0" cellpadding = "10">
<tr align = "center">
<th> 第一行第一列 </th> <!-- th：表头列（可选）-->
<th> 第一行第二列 </th>
</tr>
<tr align = "center">
<td> 第二行第一列 </td>
<td> 第二行第二列 </td>
</tr>
<tr align = "center">
<td> 第三行第一列 </td>
<td> 第三行第二列 </td>
</tr>
</table>
<!-- 合并单元格 —— rowspan：行合并
colspan：列合并 -->
<table border = "1" width = "400" height = "300" cellspacing = "0" cellpadding = "10">
<tr align = "center">
<td> 第一行第一列 </td>
<td> 第一行第二列 </td>
<td> 第一行第三列 </td>
<td> 第一行第四列 </td>
</tr>
<tr align = "center">
<td> 第二行第一列 </td>
<td> 第二行第二列 </td>
<td> 第二行第三列 </td>
<td> 第二行第四列 </td>
</tr>
<tr align = "center">
<td> 第三行第一列 </td>
<td> 第三行第二列 </td>
<td> 第三行第三列 </td>
<td> 第三行第四列 </td>
</tr>
<tr align = "center">
<td> 第四行第一列 </td>
<td> 第四行第二列 </td>
<td> 第四行第三列 </td>
<td> 第四行第四列 </td>
</tr>
</table>
<!-- 将上面的单元格合并如下： -->
<table border = "1" width = "400" height = "300" cellspacing = "0" cellpadding = "10">
<tr align = "center">
<td rowspan = "2"> 第一列第一列</td>
<td> 第一行第二列 </td>
<td colspan = "2"> 第一行第三列 </td>
</tr>
<tr align = "center">
<td> 第二行第二列 </td>
<td> 第二行第三列 </td>
<td> 第二行第四列 </td>
</tr>
<tr align = "center">
<td> 第三行第一列 </td>
<td> 第三行第二列 </td>
<td rowspan = "2" colspan = "2"> 第三行第三列 </td>
</tr>
<tr align = "center">
<td> 第四行第一列 </td>
<td> 第四行第二列 </td>
</tr>
</table>
</body>
</html>
三. form表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- form：表单-->
<!--action = "路径"：表示该表单的内容输入完后由哪个文件执行-->
<!--method = ""：表示表单的发送方式，有post（网页地址栏不会显示表单的信息）和get（网页地址栏会显示表单的信息，不安全）两种-->
<!--name属性必须指定，用于将文本框中的数据发送给服务器-->
<form action = "" method = "get">
用户：<input type = "text" name = "username"/> <br/> <!-- type = "text"表示文本框-->
密码：<input type = "password" name = "password"/> <br/> <!-- type = "password"表示密码框-->
性别：<input type = "radio" name = "sex" value= "man" checked/> 男 <!-- type = "radio"表示单选框，checked表示默认值-->
<input type = "radio" name = "sex" value= "woman"/> 女 <br/> <!-- 单选框需要指定value的值，选中后将对应value的值发送给服务器-->
爱好：<input type = "checkbox" name = "hobby" value= "Java" checked//>Java <!-- type = "checkbox"表示复选框-->
<input type = "checkbox" name = "hobby" value= "Python"/>Python
<input type = "checkbox" name = "hobby" value= "C++"/>C++ <br/>
国家：<select name = "country"> <!-- 表示下拉列表-->
<option value= "China" selected//>中国</option> <!-- selected表示默认值-->
<option value= "USA"/>美国</option>
<option value= "UK"/>英国</option>
</select> <br/>
备注：<textarea name = "remark"></textarea> <br/> <!-- 表示多行文本框-->
<input type = "submit" value = "注册"/> <!-- 表示提交按钮，提交之后发送给action路径的文件执行-->
<input type = "reset" value = "重置"/> <!-- 表示重置按钮，恢复到页面默认状态-->
<input type = "button" value = "按钮"/> <!-- 表示普通按钮-->
</form>
</body>
</html>
四. iframe
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
页面1 <br/>
<!-- iframe：在一个页面内嵌入一个子页面 -->
<iframe src = "page2.html"></iframe>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
页面1 <br/>
<!-- 可以通过设置width和height的值来指定子页面窗口的大小-->
<!-- iframe与a标签组合使用，即将a标签的跳转页面展示在iframe内
1. 在iframe标签内设置name属性
2. 在a标签内设置target属性，让target的值等于iframe内name属性的值
-->
<iframe src = "page2.html" width = "400" height = "400" name = "main"> </iframe> </br>
<a href = "page3.html" target = "main">页面3</a>
</body>
</html>
|