zoukankan      html  css  js  c++  java
  • HTML Class 1

    学习内容:

    1.单标签、双标签的结构:单标签<标签名 属性名=“属性值”> ;双标签<标签名 属性名=“属性值”>内容</标签名>

    ps:标签必须被正确关闭,标签名、属性名采用小写,符合规范。

    2.DW快捷键:

    ctrl c 复制; ctrl v 复制;
    ctrl a 全选; ctrl s 保存;
    ctrl z 撤销; ctrl f 查找替换;
    ctrl d 自动复制;ctrl u 首选项;

    3.注释标签:<!--注释内容-->

    注意,在制作网页时不同部分的代码之间请加入注释,方便阅读和修改代码!

    1 <!--这是注释-->

    4.标题标签: h1;h2;h3;h4;h5;h6 效果为黑体加粗,字号依次递减 (默认为块级元素,独占一行,自动换行)

    1 <h1>这是标题1</h1>
    2 <h2>这是标题2</h2>
    3 <h3>这是标题3</h3>
    4 <h4>这是标题4</h4>
    5 <h5>这是标题5</h5>
    6 <h6>这是标题6</h6>

    5.段落标签:<p></p> (默认为块级元素,独占一行,自动换行)

    1 <p>根据此前爆料达人Slashleaks给出了小米MIX 2S真机渲染图来看,它的背面依然延续小米MIX 2的设计风格,同样只配备了单摄像头,继续采用背部指纹识别,且还有18K金装饰环,整机依旧使用全陶瓷材质。另外可以看得出来,该机的屏占比相比MIX 2更加激进,正面除了顶部一个极小的摄像头开孔外,剩下的基本上都是屏幕。这样的设计使得屏占比非常高,想必视觉效果会很震撼。</p>

    6.上标、下标 上标:<sup></sup>;下标:<sub></sub>

    H<sub>2</sub>O<br/>
    a<sup>2</sup>+b<sup>2</sup>+2ab=(a+b)<sup>2</sup><br/>
    y=ax<sup>2</sup>+bx+c<br/>
    (a-b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>-2ab

    7.水平标线 <hr/> (默认为块级元素,独占一行,自动换行)

    1 <hr/><!--这是一条水平线-->

    8.big small u s 标签

    (1)big 大号字体

    1 <big>这是大号字体</big>

    (2)small 小号字体

    1 <small>这是小号字体</small>

    (3)u 下划线

    1 <u>这是下划线</u>

    (4)s 删除线 

    1 <s>这是删除线</s>

    9.列表:有序列表;无序列表;定义列表

    (1)有序列表 <ol></ol>,根据type属性改变标号,type有:A;a;I;i等,列表项位<li>内容</li> (默认为块级元素,独占一行,自动换行)

    1 <ol type="A">
    2 <li>苹果</li>
    3 <li>香蕉</li>
    4 <li>芒果</li>
    5 </ol>

    (2)无序列表 <ul></ul>,根据type属性改变标号形状,type有:disc;circle;square,实心圆,空心圆,实心方形 (默认为块级元素,独占一行,自动换行)

    <ul type="disc">
    <li>鸡蛋</li>
    <li>牛奶</li>
    <li>粗粮</li>
    </ul>
    <hr/>
    <ul type="circle">
    <li>鸡蛋</li>
    <li>牛奶</li>
    <li>粗粮</li>
    </ul>
    <hr/>
    <ul type="square">
    <li>鸡蛋</li>
    <li>牛奶</li>
    <li>粗粮</li>
    </ul>

    PS:关于无序列表的小技巧,通过对li设置display:inline,使其变为行内元素, 可以使列表横向显示,可用来制作横向导航栏

    定义标号形状使用list-style-type,使用图片标号list-style-image

    如果图片与文字对不齐,可以单独把文字放入一个div内,div属性设置position:absolute,注意,父元素ul也要设置position属性,可对文字达到精准调节的效果,示例代码如下:

     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>无标题文档</title>
     6     <style>
     7         ul {
     8             list-style-image: url(../homework/360侧边栏/gw.png);
     9             position: relative;
    10         }
    11         .l1 {
    12             position: absolute;
    13             bottom:5px;
    14         }
    15     </style>
    16 </head>
    17 
    18 <body>
    19     <div>
    20         <ul>
    21             <li>
    22                 <div class="l1">
    23                 123678
    24                 </div>
    25             </li>
    26         </ul>
    27     </div>
    28 
    29 </body>
    30 </html>

    10.定义列表:<dl><dt>列表项名称</dt><dd>列表项解释</dd></dl> (块级元素,独占一行,自动换行)

     1 <dl>
     2 <dt>
     3 美国
     4 </dt>
     5 <dd>
     6 北美国家,官方语言英语。
     7 </dd>
     8 <dt>
     9 中国
    10 </dt>
    11 <dd>
    12 亚洲国家,官方语言汉语。
    13 </dd>
    14 </dl>

                                                                                                                                                                                                                                   2018/01/31

  • 相关阅读:
    Java 蓝桥杯 算法训练 貌似化学
    Java 蓝桥杯 算法训练 貌似化学
    Java 蓝桥杯 算法训练 字符串的展开 (JAVA语言实现)
    Java 蓝桥杯 算法训练 字符串的展开 (JAVA语言实现)
    Java 蓝桥杯 算法训练 字符串的展开 (JAVA语言实现)
    Java 蓝桥杯 算法训练 字符串的展开 (JAVA语言实现)
    Java 蓝桥杯 算法训练 字符串的展开 (JAVA语言实现)
    JAVA-蓝桥杯-算法训练-字符串变换
    Ceph:一个开源的 Linux PB 级分布式文件系统
    shell 脚本监控程序是否正在执行, 如果没有执行, 则自动启动该进程
  • 原文地址:https://www.cnblogs.com/whwjava/p/8393322.html
Copyright © 2011-2022 走看看