html常用标签

来源：互联网发布：阿里云ecs 3306端口编辑：程序博客网时间：2024/06/14 03:07

一年前学的，没怎么用都忘了。现在整理笔记做一下复习。

HTML————HyperText Markup Language
/*
注释：
空格： &npsp
<：&lt
>：&gt
&：&amp
*/
一、html的头标签
<title></title>
<meta/>：设置相关内容
<base/>
<link/>
二、html常见标签
1.<b></b> 加粗
2.<u></u> 下划线
3.<i></i> 斜体
4.<s></s> 删除线
5.<pre></pre> 远洋输出
6.<sub></sub> 下标
7.<sup></sup> 上标
================
div与span：划分区域
   <div></div>自动换行
   <span></span>不换行
三、列表标签
1.<dl></dl>：列表范围
    <dt></dt>：表头
    <dd></dd>：表的内容
代码：

<dl><dt>算法<dt><dd>Bellman-Ford</dd><dd>Dijkstra</dd><dd>Floyd</dd><dd>KMP匹配</dd><dd>AC自动机</dd><dd>容斥原理</dd></dl>

2.<ol></ol>：有序列表
      ——type:设置排序方式
   <li></li>
3.<ul></ul>：无序标签范围
      ——type：前缀样式
    <li></li>
四、图像与超链接标签
<img/>
    ——src：地址
    ——width：宽
    ——height：高
    *——alt：鼠标放在图片上后出现的文字。
代码：

<img src="12978223538797.jpg" width="600" height="700"/>

<a><a/>
   ——href：路径
   ——target：设置打开方式
       ="_blank"：在新窗口打开
       ="_self"：在当前窗口打开（默认）
其它用途：定位资源
案例CSDN博客：回顶部
代码：

  <!--在回到位置--><a name="top"></a>  <a href="#top">回顶部</a>

*************注意***************
—当a标签里面访问网络资源时，必须加一个http协议。
—当前浏览器里面找到相关协议，首先看这个协议是不是http。
   如果不是，就去本地找支持这个协议的应用。
五、表格标签
<table></table>
   ——border
       ="1"：有钱
   ——bordercolor：线颜色
   ——cellspacing：每格之间的距离
   ——width：宽
   ——height：高
     <caption></caption>：表格标题
     <tr></tr>：行
        ——align="right"：右对齐
   ——rowspan：跨行
     <td></td>或<th></th>（实现加粗和居中）：列
     合并单元格操作：
   ——colspan：跨列
   ——rowspan：跨行
代码：

<table border="1" cellspacing="0"><caption>欧洲国家</caption><tr><th rowspan="9">欧洲国家</th><!-- <th colspan="4">欧洲国家</th> --></tr><tr><td>德国</td><td>柏林</td><td>10月3日</td><td>矢车菊</td></tr><tr><td>法国</td><td>巴黎</td><td>7月14日</td><td>鸢尾花</td></tr><tr><td>丹麦</td><td>哥本哈根</td><td>4月16日</td><td>冬青</td></tr><tr><td>挪威</td><td>雅典</td><td>3月25日</td><td>橄榄</td></tr><tr><td>奥地利</td><td>维也纳</td><td>10月26日</td><td>火绒草</td></tr><tr><td>意大利</td><td>罗马</td><td>6月2日</td><td>雏菊</td></tr><tr><td>瑞士</td><td>伯尔尼</td><td>8月1日</td><td>火绒草</td></tr><tr><td>捷克</td><td>布拉格</td><td>10月28日</td><td>玫瑰 </td></tr></table>

六、表单标签
<form></form>
    ——action：提交地址
    ——method：表单提交方式
       ="get"（默认）
       ="post"
       [get与post的区别]
        1.get请求地址栏回携带提交的数据，post不会
   2.get请求安全级别低，post较高
   3.get请求数据大小有限制，post没有限制
    ——name
      <input/>:输入项
          ——name
          ——type：输入类型
         ="text"：普通输入
         ="password"：密码输入
         ="radio"：单选项
            （同内单选项之间name要相同，此为默认选项时checked="checked"）
         ="checkbox"：可复选框
         ="file" ：文件
         ="hidden"：隐藏项
         ="submit"：提交按钮
         ="image"：图片提交
         ="reset"：重置
         ="button"：普通按钮
     <select></select>：下拉输入项
        <option></option>
       ——value：值
       ——selected="selected"（表示此为默认选项时）
     <textarea></textarea>
        ——cols：列 ——rows：行

代码：

<html> <head>  <meta http-equiv="content-type" content="text/html; charset=UTF-8">  <title>Document</title> </head> <body><h1>欢迎加入我们</h1><form><table  cellspacing="12"><tr><td align="right">邮箱</td><td><input size="25" name="email" type="text"/></td></tr><tr><td align="right">密码</td><td><input size="25" name="key" type="tpassword"/></td></tr><tr><td align="right">名号</td><td><input size="25" name="nickname" type="text"/></td></tr><td></td><td><font size="2" color="#808080">第一印象很重要，起个响亮的名号吧</font></td></tr></tr><tr><td align="right">性别</td><td><input name="sex" type="radio" checked="checked" value="female"/>女    <input name="sex" type="radio" value="male"/>男</td></tr><tr><td align="right">出生日</td><td><select name="year"><option value="1995">1997</option><option value="1995">1996</option><option value="1995">1995</option><option value="1995">1994</option><option value="1995">1993</option><option value="1995">1992</option></select> 年<select name="month"><option value="1995">1</option><option value="1995">2</option><option value="1995">3</option><option value="1995">4</option><option value="1995">5</option><option value="1995">6</option></select> 月<select name="day"><option value="1995">21</option><option value="1995">22</option><option value="1995">23</option><option value="1995">24</option><option value="1995">25</option><option value="1995">26</option></select> 日</td></tr><tr><td align="right">手机号</td><td><input size="25" name="phone" type="text"/></td></tr><td></td><td><font size="2" color="#808080">用手机接受验证码</font></td></tr><td align="right">验证码</td><td><input size="10" name="code" type="text"/><input type="button" value="获取验证码"/></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td><td><input name="agree" type="checkbox"/><font size="2" color="#808080">我已经认真阅读并同意豆瓣的《<a href="#">使用协议</a>》。 </font></td></tr></tr><td></td><td><input type="submit" value="注册" style="height:40px;width:80px;color:#999;font-size:16px;font-weight:bolder;display:inline-block;"/></td></tr></table ></form><br/>    <p>2015/9/26</p> </body></html>

*七、框架标签
<frmeset></frameset>
        ——cols：列
   ——rows：行
     <frame/>
          ——nam
          ——src

0 0