1 - 标签语法
<!--title标签里面写这个网页的标题-->
标题小实验
<!-- ①标签不能交叉嵌套 -->
正确：<div><span>早安</span></div>
错误：
<hr />
<!-- ②标签必须正确关闭 -->
<!-- i.文本内容的标签： -->
正确：<div>早安</div>
错误：
<hr />
<!-- ii.没文本内容的标签： -->
正确：<br />
错误：
<hr />
<!-- ③属性必须值，属性值必须加引号 -->
正确：<font color="blue">早安，尚硅谷</font>
错误：
错误：
<hr />
<!-- ④注释不能嵌套 -->
正确：<!-- 注释内容 --> <br/>
错误：<!--<!--错误的注释-->-->
<hr />
2 - font标签
<!--
font标签：修改字体
color属性修改字体颜色
size属性修改字体大小，7是最大的
face属性修改字体的样式
-->
<font color="#00ffff" size="7" face="楷体">智哥最帅</font>
3 - 特殊字符
<!--
特殊字符：想要将标签显示出来，所以就需要特殊字符来实现这一功能
特殊符号前面都要加&
-->
<br>表示换行 <!--显示出来的内容就是<br>-->
<!--在html中单纯的空格或者tab键和回车键都只能是一个空格，如果需要显示多个空格就需要nbsp;符号去实现-->
我是一个 tab键 <!--特殊符号表示的是四个空格-->
<!--
标题标签：类似world文档里面的标题
h1是最大的
h6是最小的
-->
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
4 - 超链接
<!--
超链接：a标签是超链接
href属性设置连接地址
target属性设置那个目标跳转
常用的参数:①_self：当前页面跳转
②_blank：打开新的页面跳转
③也可以往里面放入iframe窗口的名字，跳转到iframe窗口里面
-->
<a href="localhost:8080" target="_blank">跳转新的页面</a> <!--打开新的页面跳转-->
<br/> <!--换行-->
<a href="localhost:8080" target="_self">当前页面跳转</a> <!--当前页面跳转-->
<a href="#a">跳转到对应id的标签</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a id="a" href="#">a标签</a>
5 - img标签
<!--
img标签(单标签)：在html页面上显示图片
src属性设置图片的路径
width设置图片的宽度
height设置图片的高度
border设置相框
alt设置当指定路径找不到图片的时候显示的内容
样式：display 默认是inline，会多出几个像素，可以设置值为block，这样就是以块的形式展示
html中的路径
相对路径：
. 表示当前目录
.. 表示上一级目录
文件名 表示当前目录，相当于./，./可以省略
绝对路径：http:IP:part/工程名/资源路径
和java的绝对路径是不一样的
-->
<img src="../img/28.jpg" width="250" height="300" border="1" alt="找不到该照片"/>
<img src="../img/2.jpg" width="250" height="300" border="1"/>
<img src="../img/3.jpg" width="250" height="300" border="1"/>
<img src="../img/4.jpg" width="250" height="300" border="1"/>
6 - 列表标签
<!--
列表标签
ul标签(无序列表)：没序列号的列表
type属性可以除去列表前面的符号
ol标签(序列表)：序列号的列表
-->
<ul type="none">
<li>小智</li>
<li>好</li>
<li>帅</li>
<li>哦</li>
</ul>
7 - 表格标签
<!--
table 表格标签
width 设置表格的宽度
height 设置表格的高度
align 设置表格相对于页面的对齐方式
参数：居中center 右right 左left
border 给每个单元格添加边框
cellspacing 设置单元格和表格的间距
cellpaddimg 设置单元格之间的间距
td 单元格标签
align
colspan属性：跨行
rowspan属性：跨列
tr 行标签
b 加粗标签
th 表头标签 -> 居中对齐，加粗
-->
<table align="right" width="500" height="500" border="1" cellspacing="0">
<tr align="center">
<td><b>1.1</b></td>
<td >1.2</td>
<td>1.3</td>
</tr>
<tr align="center">
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr align="center">
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
<tr>
<th>4.1</th>
</tr>
</table>
8 - 表格的跨行跨列
<!--
td标签的两个属性的用法
跨行和跨列和Excel中的合并单元格类似
colspan属性：跨行，参数是要跨几个单元格
rowspan属性：跨列
-->
<table border="1">
<tr>
<td colspan="2">1.1</td>
<td>1.2</td>
</tr>
<tr>
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
</tr>
</table>
9 - iframe框架标签
<!--
iframe框架标签（内嵌窗口：在html页面中开辟一个窗口，窗口中显示另外一个html页面
src 设置打开页面的路径
width 设置窗口的宽度
height 设置窗口的高度
name 设置窗口的名字
ifranme和a标签一起用：
先设置ifranme窗口的名字，名字不能为中文，
然后在a标签target属性放入它iframe窗口的名字，
当我们点击超链接的时候就是跳转到这个窗口里面
-->
<iframe src="1-font标签.html" width="500" height="500" name="abc"></iframe>
<!--创建一个超链接菜单-->
<ul>
<li><a href="2-特殊字符.html" target="abc">2-特殊字符.html</a></li>
<li><a href="5-列表标签.html" target="abc">5-列表标签.html</a></li>
<li><a href="7-表格的跨行跨列.html" target="abc">7-表格的跨行跨列.html</a></li>
</ul>
10 - 表单标签
<!--
form 表单标签：用于收集用户信息的所元素集合，然后把信息发送给服务器
input标签
name属性：可以对其进行分组，分组之后只能一个，就是名字相同的是同一个组
checked属性：
参数：checked，表示默认中，就是在那里那里就是默认中的状态
value属性：设置默认值
type属性：
参数：①text 文本输入框
②password 密码输入框
③radio 单框
④checked 多
⑤button 钮 value设置默认值
⑥file 文件上传域，可以上传文件
⑦hidden 隐藏域
隐藏域的作用：当我们发信息，而这些信息不需要用户参与时，
就可以使用隐藏域（提交的同时发送给服务器，给程序用的
select标签：下拉列表
option标签：下拉列表的项
select属性：这个属性在哪那个就是默认值
参数：select
testarea标签：多文本输入框
rows属性：设置高度
cols属性：设置字符数量
-->
<!--
需求：创建一个个人信息注册的表单界面，包含用户名、密码、确认密码、性别（单选）、
兴趣爱好、国籍、隐藏域、自我评价（多行文本域、重置、提交
-->
<!--
放入表格中的作用：整齐
-->
<form>
<table align="center">
<tr>
<!--用户名-->
<td>用户名</td>
<td><input type="text"></td>
</tr>
<tr>
<!--用户密码-->
<td>用户密码</td>
<td><input type="password"/></td>
</tr>
<tr>
<!--确认密码-->
<td>确认密码</td>
<td><input type="password"/></td>
</tr>
<tr>
<!--性别（单-->
<td>性别</td>
<td><input type="radio" checked="checked" name="gender"/>男 <!--默认男的-->
<input type="radio" name="gender"/>女
</td>
</tr>
<tr>
<!--兴趣爱好-->
<td>兴趣爱好</td>
<td><input type="checkbox" checked="checked"/>Java <!--默认Java-->
<input type="checkbox"/>JavaScript
<input type="checkbox"/>C++
<input type="checkbox"/>Python
</td>
</tr>
<tr>
<!--国籍（下拉列表-->
<td>国籍</td>
<td>
<select>
<option selected="selected">中国</option> <!--默认中-->
<option>美国</option>
<option>印度</option>
<option>日本</option>
</select>
</td>
</tr>
<tr>
<!--上传文件-->
<td>上传文件</td>
<td><input type="file"/></td>
</tr>
<tr>
<!--隐藏域-->
<td><input type="hidden" /></td>
</tr>
<tr>
<!--自我评价（多行文本域-->
<td>自我评价</td>
<td><textarea rows="10" cols="20"> 我喜欢敲代码 </textarea></td>
</tr>
<tr>
<!--重置-->
<td><input type="reset" value="重置"/></td>
<!--提交-->
<td align="center"><input type="submit" value="提交"/></td>
</tr>
</table>
</form>
11 - 表单的提交细节
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test表单的提交</title>
</head>
<body>
<!--
表单的提交
form标签：
action属性设置提交给服务器的地址
method属性设置提交的方式
①get
1.浏览器中地址栏中的地址是：action属性+?+请求参数
请求参数的格式是：name=value&name=value
2.不安全，因为信息显示在了地址栏中
3.长度限制
②post：不会显示出来内容在
1.浏览器中地址栏中的地址是：action属性
2.相对于get来说是安全的
3.理论上长度无限制
表单提交的时候数据没发送给服务器的种情况：
①表单项没name属性
②单，复（下拉表中的option标签都需要添加value属性，一遍发给服务器
③表单项不在form标签中
-->
<form action="http://localhost:8080" method="get">
<table align="center">
<tr>
<!--用户名-->
<td>用户名</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<!--用户密码-->
<td>用户密码</td>
<td><input type="password" name="userpow"/></td>
</tr>
<tr>
<!--性别（单-->
<td>性别</td>
<td><input type="radio" checked="checked" name="gender" value="boy"/>男 <!--默认男的-->
<input type="radio" name="gender" value="girl"/>女
</td>
</tr>
<tr>
<!--兴趣爱好-->
<td>兴趣爱好</td>
<td><input type="checkbox" checked="checked" name="lang" value="Java"/>Java <!--默认Java-->
<input type="checkbox" name="js" value="lang"/>JavaScript
<input type="checkbox" name="c++" value="lang"/>C++
<input type="checkbox" name="PY" value="lang"/>Python
</td>
</tr>
<tr>
<!--国籍（下拉列表-->
<td>国籍</td>
<td>
<select name="contory">
<option selected="selected" value="cn">中国</option> <!--默认中-->
<option value="mg">美国</option>
<option value="yd">印度</option>
<option value="jp">日本</option>
</select>
</td>
</tr>
<tr>
<!--隐藏域-->
<td><input type="hidden" name="yinchangyu"/></td>
</tr>
<tr>
<!--自我评价（多行文本域-->
<td>自我评价</td>
<td><textarea rows="10" cols="20" name="text"> 我喜欢敲代码 </textarea></td>
</tr>
<tr>
<!--重置-->
<td><input type="reset" value="重置"/></td>
<!--提交-->
<td align="center"><input type="submit" value="提交"/></td>
</tr>
</table>
</form>
</body>
</html>
12 - 其他标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test其他标签</title>
</head>
<body>
<!--
其他的标签
div标签 默认一行，就是占一行
span标签 它的长度的封装数据的长度，比如说这个名字是个字，那么它的长度就是3
p段落标签 默认在段落的上方或者下方空出一行来（如果已有就不用再空）
-->
<div>我是小智</div>
<span>小智是我</span>
<span>小智还是我</span>
<p>我是第二个小智</p>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
