HTML标签总结

  • A+
所属分类：Web前端
摘要

标签的格式：<标签名>封装的数据</标签名>标签名大小写不敏感标签拥有自己的属性
便宜好用的国外VPS推荐

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" alt="HTML标签总结" 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" alt="HTML标签总结" 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标签 默认会在段落的上方或者下方空出一行（如果已有就不再空）
便宜好用的国外VPS推荐