HTML第二天学习笔记

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

 <!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> <style type = "text/css">/*使用层叠样式*/
div,p{/*给所有div和p元素加样式*/
border : 1px solid red; /*添加红色边框*/} P{background-color:#99ff66} span{border : 1px solid blue;background-color:#00ffff}
</style>
</head> <body>
<div>正是雁群排成“人”字,一行行南归时候。月光皎洁浸人,洒满这西边独倚的亭楼。</div>
<p>正是雁群排成“人”字,一行行南归时候。月光皎洁浸人,洒满这西边独倚的亭楼。</p>
<span>正是雁群排成“人”字,一行行南归时候。月光皎洁浸人,洒满这西边独倚的亭楼。</span>
<span>正是雁群排成“人”字,一行行南归时候。月光皎洁浸人,洒满这西边独倚的亭楼。</span>
</body>
</html>

总结:

  

<div>没什么意义用的很多的划块工具,一般要与CSS配合使用;
  div是个块元素;
 
  <span>没什么意义用的很多的划块;与CSS配合使用;
  span是行内元素;
 
  块元素:一般是单独占一行,不管内容多少总是占一行
  如:<div>、<p>

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

结论:一般是快元素嵌套行内元素;

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

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

 <!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>
<h3>一剪梅·红藕香残玉簟秋</h3>
<ul type = "disc">
<li type = "circle">红藕香残玉簟秋。轻解罗裳,独上兰舟。</li>
<li type = "square">云中谁寄锦书来,雁字回时,月满西楼。</li>
<li>花自飘零水自流。一种相思,两处闲愁。</li>
<li>此情无计可消除,才下眉头,却上心头。</li>
</ul> <h4>一剪梅·红藕香残玉簟秋</h4>
<ol>
<li>红藕香残玉簟秋。轻解罗裳,独上兰舟。</li>
<li>云中谁寄锦书来,雁字回时,月满西楼。</li>
<li>花自飘零水自流。一种相思,两处闲愁。</li>
<li>此情无计可消除,才下眉头,却上心头。</li>
</ol> </body>
</html>

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

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

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

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

 <!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>
<p>&nbsp;&nbsp;&nbsp;&nbsp正是雁群排成“人”字,一行行南归时候。月光皎洁浸人,洒满这西边独倚的亭楼。</p><br>
<p>2&lt;3</p><br>
<p>3&gt;2</p><br>
<p>&amp;</p><br>
<p>&yen;</p><br>
<p>&times;</p><br>
<p>&dicide;<p>
</body>
</html>

空格:&nbsp; 代表一个半角空格;
<(小于号): &lt;
>(大于号):&gt;
&: &amp;
¥:&yen;
*: &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:循环滚动的次数;

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

第六个的是超链接

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

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

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

上一篇:request+response+jsp+el+jstl


下一篇:markdown错误和问题