html标签全集

html标签

复制代码
<!DOCTYPE html>

<html lang="en">
<head>
    <title>JD</title>
    <!--标题图标，用的是京东的小图-->
    <link rel="icon" href="http://www.jd.com/favicon.ico">

<!--  引入css 和js 的方式  -->
    <link rel="stylesheet" href="test.css">
    <script src="test.js"></script>　


    <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
    <meta name="description" content="老男孩培训机构是由一个老的男孩创建的">

    <meta http-equiv="content-type" charset="UTF-8" >
    

    <meta htttp-equiv="Pragma" content="no-cache">
    <!--  两秒后刷新页面，并跳到百度  -->
<!--    <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">-->
    <!--  为了兼容IE6，7，8等，可使用X-UA-Compatible标签来兼容它  -->
    <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />
</head>


<body>
<img id="abc" src="shebaoka.png" alt="图片没有加载成功时，提示！" title="鼠标悬浮提示" width="200px" height="200px">
</br>
hello world hello word2
<!--标题标签-->
<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>
<h4>hello world</h4>
<h5>hello world</h5>


<h2>咏鹅h2</h2>
<!--段落标签-->
<p>p鹅鹅鹅p</p>
<p>p曲项向天歌..</p>

<!--换行标签-->
鹅鹅鹅br</br>
曲项向天歌br</br>
<br>
<br>

<!--strong加粗标签，内联标签-->
<strong>飞流直下三千尺</strong>

<!--b是strong的物理版本加粗标签，内联标签，用途最低,已淘汰-->
<b>飞流直下三千尺。。。</b>

</br>
<!--strike 划掉线-->
<strike> strike 划掉线</strike>

</br>
<!--对文档中的文本进行格式化-->
<em style="background-color: firebrick"> em 斜体</em>

</br>
<!--sub：代替，潜艇   sup：冲浪-->
3<sub>2</sub>
3<sup>2</sup>

<!--横线-->
<hr>

<h1 style="color: green; background-color: aquamarine;height: 100px;width: 100px">hello h1</h1>
<div style="color: green; background-color: aquamarine;height: 100px;width: 50%;font-size: 40px;text-align: center">hello div</div>

<span style="background-color: rebeccapurple">hello span</span>

<h2 style="background-color: rebeccapurple;">h2</h2><p style="background-color:yellow">ppppppp</p>


特殊字符
<!--3>2-->
3&gt2
<!--2<3-->
2&lt3

</br>
<!--5个空格-->
AAA&nbsp&nbsp&nbsp&nbsp&nbspBBB

</br>
<!--版权符号:    &copy;&reg;-->
&copy;&reg;
<hr>

<!--div是块级标签，可以嵌套所有类型标签；另外p标签是块级，使用时建议与块级标签并联-->
<div>
    <p>p标签（块级标签，独占一行）</p>
    <div>
        <span>span（内敛标签）</span>
        <span>span（内敛标签）</span>
    </div>
</div>

<!--span是内联标签，所以只能嵌套内联标签-->
<span>
    <a href="https://www.jd.com/" target="_blank">京东A</a>
    &nbsp&nbsp&nbsp&nbsp&nbsp
    <a href="https://www.tmall.com/" target="_blank">天猫A</a>
</span>
<br/>
<br/>
<a href="https://www.jd.com/" target="_blank">
    <img src="123.png" alt="can not open image 123.png" title="京东截图">
</a>

<hr>
<!--order list-->
<h3>有序列表：</h3>
<ol>
    <li>111</li>
    <li>22</li>
    <li>333</li>
</ol>

<!--unorder list-->
<h3>无序列表：</h3>
<ul>
    <li>111</li>
    <li>22</li>
    <li>333</li>
</ul>

<!--define list-->
<h3>定义列表：</h3>
<dl>
    <dt>第一章</dt> <!--define title-->
    <dd>第一节</dd> <!--define details-->
    <dd>第二节</dd>
    <dd>第三节</dd>
</dl>

<hr>
<!--表格-->
<table border="20px" cellpadding="50px" cellspacing="5px">
    <thead>
           <tr>
                  <th>111</th>
                  <th>222</th>
                  <th>333</th>
           </tr>
    </thead>

    <tbody>
           <tr>
               <td rowspan="2">3333</td>
               <td>2222</td>
               <td>3333</td>
           </tr>
           <tr>

               <td>2222</td>
               <td>3333</td>
           </tr>
           <tr>
               <td>1111</td>
               <td colspan="2">4444</td>

           </tr>


    </tbody>
</table>
<hr>
<!--表单-->
<h1>注册页面</h1>
<form action="http://127.0.0.1:8090/index" method="post" enctype="multipart/form-data">
    <!--input checkbox：多选框； radio：单选； file：文件类型-->
    <p>公司名称<input type="text" name="company name" value="Endeavor streaming" readonly="readonly" disabled="disabled"></p>
    <p>姓名<input type="text" name="username" placeholder="姓名"></p>
    <p>密码<input type="password" name="password" placeholder="密码"></p>
    <p>爱好：    音乐<input type="checkbox" name="hobby" value="music" checked="checked">电影<input type="checkbox" name="hobby" value="movie"></p>
<!--单选，两个name都等于gender，就会使之称为2选一-->
    <p>性别：     男<input type="radio" name="gender" value="men">女<input type="radio" name="gender" value="women"></p>
    <p><input type="file" name="put_file"></p>
<!--
上传文件注意两点：
 1 请求方式必须是post
 2 enctype="multipart/form-data"

 把server端把文件读出来，就用下面这段代码。
 def index(request):
    print request.POST
    print request.GET
    print request.FILES
    for item in request.FILES:
        fileObj = request.FILES.get(item)
        f = open(fileObj.name, 'wb')
        iter_file = fileObj.chunks()
        for line in iter_file:
            f.write(line)
        f.close()
    return HttpResponse('ok')
 -->


    省
      <select name="province" multiple size="6">
        <!--multiple 可以多选，size：显示出来几行-->
            <optgroup label="河北省">
                        <option value="beijing">邯郸</option>
                        <option value="hebei">廊坊</option>
                        <option value="henan" selected="selected">唐山</option>
                        <option value="shanxi">保定</option>
            </optgroup>


      </select>

    简介<textarea name="desc" rows="10" cols="20"></textarea>

    <p><input type="reset" value="重置">将所有已填信息重置成默认</p>
    <p><input type="button" value="button">用于JS的调用</p>
    <p><input type="submit" value="提交注册">submit类型的input标签</p>

</form>
<hr>

<!--for值=id值，则点击“姓名”两个字，可以使焦点设置到编辑框中,只是input标签增加一个动态效果，可以忽略-->
<label for="def123">姓名</label>
<input id="def123" type="text">
<hr>

<a href="#abc">返回到社保卡图片位置</a>
</body>

</html>
复制代码

 

 

posted @   seven1986  阅读(25)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 提示词工程——AI应用必不可少的技术
点击右上角即可分享
微信分享提示
AI IDE Trae