html标签汇总及使用

font标签

　　color属性修改颜色

　　face属性修改字体

　　size属性修改字体大小

<font color="blue" size="5" face="宋体">字体</font>

 

常用的特殊字符怎么表示

　　<-------&lt

　　>-------&gt

　　空格-----&nbsp

一个<br>文 本

 

标题标签

　　<h1>标题</h1>

　　h1->h6表示从大到小

aligen　　

    <h1 align="left">标题</h1> <!-- 左对齐（默认）-->
    <h1 align="right">标题</h1> <!-- 右对齐 -->
    <h1 align="center">标题</h1> <!-- 居中 -->

 

超链接

a标签：设置按钮文案
a标签中的href属性：设置跳转地址

target属性设置哪个目标进行跳转

　　_self　　表示当前页面（默认值）

　　_blank　　表示打开新页面来进行跳转

<a href="http://www.baidu.com>百度</a>

 

列表标签

有序列表ol

无序列表ul

　　type属性可以修改列表项前面的符号

<ul>
        <li>刘能</li>
        <li>赵四</li>
        <li>小沈阳</li>
        <li>宋小宝</li>
</ul>

 

 

img标签

说明：是图片标签，用来显示图片

src属性可以设置图片的路径

width属性和height属性设置宽高

border属性设置图片边框大小

alt属性设置当指定路径找不到图片时，用来代替显示的文本内容

　　

Java SE中路径分为相对路径和绝对路径

• 相对路径：

　　　　从工程名开始算

• 绝对路径：

　　　　盘符：/目录/文件名

在web中路径也分为相对路径和绝对路径两种

• 相对路径：

　　　　.　　　　表示当前文件所在的目录

　　　　..　　　　表示当前文件所在的上一级目录

　　　　文件名　　表示当前文件所在目录的文件，相当于./文件名

• 绝对路径：

　　　　格式是：http://ip:port/工程名/资源路径

 

表格标签

table标签

　　border属性设置表格边框

　　width属性和height属性分别设置宽高

　　align属性设置表格相对于页面的对齐方式

　　cellspacing属性设置单元格间距

tr 是行标签

th是表头标签

td是单元格表格

　　align属性设置单元格文本对齐方式

b是加粗标签

colspan属性设置跨列

rowspan属性设置跨行

<table align="center" border="1" cellpadding="0">
    <tr>
        <th width="200" height="400">1.1</th>
        <th>1.2</th>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
    </tr>
</table>

 

iframe标签

可以在页面上开启一个小区域显示单独的页面

<!--iframe和a标签组合使用的步骤：
        1.在iframe标签中使用name属性定义一个名称
        2.在a标签的target属性上设置ifram的name的属性值
    -->
<iframe src="HTMLWork.html" width="500" height="200" name="abc"></iframe>
<br/>
<ul>
    <li><a href="HTMLWork.html" target="abc">HTMLWork</a></li>
</ul>

 

表单

    <!--
        form标签就是表单
            input type=text         是文件输入框      value设置默认显示内容
            input type=password     是密码输入框      value设置默认显示内容
            input type=radio        是单选框          name属性可以对其进行分组 checked="checked"表示默认选中
            input type=checkbos     是复选框          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>
        用户名称：<input type="text" value="请输入用户名称"> <br><br>
        用户密码：<input type="password" value="默认值"> <br><br>
        确认密码：<input type="password" value="默认值"> <br><br>
        性别：<input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女 <br><br>
        兴趣爱好：<input type="checkbox" checked="checked">唱<input type="checkbox" checked="checked">跳<input type="checkbox" checked="checked">rap<br><br>
        国籍：<select>
            <option selected="selected">--请选择--</option>
            <option>中国</option>
            <option>美国</option>
            </select><br><br>
        自我评价：<textarea rows="2" cols="30">输入框默认值</textarea><br><br>
        <input type="reset" value="重置"/>
        <input type="submit" value="提交">
        <input type="button" value="button">
        <input type="file">
        <input type="hidden" name="name" value="value">
    </form>

 

表单的提交

    <!--
        form标签是表单标签
            action属性设置提交的服务器地址
            method属性设置提交的方式Get(默认值)或POST
        表单提交的时候，数据没有发送给服务器的三种情况：
            1。表单项没有name属性值
            2。单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
            3。表单项不再提交的form标签中
        GET请求的特点是：
            1。浏览器地址栏中的地址是：action属性[+？+ 请求参数]
            2。不安全
            3。有数据长度的限制，只能传ASCII
        POST请求的特点是：
            1。浏览器地址栏中只有action属性值
            2。相对于GET请求要安全
            3。理论上没有数据长度的限制
    -->
<form action="http://localhost:8080" method="post">
    <table>
        <tr>
            <td>用户名称：</td>
            <td><input type="text" name="userName" value="请输入用户名称"></td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td><input type="password" name="password" value="默认值"></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex" value="boy" checked="checked">男
                <input type="radio" name="sex" value="girl">女
            </td>
        </tr>
        <tr>
            <td>兴趣爱好：</td>
            <td>
                <input name="hobby" value=0 type="checkbox"  checked="checked">唱
                <input name="hobby" value=1 type="checkbox" checked="checked">跳
                <input name="hobby" value=2 type="checkbox" checked="checked">rap
            </td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td>
                <select name="country">
                    <option value="none" selected="selected">--请选择--</option>
                    <option value="cn">中国</option>
                    <option value="usa">美国</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td><textarea name="desc" rows="2" cols="30">输入框默认值</textarea></td>
        </tr>
        <tr>
            <td><input type="button" value="button"></td>
            <td><input type="file"></td>
            <td><input type="hidden" name="name" value="value"></td>
        </tr>
        <tr>
            <td><input type="reset" value="重置"/></td>
            <td><input type="submit" value="提交"></td>
        </tr>
    </table>