根据尚硅谷的JavaWeb教程而写，仅供参考。如果需要源文件可以私信我，觉得对你有帮助的话可以点一个赞哦！
尚硅谷JavaWeb
HTML标签的使用
html语言是解释型语言，不是编译型，浏览器是容错的。
- 基本构成
1. html页面中由一对标签组成
* <html>称之为开始标签
* </html>称之为结束标签
2. <title> 表示网页的标题</title>
3. 可以在meta标签中设置编码方式
* <meta charset="UTf-8">
4. 主要内容都放在<body></body>标签内部。
- 基本标签
1. <br/>是一个单标签。
表示换行。
* 单标签：开始标签和结束标签是同一个，斜杠放在单词后面。
2. <p/> 表示段落标签。
3. <img> 标签是图片标签，src属性表示图片文件的路径
* width和height表示图片的大小
* alt表示图片的提示
4. 路径的问题
1. 相对路径
2. 绝对路径
5. h1~h6 : 标题标签。
6. 列表标签
* ol 有序列表
start 表示从哪开始，type表示显示的类型：A a I i 1(deafult)
* ul 无序列表
type disc(default) , circle , square
7. u 下划线 b 粗体 i 斜体
8. 上标 sup 下标 sub
9. HTML中的实体：
* 小于号 < 大于等于号 ≥ 版权 © 不用记，查文档。
10. span 不换行的块标记（表示将来可能进行修改的地方）
11. a 表示超链接,href 链接的地址
* target:
_self 在本窗口打开
_blank 在一个新窗口打开
_parent 在父窗口打开
_top 在顶层窗口打开
12. div：层。
- table（表格）
网页中制作表格,使用table标签即可。 - 表格基本组成
表头列 <th>
行 <tr>
列 <td>
- table中的属性
border：表格边框的粗细
width:表格的宽度
cellspacing：单元格间距
cellpadding：单元格填充
tr中有一个属性： align -> center , left , right
rowspan : 行合并
colspan : 列合并
代码部分
- Html/table
<!--html：必备； head：可以放Js、CSS文件； title：标题； -->
<html>
<head>
<title>仅供练习 by—Xin</title>
<meta charset="UTf-8">
</head>
<!--body：主体；-->
<body>
<!-- h1：标题； a：链接； href：URL； target ：打开方式； p：另起一段落 -->
<h1>基础演示</h1><p/>
<a href="https://blog.csdn.net/weixin_62633072?spm=1000.2115.3001.5343" target="_blank"> 作者博客 </a><p/>
<!--br：换行-->
Hello<br/>World!
<p/>
Hello<p/>
<!--img：图片； src：图片链接 ；alt：无显示时的内容-->
<img src="图片链接" width="150" height="100" alt="无图片显示"> <p/>
有序列表演示：<p/>
<ol start="A" start="1">
<li>First</li>
<li>Second</li>
<li>third</li>
<li>forth</li>
<li>fifth</li>
</ol>
<p/>
无序列表演示：<p/>
<ul type="circle">
<li>小明</li>
<li>小狗</li>
<li>小猫</li>
</ul>
<p/>
<!--u：下划线； b：粗体； i：斜体；-->
<u>underline</u><b>Bold type</b><i>italics</i>
<p/>
<!--sub：下标； sup：上标；-->
H<sub>2</sub>0<p/>
O<sup>2</sup><p/>
<h1>table演示</h1><p/>
<!--table：表格； tr：行； th：表头列； td：列；-->
<table border="2" cellspacing="0" width="600">
<tr align="center">
<th>name
</th>
<th>sex
</th>
<th>age
</th>
<th>list
</th>
</tr>
<tr align="center">
<td>Rock</td>
<!-- rowspan：行合并； -->
<td rowspan="2">man</td>
<td>15</td>
<td>0</td>
</tr>
<tr align="center">
<td>Cheng</td>
<td>17</td>
<td>0</td>
</tr>
<tr align="center">
<td>Deddy</td>
<td>woman</td>
<td>16</td>
<td>0</td>
</tr>
</table>
</body>
</html>
- form（表单）
<html>
<head>
<title>表单学习</title>
<meta charset="UTF-8">
</head>
<body>
<h1>表单</h1><p/>
<!-- 表示提交后跳转的网页 method方法固定-->
<form action="表单学习附录.html" method="post">
<!-- 表示文本输入的表单 ，name为传给服务器的名称 -->
账户名：<input type="text" name="name" /><br/>
<!-- 表示密码输入的表单，输入会自动隐藏 -->
密码：<input type="password" name="password" /><br/>
<!-- 表示单选的表单 ，name最好相同 -->
性别：<input type="radio" name="sex" />男
<input type="radio" name="sex" />女<br/>
<!-- 表示多选的表单，name也最好相同，要加value表示值 -->
爱好：<input type="checkbox" name="hobby" value="basketball"/>篮球
<input type="checkbox" name="hobby" value="football"/>足球
<input type="checkbox" name="hobby" value="tennis"/>网球<br/>
<!-- select标签表示多选，option为每一选项，必须附value值 -->
所在省市：<select>
<option value="1" selected>北京</option>
<option value="2">天津</option>
<option value="3">重庆</option>
<option value="4">河南</option>
</select><br/>
<!-- textarea标签表示文本框 可以设置行和列 -->
意见收集：<textarea name="opinion" rows="2" cols="40"></textarea><p/>
<!-- input标签表示按钮，type对应着不同的按钮方式 -->
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
<input type="button" value="demo">
</form>
</body>
</html>
本文含有隐藏内容，请 开通VIP 后查看