HTML第二天学习笔记

今天看视频学习的第一个知识是HTML中的块元素<div>和行内元素<span>。

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <meta name="Generator" content="EditPlus®">
 6   <meta name="Author" content="">
 7   <meta name="Keywords" content="">
 8   <meta name="Description" content="">
 9   <title>Document</title>
10 
11   <style type = "text/css">/*使用层叠样式*/
12     div,p{/*给所有div和p元素加样式*/
13         border : 1px solid red;    /*添加红色边框*/}
14 
15     P{background-color:#99ff66}
16 
17     span{border : 1px solid blue;background-color:#00ffff}
18   </style>
19  </head>
20 
21  <body>
22   <div>正是雁群排成“人”字，一行行南归时候。月光皎洁浸人，洒满这西边独倚的亭楼。</div>
23   <p>正是雁群排成“人”字，一行行南归时候。月光皎洁浸人，洒满这西边独倚的亭楼。</p>
24   <span>正是雁群排成“人”字，一行行南归时候。月光皎洁浸人，洒满这西边独倚的亭楼。</span>
25   <span>正是雁群排成“人”字，一行行南归时候。月光皎洁浸人，洒满这西边独倚的亭楼。</span>
26  </body>
27 </html>

总结：

<div>没什么意义用的很多的划块工具，一般要与CSS配合使用；
div是个块元素；

<span>没什么意义用的很多的划块；与CSS配合使用；
span是行内元素；

块元素：一般是单独占一行，不管内容多少总是占一行
如:<div>、<p>

行内元素：不会单独占一行，多个行内元素会排在同一行
如:<span>、<font>

结论：一般是快元素嵌套行内元素；

=============================================================================================

第二个知识点是关于有序列表<ul>和无序列表<ol>

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <meta name="Generator" content="EditPlus®">
 6   <meta name="Author" content="">
 7   <meta name="Keywords" content="">
 8   <meta name="Description" content="">
 9   <title>Document</title>
10  </head>
11  <body>
12    <h3>一剪梅·红藕香残玉簟秋</h3>
13    <ul type = "disc">
14         <li type = "circle">红藕香残玉簟秋。轻解罗裳，独上兰舟。</li>
15         <li type = "square">云中谁寄锦书来，雁字回时，月满西楼。</li>
16         <li>花自飘零水自流。一种相思，两处闲愁。</li>
17         <li>此情无计可消除，才下眉头，却上心头。</li>
18    </ul>
19 
20    <h4>一剪梅·红藕香残玉簟秋</h4>
21    <ol>
22         <li>红藕香残玉簟秋。轻解罗裳，独上兰舟。</li>
23         <li>云中谁寄锦书来，雁字回时，月满西楼。</li>
24         <li>花自飘零水自流。一种相思，两处闲愁。</li>
25         <li>此情无计可消除，才下眉头，却上心头。</li>
26    </ol>
27 
28  </body>
29 </html>

ul 无序列表
<ul>或<li>的常用属性：
Type：项目符号的类型；取值：disc(黑点)，circle(空心圆),square(方块);默认为disc；
它们属于块元素；

ol 有序列表
<ol>或<li>的常用属性：
Type: 编号类型; 取值：1,a,A,i,I；
Start: 从第几个开始；

================================================================================================

第三个知识点关于特殊字符标签

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <meta name="Generator" content="EditPlus®">
 6   <meta name="Author" content="">
 7   <meta name="Keywords" content="">
 8   <meta name="Description" content="">
 9   <title>Document</title>
10  </head>
11  <body>
12     <p>&nbsp;&nbsp;&nbsp;&nbsp正是雁群排成“人”字，一行行南归时候。月光皎洁浸人，洒满这西边独倚的亭楼。</p><br>
13     <p>2&lt;3</p><br>
14     <p>3&gt;2</p><br>
15     <p>&amp;</p><br>
16     <p>&yen;</p><br>
17     <p>&times;</p><br>
18     <p>&dicide;<p>
19  </body>
20 </html>

空格：  代表一个半角空格;
<(小于号): <
>(大于号)：>
&: &
¥：¥
*: &times；
÷：&dicide；

================================================================================================

第四个就是图文混排的效果主要是在图片标签<img>中添加align属性，取左或右任意一属性

================================================================================================

第五个是滚动字幕效果，marquee

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  <a href = "http://www.baidu.com">百度</a>
  <marquee>默认~</marquee>
  <marquee direction = "up" bgcolor = "red" width = 20xp>向上</marquee>
  <marquee direction = "down">向下</marquee>
  <marquee direction = "left">向左</marquee>
  <marquee direction = "right">向右</marquee>
 </body>
</html>

murquee语法
<marquee>...</marquee>
<marquee>属性
  Direction:滚动方向；取值：up,down,left,right;
  Width: 滚动宽度；
  Height：滚动高度；
  bgColor: 滚动背景颜色；
  scrollAmount: 滚动速度（步长值）；
  scrollDelay: 两步之间的停留时间；
  loop:循环滚动的次数；

===========================================================================================

第六个的是超链接

1 <html>
2 <head>
3     <title>超链接</title>
4     <meta http-equiv = "content-type" content = "text/html;charset = utf-8">
5 <head>
6 <body>
7     <a href = "http://www.baidu.com">百度</a>
8 </body>
9 </html>

常用属性：
href：目标文件地址的URL，该URL是相对地址，也可以是绝对地址；
target：目标文件的显示窗口
  _blank:在新窗口中打开目标文件
  _self:在当前窗口打开目标文件，相当替换；
  _parent:在父级窗口中打开目标文件；
  _top:在最顶级窗口打开目标文件；
其中_parent和_top常用于框架网页中；
name:定义锚点链接的名称;

绝对地址URL：
  1、远程的绝对地址
   访问远程的文件，总是以域名、主机名开头。
  2、本地的绝对地址

知行合一