码迷,mamicode.com
首页 > 其他好文 > 详细

前端之head标签,基本标签,div和span,常用标签,表单标签

时间:2020-01-25 22:01:01      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:table   row   size   action   基本标签   refresh   fresh   属性   pre   

一、head标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="icon" href="https://www.jd.com/favicon.ico">
    <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
    <meta name="description" content="老男孩培训机构是由一个很老的男孩创建的">
    <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">
</head>
<body>
yuan
</body>
</html>

二、基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<hr>

<h3>鹅鹅鹅</h3>
鹅鹅鹅,<br>
曲项向天歌,<br>
白毛浮绿水,<br>
红掌拨清波.
<hr>
<h3>鹅鹅鹅</h3>
<p>&nbsp;&nbsp;鹅鹅,</p>
<p>曲项向天歌,</p>
<p>白毛浮绿水,</p>
<p>红掌拨清波.</p>
<hr>
ALEX <b>ALEX</b> <strong>ALEX</strong> <i>ALEX</i>  <strong><i>ALEX</i></strong>
2 <sub>3</sub>
2 <sup>3</sup>
<hr>
&pi;

</body>
</html>

三、div和span

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            font-size: 28px;
            font-weight: bolder;
            color: red;
            background-color: green;
            font-style: italic;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>

alex
<div>alex</div>
<span>alvin</span>
<span>egon</span>

</body>
</html>

四、常用标签(img和超链接、列表标签、表格标签)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h3>img和超链接标签</h3>

<a href="http://127.0.0.1:8800" target="_blank">点击</a>
<a href="http://127.0.0.1:8800" target="_blank"><img src="meinv.jpg" alt="美女" title="美女图片" height="600" width="960"></a>

<h3>列表标签</h3>

<ul>
    <li>111</li>
    <li>111</li>
    <li>111</li>
</ul>

<ol>
    <li>111</li>
    <li>111</li>
    <li>111</li>
</ol>

<dl>
    <dt>河北省</dt>
    <dd>保定</dd>
    <dd>石家庄</dd>
    <dd>廊坊</dd>
</dl>
<h3>表格标签</h3>

<table border="1" cellspacing="5" cellpadding="3" style="border: 1px solid red">
    <thead>
         <tr>
             <th>姓名</th>
             <th>年龄</th>
             <th>薪水</th>
         </tr>
    </thead>
    <tbody>
           <tr>
               <td>张三</td>
               <td>23</td>
               <td rowspan="2">3000</td>
           </tr>
            <tr>
               <td>张三</td>
               <td>23</td>

           </tr>
           <tr>
               <td colspan="2" style="text-align: center">张三 23</td>

               <td>3000</td>
           </tr>
    </tbody>
</table>


</body>
</html>

五、表单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>注册页面</h3>

<form action="http://127.0.0.1:8800" method="post">
    <p>
        <label for="abc">姓名</label>
        <input type="text" name="user" id="abc" maxlength="5">

    </p>
    <p>密码 <input type="password" name="pwd" ></p>
    <div>
        爱好:
        <input type="checkbox" name="hobby" value="lanqiu" checked>篮球
        <input type="checkbox" name="hobby" value="zuqiu">足球
        <input type="checkbox" name="hobby" value="shuangseqiu">双色球
    </div>
    <div>
        性别:
        <input type="radio" name="gender" value="male"><input type="radio" name="gender" value="female"><input type="radio" name="gender" value="qita">其他
    </div>
    <input type="hidden" name="token" value="123asd2342">
    <!--<input type="file">-->
    <div>
        籍贯:
        <select name="pro" size="3" multiple>
            <option value="hebei">河北省</option>
            <option value="hunan" selected="selected">湖北省</option>
            <option value="beijing" selected="selected">北京省</option>
        </select>
    </div>
    <div>
        <textarea name="per" cols="50" rows="10" placeholder="个人简介"></textarea>
    </div>
    <hr>
    <div>
        <input type="button" value="按钮" onclick="alert(123)">
        <input type="reset">
    </div>

    <input type="submit">


</form>



</body>
</html>

 

前端之head标签,基本标签,div和span,常用标签,表单标签

标签:table   row   size   action   基本标签   refresh   fresh   属性   pre   

原文地址:https://www.cnblogs.com/youhongliang/p/12233455.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!