常用标签介绍

1. font字体标签

color:颜色
face:字体
size:大小

<!--font 是字体标签
可以通过属性修改文本格式
color属性修改颜色
size属性修改大小
face属性修改字体
-->

<font size="5" face="黑体" color="black">hello world</font>

2. 特殊字符

需用对应的实体名称将其转为实体,常用:
1. <:&lt;
2. >:&gt;
3. 空白字符:&nbsp;

<!--特殊字符需使用对应的实体名称将其转成实体
常用特殊字符:<、>、空白字符
<:&lt;
>:&gt;
空白字符:&nbsp;
-->
hello &lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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
上一篇:tbytes 转 十六进制 string


下一篇:JavaScript js写九九乘法表方法