• 前端(1)HTML


    查看页面中指定元素的源码:
    浏览器中按F12打开“检查元素”,标签页选择“元素”或“Element”,点击左上角的“选择元素”按钮,按钮变蓝色之后,可以用鼠标在页面中选择指定的元素,点击后在源码栏会自动跳转到该元素对应的源码。

    每个标签都有默认的样式,可以自定义标签,也可以更改标签的默认样式。

    H1~H6:
    六个标准的标题标签
    建议一个页面只有一个H1标签,有利于搜索引擎搜索。

    P:
    段落标签,结尾自动换行(display:block)

    B:
    粗体标签,不换行(display:inline)

    STRONG:
    强调粗体标签,不换行(display:inline),有利于搜索引擎搜索

    I:
    斜体标签,不换行(display:inline)

    EM:
    强调斜体标签,不换行(display:inline),有利于搜索引擎搜索

    HR:
    水平线标签

    BR:
    换行符标签

    特殊符号
    小于号:——<
    大于号:——>
    空格符号:——12    34
    空白位:——12 34
    &字符:——&
    版权符号:——©

    A:
    超链接标签

    <a href="http://www.baidu.com" target="_blank">去百度</a><!--链接 跳转到百度-->
    <a href="#">#</a><!--刷新当前页面-->
    <a href="javascript:void(0);">死链接</a><!--死链接,不会跳-->
    <a href="#box">锚点</a>

    <!--

    只有拥有name属性的a标签才有锚点
    其他标签可以通过id属性实现锚点,a标签也可以用id属性做锚点
    target属性
    _self 当前页面打开 默认
    _blank 在新窗口打开
    _parent 父框架中打开
    _top 顶级框架中打开
    id命名
    id只能有一个名字,而且在页面中相同的名字只能出现一次,相当于身份证号码一样
    class命名
    class可以出现多次,而且相同的名字可以有多个,相当于人名一样
    -->
    IMG:
    图像标签

    <img src="http://mat1.gtimg.com/ipad/qq_time/imgs/slider_20180216_chunjie.jpg">
    <img src="img/0.jpg" alt="可爱的" width="150" height="150">

    <!--

    src 定义图片路径
    alt 图片描述,用于seo搜索
    width 定义图片宽度
    height 定义图片高度
    当width/height只给一个值的时候,另一个值等比例缩放,如果不配置就是默认图片大小
    -->

    UL > LI:
    无序列表
    快捷操作:输入ul>li*4,按tab,自动出现UL标签下出现4个LI标签

    <ul type="square">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    </ul>

    type属性,取值为

    disc 默认 小黑圆点
    circle 空心圆
    square 小方框

    OL > LI:
    有序列表

    <ol type="1" reversed start="2">
    <li>10</li>
    <li>20</li>
    <li>30</li>
    <li>40</li>
    </ol>

    type属性,取值为

    1 1 2 3 4 默认
    a a b c d
    A A B C D
    I
    i
    reversed属性 降序排序
    start属性 有序列表起始值

    DL > DT > DD:
    定义列表

    <dl>
    <dt>标题</dt>
    <dd>项目1</dd>
    <dd>项目2</dd>
    <dd>项目3</dd>
    </dl>

    DIV和SPAN:

    <div>标签把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
    <span> 标签被用来组合文档中的行内元素。
    DIV,独自占一行(display:block)
    SPAN,不独占一行(display:inline),不支持设置宽高,由行内元素支撑宽高。
    将DIV的display设置为inline,则DIV也不支持设置宽高,也不独自占一行,变成和SPAN标签一样,反之给SPAN标签设置display:block,SPAN也就变成了DIV
    行内块元素:display:inline-block 块级元素可以横排展示,行内元素可以设置宽高
    隐藏元素:display:none 包括他的子标签,在页面中不占位置,等同于消失了

    样式设置:
    在<head>标签中插入<style>标签,

    <style>
    div{
    width: 100px;
    height: 100px;
    background: blueviolet;
    display: inline-block;
    vertical-align: top;
    }
    span{
    background: blue;
    }
    .box{
    display: none;
    }
    </style>

    <style>标签中,对标签进行配置,则直接用标签名借花括号,配置样式;对一个类进行配置,则在类名前加一个‘.’;对一个id进行配置,则在id名前加一个‘#’。

  • 相关阅读:
    update 大表
    Lazy Writer&CheckPoint
    SQLServer查看登录名和数据库的用户名的映射
    SQL Server Replication出现的错误:The process could not execute 'sp_replcmds' on 'WASYGSHA02-0186'.
    execute as login 切换上下文
    IOS开发-懒加载延迟加载-图片浏览器实例
    IOS开发-代码创建UI控件并修改控件属性(代码创建UIButton、UILabel)
    IOS开发-常用UI控件的基本使用(Transform形变属性、frame属性、center属性的使用)
    IOS开发-UI控件的常见属性
    IOS开发-UIView(视图)与UIViewController(视图控制器)
  • 原文地址:https://www.cnblogs.com/ikamu/p/8444671.html
Copyright © 2020-2023  润新知