zoukankan      html  css  js  c++  java

  • 前端标签

    前端标签

    创建一个网页

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>性感晨阳在线发牌</title>
        <meta http-equiv="refresh" content="3;URL=https://www.baidu.com">
    <!-- #刷新页面，3秒后刷新到制定网址-->
    ​
    <!--    <script> alert('欢迎来到激情交流')</script>-->
    <!--&lt;!&ndash;    #提示信息&ndash;&gt;-->
    <!--    <style> h1 {color: blueviolet;}</style>-->
    <!--    改变字体颜色-->
        <link rel="stylesheet" href="12.23前端标签/mycss.css">
    <!--    通过引入css代码更改字体颜色-->
        <script src="12.23前端标签/myjs.js"></script>
    <!--    通过js代码更改提示-->
    </head>
    <body>
    <h1>激情交流</h1><a href="https://www.mzitu.com">点我</a><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=276938278,2845396192&fm=26&gp=0.jpg" alt="" title="重金求子">
    <!--设置内容： 标题激情交流：，网址："https://www.mzitu.com"网址后加点击选项调转网址，图片，alt为当图片加载不出来时，默认的提示信息可不写，title为将鼠标悬浮到图片上显示的内容，也可使用 width,height 单个使用的话等比例放大或缩小-->
    ​
    </body>
    </html>
    注意：写完标签名字后可用Tab键自动补全，建议将js代码与css代码进行分离写入方便维护

    body内常用标签

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h1>1</h1>
    <h2>2</h2>
    <h3>2</h3>
    <h4>4</h4>
    <!--h1-h4为1-4级标题-->
    <s>删除线</s>
    <u>下划线</u>
    <b>加粗</b>
    <i>斜体</i>
    <!--字体格式-->
    <p>国破山河在&nbsp;&nbsp;城春草木深</p>
    <!--&nbsp;为增加空格几个就增加几个-->
    <hr>
    <!--<hr>为分割线-->
    <p>a &gt; b</p>
    <!--a大于b-->
    <p>a &lt; b</p>
    <!--a小于b-->
    <p>a &amp; b</p>
    <!--&本身-->
    <p> &yen; 10000000</p>
    <!--￥符号-->
    <p> &copy; </p>
    <!--版权符号-->
    <p> &reg; </p>
    <!--注册商标符号-->
    </body>
    </html>
    1.块儿级标签
                独占一行  h1~h6  p   br   hr   div 
                1.块儿级标签内部可以嵌套任意的块儿级标签和行内标签
                2.特列:p虽然是块儿级标签 但是它的内部只能嵌套行内标签 不能嵌套块儿级标签
                    如果嵌套了 没有问题 只是不符合html语法规范
            2.行内标签    u  s  i  b  span(spend本身没有任何意义，却在前期布局中使用极多)
                自身文本多大 就占多大
                行内标签内部不能嵌套块儿级标签和行内标签

    连接标签

    CTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <img src="12.23前端标签/303053.jpg" alt="王者甄姬" title="洛神" width="500px" >
    <a href="https://www.baidu.com" target="_self" id="" class=""> 快戳我</a>
        id属性:唯一标识当前html页面中的某一个标签
        class属性：类似于面向对象中的继承，直接引用别的类中的样式
    <a href="https://www.baidu.com" target="_blank"> 快戳我嘛</a>
    <!--target中参数 alt为当前页面跳转，blank为新开一页页面跳转-->
    <div style="height: 800px "></div>
    <a href="" id="d1">中间</a>
    <div style=" height: 800px"></div>
    <a href="#d1">回到中间</a>
    </body>
    </html>
    锚点功能
        通过href中的id字段定义连接回到相应的地点
    ​

    标题列表

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <p>无序列表</p>
       <!-- 只要页面上出现了比较有规则排列的文本 基本上都可以用无序列表来实现-->
    <ul>
        <li>123</li>
        <li>1234</li>
        <li>12345</li>
    </ul>
    <p>有序列表</p>
    <ol>
        <li>嗯~~</li>
        <li>啊~~</li>
        <li>不要嘛~</li>
    </ol>
    <p>标题列表</p>
    <dl>
        <dt>标题一</dt>
        <dd>内容一</dd>
        <dd>内容二</dd>
        <dt>标题二</dt>
        <dd>内一</dd>
        <dd>内二</dd>
    </dl>
    </body>
    </html>

    表格标签

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <table border="1">
    <!--    表格标签，border添加表格线-->
        <thead>
    <!--    表格结构内容-->
        <tr>
            <th>用户名</th>
            <th>年龄</th>
            <th>爱好</th>
    <!--        th加粗，td不加粗-->
        </tr>
    <!--    一个tr就是一行内容-->
        </thead>
        <tbody>
    <!--    表格数据-->
        <tr>
            <td>jsson</td>
            <td>18</td>
            <td>study</td>
        </tr>
        <tr>
            <td rowspan="2">tank</td>
            <!--向下纵向扩展一格 -->
            <td>25</td>
            <td colspan="2">DBJ</td>
            <!--向右横向拓展一格 -->
        </tr>
        <tr>
            <td>sean</td>
            <td>25</td>
            <td>帅啊</td>
        </tr>
        </tbody>
    </table>
    </body>
    </html>

    注册网页初级版

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <p>注册功能</p>
    <form action="">
    <!--    from标签获取用户数据打包给后端，action控制当前页面数据的提交路径即发送给那个服务端-->
    <!--            三种写法：不写，默认朝当前页面所在地址发送-->
    <!--                      全路径：（https://www.baidu.com）-->
    <!--                      只写路径后缀：（/index/）-->
        <label for="d1"><p>用户名：<input type="text" id="d1" name="username"></p></label>
        <p>密码：<input type="password" name="password"></p>
    <!--    typy属性：password改为密文-->
    <!--             text普通文本-->
    <!--             data生成一个日历表-->
    <!--             radio多选一-->
    <!--             checkbox多选多-->
        <p>生日：<input type="date"></p>
        <p>男：<input type="radio" name="gender">
        女：<input type="radio" name="gender" checked></p>
    <!--    checked默认选择-->
        <p>爱好：
            篮球：<input type="checkbox">
            羽毛球：<input type="checkbox" checked>
            足球：<input type="checkbox">
            乒乓球：<input type="checkbox" checked>
        </p>
        
        <p>省份：
            <select name="province" id="">
            <option value="">深圳</option>
            <option value="">北京</option>
            <option value="">上海</option>
        </select>
    <!--        select是下拉框 默认单选-->
        </p>
        <p>
            前女友：
            <select name="" id="" multiple>
                <option value="" selected="selected" >如花</option>
                <option value="" >沉鱼</option>
                <option value="" selected="">落雁</option>
                <option value="" >闭月</option>
    <!--            multiple改为多选,selected默认选择-->
            </select>
        </p>
        <p>个人简介：
            <textarea name="" id="" cols="30" rows="10"></textarea>
            生成一个文档格
        </p>
        <p>个人简历：
            <input type="file">
    <!--        类型改为上传文件-->
        </p>
        <p>
            <input type="submit" value="注册">
            <!--submit提交-->
            <input type="reset" value="重置">
           <!-- reset重置-->
            <input type="button" value="按钮">
            <!--button点着玩的没用-->
            <button>点我</button>
           <!-- 提交-->
        </p>
        <img src="12.23前端标签/303053.jpg" alt="" width="1000px">
    </form>
    </body>
    </html>

     
  • 相关阅读:
    Qt中 .pro 文件和 .pri 文件简介
    [Android Pro] 完美Android Cursor使用例子（Android数据库操作）
    [Android Pro] Android开发实践：自定义ViewGroup的onLayout()分析
    [Android Pro] Android开发实践：为什么要继承onMeasure()
    [Android Pro] Scroller使用分析
    [Android Pro] 精确记录和恢复ListView滑动位置
    [Android Pro] Android TypedValue.applyDimension()的用法
    [Android Pro] http://blog.csdn.net/wuyinlei/article/category/5773375
    [Android Pro] 判断Uri对应的ContentProvider所操作的数据库u存在,及DownloadManager的暂停,继续
    [Android Pro] 完美解决隐藏Listview和RecyclerView去掉滚动条和滑动到边界阴影的方案
  • 原文地址：https://www.cnblogs.com/cyfdtz/p/12108046.html
Copyright © 2011-2022 走看看