• 前端-HTML基础


    1.<p></p>段落标签

    <p>别在最该拼搏的年纪选择稳定,世界上最大的不变是改变,只有每天进步,才能拥抱生命的无限可能!</p>

    2.</b>换行

    3.<h></h>标题标签

    复制代码
    <h1>&lt;h1&gt;&lt;/h1&gt;标题标签h1</h1>
    <h2>&lt;h2&gt;&lt;/h2&gt;标题标签h2</h2>
    <h3>&lt;h3&gt;&lt;/h3&gt;标题标签h3</h3>
    <h4>&lt;h4&gt;&lt;/h4&gt;标题标签h4</h4>
    <h5>&lt;h5&gt;&lt;/h5&gt;标题标签h5</h5>
    <h6>&lt;h6&gt;&lt;/h6&gt;标题标签h6</h6>
    复制代码

    4.<div></div>块级标签 白板

    块级标签,整满整行 div是HTML中出场率的标签,特点是没有任何属性,可以通过css进行装饰后成为任何一种标签

    <div style="background-color: #F8AC59; 100%;height: 30px"></div>

    5.<span></span>行内标签 白板

    行内标签的代表,什么属性都不带,可以通过css进行装饰后成为任何一种标签

    <span style="border: red 1px solid">冰你写作业了吗?</span>

    6.<input /> 文本框标签

    文本框标签,包含多个属性,text、password、button、checkbox、radio、file、submit、reset

    复制代码
    <div class="content-inner content-margin">
                    <form action="https://www.baidu.com">
                        <h3>&lt;input /&gt;</h3>
                        <h3>文本框标签,包含多个属性,text、password、button、checkbox、radio、file、submit、reset</h3>
                        <input type="text" value="默认值"/>
                        <input type="text"/>
                        <input type="button" value="登录">
                        <p>兴趣爱好</p>
                        <input type="checkbox" value="1" name="interest" checked="checked">篮球
                        <input type="checkbox" value="2" name="interest" >羽毛球
                        <input type="checkbox" value="3" name="interest" >排球
                        <input type="radio" name="sex" value="1" checked="checked">男
                        <input type="radio" name="sex" value="1">女
                        <p>上传文件</p>
                        <input type="file">
                        <input type="submit" value="提交">
                        <input type="reset" value="重置">
                    </form>
                </div>
    复制代码

    7.<form></form> 表单标签

    表单标签可以理解为载体,承载着所有要像后端提交的数据,通常与input连用,表单提交数据分为get提交和post提交,get提交在url上挂参数,post提交在body中

    复制代码
    <form action="https://www.baidu.com" method="post">
                        <input type="text" name="username">
                        <input type="password" name="password">
                        <input type="button" value="登录">
                        <input type="submit" value="提交">
                        <input type="reset" value="重置">
                    </form>
    复制代码

    8.<label></label> 标题标签

    label 标题标签 与input联合运用,增加input的点击范围 可直接点击文字就输入 for:映射到input的id

    <label>用户名</label><input type="text" placeholder="placeholder属性">

    9.<textarea></textarea> 多行文本标签

    多行文本 textarea 默认值在标签之间

    <textarea>默认值</textarea>

    10.<select></select> 下拉选择框标签

    select option 下拉框标签 默认选择在option上增加selected size属性显示多少个 多选属性:multiple

    复制代码
    <h5>单选</h5>
                    <select name="city">
                        <option>黑龙江</option>
                        <option selected="selected">辽宁</option>
                        <option>北京</option>
                        <option>四川</option>
                    </select>
                    <h5>多选</h5>
                    <select name="city" multiple="multiple">
                        <option>黑龙江</option>
                        <option selected="selected">辽宁</option>
                        <option>北京</option>
                        <option>四川</option>
                    </select>
                    <h5>超过4个就出滚动条</h5>
                    <select name="city" size="4">
                        <option>黑龙江</option>
                        <option selected="selected">辽宁</option>
                        <option>北京</option>
                        <option>四川</option>
                        <option>吉林</option>
                        <option>陕西</option>
                    </select>
                    <h3>&lt;select&gt;&lt;/select&gt; &lt;optgroup&gt;&lt;/optgroup&gt;</h3>
                    <div><h4>对下拉选项进行分组optgroup 分组,label属性是组的名字,不可选择</h4></div>
                    <select name="city" size="4">
                        <optgroup label="黑龙江省">
                            <option>哈尔滨</option>
                            <option>牡丹江</option>
                            <option>宁安</option>
                        </optgroup>
                        <optgroup label="北京市">
                            <option>北京</option>
                        </optgroup>
                    </select>
    复制代码

    11.<a></a> 超链接标签

    超链接 href属性为跳转的地址,target属性为以什么方式跳转"_blank"新tab跳转,a标签还可以做锚点,通过id进行对应关系的映射 去掉a标签的下划线通过属性text-decoration:none

    <a href="https://www.cnblogs.com/cjxxl1213/" style="text-decoration: underline">小林博客</a>
    <a href="https://www.cnblogs.com/cjxxl1213/" target="_blank" style="text-decoration: none">小林博客</a>

    12.<img /> 图片标签

    img 图片标签 src:图片的位置 图片跳转通过a标签 alt:当图片加载失败时显示alt的文案 title:鼠标悬浮在图片上显示的文字

    <img src="dsx.jpg">

    13.<ul></ul> 列表标签

    列表 ul li · 形式的列表

    <ul>
             <li>第一列</li>
              <li>第二列</li>
    </ul>

    列表 ol li 数字形式的列表

     <ol>
                            <li>第一列</li>
                            <li>第二列</li>
                        </ol>

    分层列表 dl dd内层 dt外层

    复制代码
    <dl>
                        <dt>黑龙江</dt>
                        <dd>哈尔滨</dd>
                        <dd>牡丹江</dd>
                    </dl>
                    <dl>
                        <dt>北京</dt>
                        <dd>北京</dd>
                    </dl>
    复制代码

    14.<table></table> 表格标签 

    table 表格标签 thead:表头 th:表头行 tbody:内容 tr:行 td:列 boder:表格的边框 coslpan:td占几列 rowspan:tr占几列

    复制代码
     <table border="1">
                        <thead>
                            <th>ID</th>
                            <th>用例名称</th>
                            <th>执行人</th>
                            <th colspan="2">编辑</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>table表格测试</td>
                                <td>xiaolin</td>
                                <td>详情</td>
                                <td>编辑</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td colspan="2">table表格测试</td>
                                <td>详情</td>
                                <td>编辑</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td rowspan="2">table表格测试</td>
                                <td>xiaolin</td>
                                <td>详情</td>
                                <td>编辑</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>xiaolin</td>
                                <td>详情</td>
                                <td>编辑</td>
                            </tr>
                        </tbody>
                    </table>
    复制代码
     
     
     

    HTML 全局属性

    属性描述
    accesskey 规定激活元素的快捷键。
    class 规定元素的一个或多个类名(引用样式表中的类)。
    contenteditable 规定元素内容是否可编辑。
    contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
    data-* 用于存储页面或应用程序的私有定制数据。
    dir 规定元素中内容的文本方向。
    draggable 规定元素是否可拖动。
    dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。
    hidden 规定元素仍未或不再相关。
    id 规定元素的唯一 id。
    lang 规定元素内容的语言。
    spellcheck 规定是否对元素进行拼写和语法检查。
    style 规定元素的行内 CSS 样式。
    tabindex 规定元素的 tab 键次序。
    title 规定有关元素的额外信息。
    translate 规定是否应该翻译元素内容。
     
     
     
  • 相关阅读:
    UITabar 设置字体大小/颜色
    NSURLSession的基本使用
    报错/警告提示
    实现毛玻璃模糊效果/DRNRealTimeBlur
    免证书真机调试
    xcode添加音效
    NSCalenda日历类
    NSDate--日期格式
    NSArray其中的方法--遍历,
    Mysql学习笔记004
  • 原文地址:https://www.cnblogs.com/whcp855/p/13552570.html
Copyright © 2020-2023  润新知