zoukankan      html  css  js  c++  java
  • 前端(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名前加一个‘#’。

  • 相关阅读:
    HDU 3681 Prison Break 越狱(状压DP,变形)
    POJ 2411 Mondriaan's Dream (状压DP,骨牌覆盖,经典)
    ZOJ 3471 Most Powerful (状压DP,经典)
    POJ 2288 Islands and Bridges (状压DP,变形)
    HDU 3001 Travelling (状压DP,3进制)
    POJ 3311 Hie with the Pie (状压DP)
    POJ 1185 炮兵阵地 (状压DP,轮廓线DP)
    FZU 2204 7
    POJ 3254 Corn Fields (状压DP,轮廓线DP)
    ZOJ 3494 BCD Code (数位DP,AC自动机)
  • 原文地址:https://www.cnblogs.com/ikamu/p/8444671.html
Copyright © 2011-2022 走看看