今天看视频学习的第一个知识是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>  正是雁群排成“人”字,一行行南归时候。月光皎洁浸人,洒满这西边独倚的亭楼。</p><br>
<p>2<3</p><br>
<p>3>2</p><br>
<p>&</p><br>
<p>¥</p><br>
<p>×</p><br>
<p>&dicide;<p>
</body>
</html>
空格: 代表一个半角空格;
<(小于号): <
>(大于号):>
&: &
¥:¥
*: ×;
÷:&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、本地的绝对地址