HTML标签总结

HTML标签总结

1. 标签的格式：

   <标签名>封装的数据</标签名>

2. 标签名大小写不敏感

3. 标签拥有自己的属性

   • 基本属性：bgcolor = "red" 可以修改简单的样式效果
   • 事件属性：onclick = "alert('你好！')；" 可以直接设置事件响应后的代码

4. 标签又分为，单标签和双标签

   • 单标签格式：<标签名/>
   • 双标签格式：<标签名>...封装的数据...</标签名>

常用标签

特殊字符

HTML源代码	显示结果	描述
&lt;	<	小于号或显示标记
&gt;	>	大于号或显示标记
&amp;	&	可用于显示其它特殊字符
&quot;	"	引号
&reg;	®	已注册
&copy;	©	版权
&trade;	™	商标
&ensp;		半个空白位
&emsp;		一个空白位
&nbsp;		不断行的空白

标题标签

例子：<h1>标题</h1>

h1-h6都是标题标签；h1最大,h6最小

设置标题位置：<h1 align="left">标题</h1> 左对齐。居中对齐：center。右对齐：right。

超链接标签

例子：<a href="http://www.baidu.com" target="_self" >百度</a>：在本窗口跳转到指定链接

参数target = "_blank" 时则在新窗口跳转。

列表标签

无序列表

<ul><!-- 无序列表 -->
    <li>赵四</li>
    <li>刘能</li>
    <li>小沈阳</li>
    <li>宋小宝</li>
</ul>

效果图：

• 赵四
• 刘能
• 小沈阳
• 宋小宝

有序列表

<ol><!-- 有序列表 -->
    <li>赵四</li>
    <li>刘能</li>
    <li>小沈阳</li>
    <li>宋小宝</li>
</ol>

效果图：

1. 赵四
2. 刘能
3. 小沈阳
4. 宋小宝

图片标签

<img src="./people3.jpg" width="1080" height="743" border="1" alt="图片路径不存在"/>

1. src：设置图片的路径
2. width：设置图片的宽度，单位为像素
3. height：设置图片的高度，单位为像素
4. border：设置图片边框的粗细，单位为像素
5. alt：设置当指定路径下没有图片时，用来显示代替的文本内容

web中的路径与平时用的路径有些区别

相对路径： . 表示当前文件所在的目录
.. 表示当前文件所在的上一级目录
文件名 表示当前文件所在目录中的文件，相当于./文件名，其中./可以省略

绝对路径：
http://ip:port/工程名/资源路径

表格标签

<table align="center" border="1" width="500" height="300" cellspacing="0">
    <tr>
        <td align="center"><b>1.1</b></td>
        <th>1.2</th>
        <th>1.3</th>
        <th>1.4</th>
        <th>1.5</th>
    </tr>
    <tr>
        <td colspan="2">2.1</td>
        <td>2.3</td>
        <td>2.4</td>
        <td>2.5</td>
    </tr>
    <tr>
        <td rowspan="2">3.1</td>
        <td>3.2</td>
        <td>3.3</td>
        <td>3.4</td>
        <td>3.5</td>
    </tr>
    <tr>
        <td>4.2</td>
        <td>4.3</td>
        <td colspan="2" rowspan="2">4.4</td>
    </tr>
    <tr>
        <td>5.1</td>
        <td>5.2</td>
        <td>5.3</td>
    </tr>
</table>

效果图：

1.1	1.2	1.3	1.4	1.5
2.1		2.3	2.4	2.5
3.1	3.2	3.3	3.4	3.5
	4.2	4.3	4.4
5.1	5.2	5.3

1. table 是表格标签

   • border设置表格边框宽度
   • with设置表格宽度
   • height设置表格高度
   • align设置表格相对于页面的对齐方式
   • cellspacing 设置单元格间距

2. tr 是行标签

3. th 是表头标签（居中加粗）

4. td 是单元格标签

5. align设置单元格文本对齐方式

   • b 是加粗标签

6. colspan 设置跨列

7. rowspan 设置跨行

iframe标签

iframe标签可以在页面上开辟一个小区有，显示一个单独的页面，一般与其他标签混合使用

使用步骤：

1. 在iframe标签中使用 name 属性定义一个名称
2. 在a标签的target属性上设置iframe的name属性值

例如：

<iframe src="people3.jpg" width = "500" height="300" name = "pic"></iframe>
<br>
<ul>
    <li><a href="people3.jpg" target="pic"> people3.jpg</a></li>
    <li><a href="people.jpg" target="pic"> people.jpg</a></li>
</ul>

表单标签

示例代码

<form action="https://www.baidu.com" method="get">
    <h1>用户注册</h1>
    <input type="hidden" name="action" value="login"/><br/>
    <table align="center">
        <tr>
            <td>用户名称</td>
            <td>
                <input type="text" name="username" value="默认值"/>
            </td>
        </tr>
        <tr>
            <td>用户密码</td>
            <td>
                <input type="password" name="password"/>
            </td>
        </tr>
        <tr>
            <td>确认密码</td>
            <td>
                <input type="password"/>
            </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 type="checkbox" name="hobby" value="java"/>Java
                <input type="checkbox" name="hobby" value="cpp"/>C++
            </td>
        </tr>
        <tr>
            <td>国籍</td>
            <td>
                <select name="country">
                    <option value="none">---请选择国籍---</option>
                    <option value="china" selected="selected">中国</option>
                    <option value="america">美国</option>
                    <option value="japan">日本</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我评价</td>
            <td>
                <textarea  name="desc" rows="10" cols="20">我才是默认值</textarea>
            </td>
        </tr>
        <tr>
            <td><input type="reset" value="修改按钮上的文本（重置）"/></td>
            <td>
                <input type="submit" value="修改按钮上的文本（提交）"/>
            </td>
        </tr>
    </table>
</form>

效果图：

用户注册

​

用户名称
用户密码
确认密码
性别	男 女
兴趣爱好	Java C++
国籍	---请选择国籍--- 中国 美国 日本
自我评价	我才是默认值

表单就是在html页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器。

标签名：form

• input type = "text" 是文本输入框 value设置文本框的默认值

• input type = "password" 是密码输入框

• input type = "radio" 是单选框, name属性可以对其进行分组 checked = "checked" 表示默认选中

• input type="checkbox"是复选框

• select 是下拉列表框

  • option 是下拉列表中的选项 selected="selected"表示默认选中

• textarea表示多行文本输入框(起始标签喝结束标签中的内容是默认值)

  • rows 设置可以显示几行
  • cols 设置每行可以显示几个字符宽度

• input type = "reset" 是重置按钮 value属性修改按钮上的文本

• input type = "submit" 是提交按钮 value属性修改按钮上的文本

• input type = "button" 是提交按钮 value属性修改按钮上的文本

• input type="file" 是文件上传域，用于提交文件等操作

• input type="hidden" 是隐藏域，当我们需要发送某些信息，而这些信息不需要用户参与（提交的时候同时发送给服务器）

• action 设置提交的服务器地址

• method 设置提交的方式：get（默认值）或post
  get请求的特点：

  1. 浏览器地址栏中的地址是：action属性+？+请求参数
     请求参数的格式是：name=value&name=value
  2. 不安全
  3. 有数据长度的限制

  post请求的特点：

  1. 浏览器地址栏中只有action属性值
  2. 相对于get请求更安全
  3. 理论上没有数据长度的限制

表单提交的时候，数据没有发送给服务器的三种情况:

1. 表单项没有name属性值
2. 单选，复选（下拉列表中的option标签）没有添加value属性
3. 表单项不在提交的form标签中

其他标签

div, span, p

• div标签 默认独占一行
• span标签 它的长度就是封装数据的长度
• p标签 默认会在段落的上方或者下方空出一行（如果已有就不再空）