写前端页面很容易，你只是没找对方法而已

最新推荐文章于 2021-07-24 23:05:04 发布

大脑袋先生จุ๊บ

最新推荐文章于 2021-07-24 23:05:04 发布

阅读量200

点赞数 3

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_42584783/article/details/109261212

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

p&br&hr标签

p 表示段落，默认段落上下会有行间距
br 是换行，自闭和标签
hr 是横线

            <p> 段落自带行间距 </p>
            <p> 段落自带行间距 </p>
           <hr/>
           <br/>
           <br/>

a标签

1、可添加超链接标签；
2、有锚的作业，相当于业内定位；

   <a href="http://blog.csdn.net/qq_34409701">默认为本页跳转 </a>

   <a href="http://blog.csdn.net/qq_34409701" target="_block">添加target=_block的属性后，新的页面将另开session来显示 </a>

h标签

标题标签:

       <h1>1号字体最大</h1>
       <h2>字体大小随着“h”后面的数字变大，而变小</h2>
       <h3>当然这个大小并非不可调试</h3>
       <h4>可以通过css的样式进行再次调整</h4>
       <h5>具体的css介绍可以参考下一篇css介绍</h5>
        <h6>在原始标签中6号为最小号</h6>

select标签

即我们常见的下拉框的标签

     <!--既然是框体，就会选择出具体的数值，意味着下一步会将数据提交给后台，目前的前后台是以“键值对”的形势来进行信息收发，因此需要标记value 来对应具体的值，其作用是防止数值过长，占用空间 -->
        <p>-------我是华丽丽的分隔线-------</p>
        <p>-------以下为最常见的下拉框形势-------</p>
        <select>
                <option value="1">Beijing</option>
                <option value="2">Shanghai</option>
                <option value="3">Chongqing</option>
        </select>
        <p>-------我是华丽丽的分隔线-------</p>
        <p>-------size=$i属性，来控制框中初始显示几      个选项；使用multiple属性，可以让内容多选-------</p>
        <select multiple="multiple" size="3">
        <option value="1">Beijing</option>
        <option value="2">Shanghai</option>
        <option value="3">Chongqing</option>
        </select>
        <p>-------我是华丽丽的分隔线-------</p>
        <p>-------使用group、label，可以对框内内容进   行递归分类-------</p>
        <select >
              <optgroup label="Beijing">
              <option value="1">Shijingshanqu</option>
              <option value="2">chaoyangqu</option>
              </optgroup>
              <optgroup label="Shanghai">
              <option value="1">Chongmingqu</option>
              <option value="2">Minhangqu</option>
              </optgroup>
         </select>

效果依次如下：
在这里插入图片描述

Input标签

Checkbox：多选框;
radio：单选框
filedset:获得一个有名字的边框
text：明文输入信息
password：密文输入信息
button:按钮
submit：提交
reset：重置
file:选择文件
textarea:备注信息框
form:表单，设置submit、reset数据的范围，一般在一个form里的数据会被一起提交
ul：带点的列表
ol：带序号的列表
dl：递归的列表

     <!DOCTYPE html>
          <html lang="en">
         <head>
            <meta charset="UTF-8">
            <meta http-equiv="x-ua-compatible"            content="IE=edge"/>
            <title>注册</title>
            <link rel="shortcut icon"        href="http://image.so.com/v?q=%E6%B5%B7%E8%B4%BC%E7%8E%8B%E5%A4%B4%E5%83%8F&src=srp&fromurl=http%3A%2F%2Fwww.3761.com%2Fyule%2Fhtml%2F171109.html#q=%E6%B5%B7%E8%B4%BC%E7%8E%8B%E5%A4%B4%E5%83%8F&src=srp&fromurl=http%3A%2F%2Fwww.3761.com%2Fyule%2Fhtml%2F171109.html&lightboxindex=5&id=1df6633303e906af8df32c6fa44078ed&multiple=0&itemindex=0&dataindex=20"/>
        </head>
           <body style="background-color:whitesmoke">
         <h3>模拟注册页</h3>
    <fieldset style="border:2px dashed gray">
        <legend style="font-size:18px;font-style: italic;">用户注册</legend>
        <form enctype='multipart/form-data' method='get'>
            <div>
                用户名：
                <input type="text">
            </div>
            <div>
                密&nbsp;&nbsp;码：
                <input type="password">
            </div>
            <h4>爱好：:</h4>
            <div>
                男：
                <input type="checkbox" name="male" value="1">
                女：
                <input type="checkbox" name="female" value="2">
                动物：
                <input type="checkbox" name="animal" value="3">
            </div>
            <h4>生日：</h4>
            <div>
                <select>
                    <option value="1">1970</option>
                    <option value="2">1980</option>
                    <option value="3">1990</option>
                    <option value="4">2000</option>
                </select>
                年份
                <select>
                    <option value="1">第一</option>
                    <option value="2">第二</option>
                    <option value="3">第三</option>
                    <option value="4">第四</option>
                </select>
                季度
                <select>
                    <option value="1">上旬</option>
                    <option value="2">中旬</option>
                    <option value="3">下旬</option>
                </select>
            </div>
            <h4>性别:</h4>
            <div>
                male:
                <input type="radio" value="male" name="sex"/>
                female:
                <input type="radio" value="female" name="sex"/>
            </div>
            <h4>上传照片:</h4>
            <div>
                <input type="file"/>
                <input type="button" name="update" value="上传" />
            </div>
            <h4>自我介绍</h4>
            <div>
                <textarea></textarea>
            </div>
            <h4>数据操作</h4>
            <div>
                <input type="submit" name="submit" value="提交" />
                <input type="reset" name="reset" value="重置" />
            </div>
            <ol>
                必须遵守事项:
                <li>防止世界被破坏</li>
                <li>维护宇宙的和平</li>
                <li>尊老爱幼讲礼貌</li>
            </ol>
        </form>
    </fieldset>
   </body>
 </html>

效果如：
在这里插入图片描述

table：表格 li:列表

     <!DOCTYPE html>
       <html lang="en">
           <head>
                  <meta charset="UTF-8">
                  <title>table</title>
           </head>
           <body>
                  <ul>
                    <li>农夫山泉</li>
                    <li>恒大冰泉</li>
                  </ul>
               <!--style="list-style-type: none"消除格式-->
               <ul style="list-style-type: none">
                <li>海贼王</li>
                <li>死神</li>
                </ul>
                  <ol>
                  <li>好好学习</li>
                  <li>天天向上</li>
                 </ol>
                 <dl>
                      <dt>北京</dt>
                      <dd>雍和宫</dd>
                      <dd>紫禁之巅</dd>
                      <dt>天津</dt>
                      <dd>天津之眼</dd>
                     <dd>瓷房子</dd>
                  </dl>
                   <table style="border:1px solid darkred">
                 <thead>
                    <tr>
                      <!--colspan 横向合并-->
                      <th colspan="3">标题一</th>
                      <th>标题二</th>
                      </tr>
                      </thead>
                       <tbody>
                        <tr>
                            <td>内容一</td>
                            <td >内容二</td>
                            <td>内容三</td>
                            <td>内容四</td>
                         </tr>
                     </tbody>
                     <tbody>
                     <tr>
                       <td>内容一</td>
                       <td>内容二</td>
                       <td>内容三</td>
                        <td>内容四</td>
                      </tr>
                       </tbody>
                        </table>
                          <hr/>
                      <table style="border:3px solid yellowgreen">
                        <tr>
                         <th>标题一</td>
                         <th>标题二</th>
                         <th>标题三</th>
                          <th>标题四</th>
                        </tr>
                         <tr>
                           <td>内容一</td>
                             <!--rowspan 纵向合并-->
                               <td rowspan="2">内容二</td>
                               <td>内容三</td>
                               <td>内容四</td>
                          </tr>
                          <tr>
                               <td>内容一</td>

                               <td>内容三</td>
                               <td>内容四</td>
                            </tr>

                        </table>
                         </body>
                        </html>

效果如：
在这里插入图片描述

大脑袋先生จุ๊บ

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
写前端页面很容易，你只是没找对方法而已

p&br&hr标签p 表示段落，默认段落上下会有行间距br 是换行，自闭和标签hr 是横线 段落自带行间距 段落自带行间距 <hr/> a标签1、可添加超链接标签；2、有锚的作业，相当于业内定位； <a href=
复制链接

扫一扫