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

 

posted @ 2018-01-31 20:30  0==1&1==0  阅读(143)  评论(0)  编辑  收藏  举报