1. font字体标签
color:颜色
face:字体
size:大小
<!--font 是字体标签
可以通过属性修改文本格式
color属性修改颜色
size属性修改大小
face属性修改字体
-->
<font size="5" face="黑体" color="black">hello world</font>
2. 特殊字符
需用对应的实体名称将其转为实体,常用:
1. <:<;
2. >:>;
3. 空白字符: ;
<!--特殊字符需使用对应的实体名称将其转成实体
常用特殊字符:<、>、空白字符
<:<
>:>
空白字符:
-->
hello <br> world
3. 标题标签
1. <h1>--<h6>:h1最大,h6最小
2. 标题属性 align(对齐方式)= "left" 左对齐
"center" 居中
"right" 右对齐
<!--h1到h6都是标题标签,h1最大,h6最小
align属性设置对齐方式
left:左对齐
center:居中
right:右对齐
-->
<h1 align="left">标题1</h1>
<h2 align="center">标题2</h2>
<h3 align="right">标题3</h3>
<h4 align="left">标题4</h4>
<h5 align="left">标题5</h5>
<h6 align="left">标题6</h6>
4. 超链接
在网页中所有点击之后可以跳转的内容都是超链接
<a href=" " target=" "></a>
1. a 标签就是超链接
2. href 属性设置连接地址
3. target 属性设置跳转目标:_self 表示在当前页面跳转
_blank 表示打开新页面进行跳转
<!--在网页中所有点击之后可以跳转的内容都是超链接
使用 a 标签表示
href 属性设置连接地址
target 属性设置跳转目标
_self 表示当前页面
_blank 表示打开新页面来进行跳转
-->
<a href="localhost:3306">数据库</a>
<a href="localhost:3306" target="_self">数据库</a>
<a href="localhost:3306" target="_blank">数据库</a>
5. 列表标签
<!--列表标签分为有序列表(order list)和无序列表(unorder list)
ol:有序标签
ul:无序标签
li:列表项
type属性可以修改列表项前面的符号
-->
<ul type="none">
<li>薛之谦</li>
<li>毛不易</li>
<li>李荣浩</li>
<li>张敬轩</li>
</ul>
<ul>
<li>薛之谦</li>
<li>毛不易</li>
<li>李荣浩</li>
<li>张敬轩</li>
</ul>
<ol>
<li>薛之谦</li>
<li>毛不易</li>
<li>李荣浩</li>
<li>张敬轩</li>
</ol>
6. img标签
<!--图片标签,用于显示图片
src属性设置图片路径
alt属性设置未找到图片时显示的信息
相对路径
. 表示当前文件所在mulu
.. 表示当前文件所在的上一级目录
文件名 表示当前文件所在目录文件,相当于 ./文件名
绝对路径
正确的格式是:http://ip:port/工程名/资源路径
-->
<img src="../imgs/1.jpg" width="1024" height="600"/>
7. table标签
<!--做一个带表头的三行三列的表格,并显示边框
修改表格的宽度、高度、表格的对齐方式、单元格间距
table 标签是表格标签
tr 是行标签
td 是单元格标签
th 是表头标签(即单元格标签设置居中、加粗属性之后的标签)
b 是加粗标签
cellspacing属性设置单元格间距
-->
<table border="5" width="300" height="300" cellspacing="0">
<tr>
<td align="center"><b>1.1</b></td>
<th>1.2</th>
<th>1.3</th>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
跨行跨列的实现
<!--新建一个五行,五列的表格,
第一行,第一列的单元格要跨两列,
第二行第一列的单元格跨两行,
第四行第四列的单元格跨两行两列
colspan属性设置跨列
rowspan属性设置跨行
-->
<table border="1" cellspacing="0" width="500" height="500">
<tr>
<td colspan="2">1.1</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
<td>3.5</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td rowspan="2" colspan="2">4.4</td>
</tr>
<tr>
<td>5.1</td>
<td>5.2</td>
<td>5.3</td>
</tr>
</table>
8. iframe 框架标签(内嵌窗口)
<!--iframe 标签可以在一个html页面上开辟一个区域显示一个单独的页面
iframe和a标签组合使用的步骤:
1.在iframe标签中使用name属性定义一个名称
2.在a标签中的target属性设置iframe的name属性值
-->
<iframe src="0-标签语法.html" width="500" height="400" name="abc"></iframe>
<ul>
<li><a href="1.1-font标签.html" target="abc">1.1-font标签</a></li>
<li><a href="1.2-特殊字符.html" target="abc">1.2-特殊字符</a></li>
<li><a href="1.3-标题标签.html" target="abc">1.3-标题标签</a></li>
<li><a href="1.4-超链接.html" target="abc">1.4-超链接</a></li>
</ul>
9. 表单标签
<!--form 标签就是表单
input type="text" 是文本输入框,value值设置文本框的默认值
input type="password" 是密码输入框,value值设置文本框的默认值
input type="radio" 是单选框 通过设置name属性可以进行分组 checked="checked"表示默认选中
input type="checkbox" 是复选框 checked="checked"表示默认选中
input type="reset" 是重置按钮 value属性修改按钮上的文本
input type="submit" 是提交按钮 value属性修改按钮上的文本
input type="button" 是按钮 value属性修改按钮上的文本
input type="file" 是文件上传域
input type="hidden" 是隐藏域,当我们要发送某些信息,而这些信息,不需要用户参与,就可以使用隐藏域(提交的时候同时发送给服务器)
select 标签是下拉列表框
option 标签是下拉列表框中的选项 selected="selected"表示默认选中
textarea 标签是多行文本输入框(起始标签和结束标签中的内容为默认值)
rows属性设置行高
cols属性设置宽度
-->
<form>
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<td>用户名称:</td>
<td><input type="text" value="默认值"/></td>
</tr>
<tr>
<td>用户密码:</td>
<td><input type="password" value="123456"/></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" value="123456"/></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex"/>女
</td>
</tr>
<tr>
<td>爱好:</td>
<td><input type="checkbox" checked="checked"/>java
<input type="checkbox"/>javascript
<input type="checkbox"/>c++
</td>
</tr>
<tr>
<td>国籍:</td>
<td>
<select>
<option>--请选择国籍--</option>
<option selected="selected">中国</option>
<option>美国</option>
<option>日本</option>
</select>
</td>
</tr>
<tr>
<td>自我评价:</td>
<td><textarea rows="10" cols="20">默认值</textarea></td>
</tr>
<tr>
<td><input type="reset" value="重置"></td>
<td><input type="submit"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="button" value="按钮"></td>
<td><input type="file"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<input type="hidden" name="abc" value="abcvalue">
</form>
表单提交的细节
<!--
form标签是表单标签
action属性设置提交的服务器地址
method属性设置提交的方式GET(默认值)或POST
表单提交的时候,数据没有发送给服务器的三种情况
1.表单项没有name属性值
2.单选、复选(下拉列表中的option标签)都需要添加value属性,以便发送给服务器
3.表单项不在提交的form标签中
GET请求的特点是:
1.浏览器地址栏中的地址是:action属性[+?+请求参数]
2.不安全
3.有数据长度限制
POST请求的特点是:
1.浏览器地址中只有actions属性值
2.相对于GET请求要安全
3.理论上没有数据长度的限制
-->
<form action="http://localhost:8080" method="post">
<h1 align="center">用户注册</h1>
<input type="hidden" name="action" value="login">
<table align="center">
<tr>
<td>用户名称:</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td>用户密码:</td>
<td><input type="password" name="password"/></td>
</tr>
<td>性别:</td>
<td><input type="radio" name="sex" value="男" checked="checked"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>爱好:</td>
<td><input type="checkbox" name="hobby" value="java" checked="checked"/>java
<input type="checkbox" name="hobby" value="js"/>javascript
<input type="checkbox" name="hobby" value="cpp"/>c++
</td>
</tr>
<tr>
<td>国籍:</td>
<td>
<select>
<option name="country" value="none">--请选择国籍--</option>
<option name="country" value="cn" selected="selected">中国</option>
<option name="country" value="america">美国</option>
<option name="country" value="jp">日本</option>
</select>
</td>
</tr>
<tr>
<td>自我评价:</td>
<td><textarea rows="10" cols="20" name="desc"
></textarea></td>
</tr>
<tr>
<td><input type="reset" value="重置"></td>
<td><input type="submit"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="button" value="按钮"></td>
<td><input type="file"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</form>
10. 其他标签
<!--
div、span、p标签的演示
div标签 默认独占一行
span标签 它的长度为封装数据的长度
p段落标签 默认在段落的上方或下方各空出一行来(如果已有就不再空
-->
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
<p>p标签1</p>1
<p>p标签2</p>1