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

  • 相关阅读:
    Josephu问题的解决方案
    2019年9月16日动手动脑
    2019年9月23日课堂随机出题
    开学JAVA第一次测试
    2019年8月19日~8月25日 第八周JAVA学习总结
    2019年7月29日~8月4日 第五周学习记录
    2019年9月16日课堂随机出题
    2019年8月5日~8月11日 第六周JAVA学习总结
    2019年8月12日~8月18日 第七周JAVA学习总结
    两个数值型变量交换值的方法总结
  • 原文地址:https://www.cnblogs.com/whwjava/p/8393322.html
Copyright © 2011-2022 走看看