<!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>