html概述及html文档基本结构
-
html概述:
HTML是Hyper Text Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm
-
html 文档基本结构
一个html的基本结构如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
网页显示内容2
</body>
</html>
-
行内元素:
- 行内元素在一行显示,只能容乃文本或者其他行内元素;不可设置宽度(设置其他样式都可)、高度,
- 常用行内元素:
a span input I b textarea strong select label br img time
-
块状元素:
- 块元素一般都独占一行,可以容纳行内元素和其他块元素,
- 常用块级元素有:
h1-h6 p div dt dd dl dd ul li ol table form hr
页面设置
<body bgcolor=blue>
<body text=blue>
<body background=路径>
<html>
<head>
<title>背景音乐哦</title>
<bgsound src=路径>
</head>
<body>
</body>
</html>
只有IE浏览器支持
文字设置
在一个标签里同时设置多个功能时,中间以空格间隔!!!
-
标题字:
- 格式:
<h#>文本</h#> #表示1-6
从h1到h6越来越小哦
-
指定字体颜色:
- 与前面的text属性不一样,text属性是全部文字都变红
格式:
<font color=blue>文本</font>
- 例如:
把第一行标题设置为红色:
<font color=red><h1>欢迎</h1></font>
- 与前面的text属性不一样,text属性是全部文字都变红
-
指定字体大小
- 格式:
<font size=x>文本</font> x代表字体大小,代表1-7
- 注意哦:size8与size7字体大小一样
-
指定字体
- 格式:
<font face=字体名>文本</font>
- 例如:
<font color=red face=楷体><h1>欢迎</h1></font>
-
字形设置(倾斜、加粗等)
-
加粗:
<b>文本</b> #bold 粗体字
-
倾斜:
<i>文本</i> #incline 倾斜
-
下划线:
<u>文本</u> #underline 下划线
-
例如:加粗又加下划线
<b><u>欢迎</u></b>
-
-
滚动字标签:
-
格式:
<marquee>文本</marquee> 文字滚动
-
格式:
<marquee><img src=路径></marquee> 图片滚动
-
<p> 表示换段
-
滚动咨方式
-
格式1:
<marquee behavior=scroll></marquee> scroll是默认方式 循环滚动
-
格式2:
<marquee behavior=slide></marquee> 只滚动一次
-
格式3:
<marquee behavior=alternate></marquee> 来回滚动
-
-
滚动字方向
-
格式1:
<marquee direction=left>文本或图片</marquee> 默认方向
-
格式2:
<marquee direction=right>文本或图片</marquee>
-
格式3:
<marquee direction=up>文本或图片</marquee>
-
格式4:
<marquee direction=down>文本或图片</marquee>
-
-
滚动字活动范围的宽度与高度
-
格式:
<marquee width=# height=#>文本或图片</marquee>
-
-
滚动字速度设置:
格式:
<marquee scrollamount=# scrolldelay=#>文本</marquee>
- scrollamount 运动速度 ,默认为6
- scorlldelay 延迟时间,用于设定两次滚动操作之间的间隔时间,以毫秒为单位
页面布局
-
空格:
- 格式:
- 注意: 前后最多有一个空格,如果有多个空格,浏览器默认只识别一个
- 格式:
-
换行:
- 格式:
<br>
注意:没有结束标签
- 格式:
-
换段:
- 格式:
<p>文本</p>
#paragraph 段落 - 换段之后,会与上一行之间有一个空行
- 段落标签有一个最常用的属性:对齐方式
格式:
- 格式:
<p align=left> <p align=center> <p align=right>
<blockquote>文本</blockquote> 默认5个空格
<blockquote><blockquote>文本</blockquote></blockquote>
文本
<div>文本</div>
<p>与上一行有空行
<div>与上一行之间无空行
插入水平线、序列、图片
-
水平线
- 格式:
<hr>
单独出现
<hr size=1 color=red width=50% align=left> 解释: 1、size是高度 2、width 用比例显示线的长度
- 格式:
-
有序列表
-
格式:
<ol> <li>文本1</li> <li>文本2</li> <li>文本3</li> </ol>
-
属性:type
默认是1. 2. 3. 如果要更改,可以在-
标签中加入type属性,如:
<ol type=A>
-
标签中加入type属性,如:
-
-
无序列表
-
格式:
<ul> <li>文本1</li> <li>文本2</li> <li>文本3</li> </ul>
-
符号:
disc 实心圆(默认)
circle 空心圆
square 实心方块 -
标题
<dl> <dt>标题</dt> <dd>解释1</dd> <dd>解释2</dd> </dt> </dl>
-
-
插入图片
-
格式:
<img scr=路径>
-
图片对象:大小属性
格式:<img src=路径 width=# height=#>
- 注意一:
单位是像素,用px表示 - 注意二:
改变width或height,都会等比例缩放,即会影响到另外一个值。改变width,height也会变。除非两个属性同时修改,就不再等比例缩放。
- 注意一:
-
图片边框:
- 格式:
<img src=路径 border=5> #加边框可以,但是颜色改不了
-
图片对象:对齐
图片没有对齐方式,一般把图片先设置为一个段落,因为段落有对齐方式<p align=center><img src=路径></p>
这样,会与上一行有个空行,如果不想与上一行有空行,可以使用div标签
-
图片与文字的对齐方式
解释:当图片的高度大于文字,就需要文字与图片的顶部对其,与图片的中间对齐,与图片的底部对齐-
格式1:
<img src=路径 align=top>
-
格式2:
<img src=路径 align=middle>
-
格式3:
<img src=路径 align=bottom>
-
-
图片说明文字属性:
- 格式:
<img src=路径 title/alt=文本>
-
插入超链接、多媒体
-
超链接基本格式:
-
格式:
<a href=网址 target=_self/_blank title=鼠标放在这里提示的文字>表现形式的文字</a> #_self在本窗口打开链接 #_blank在新窗口打开链接
-
-
电子邮件链接:
-
格式:
<a href=mailto:电子邮箱>文本</a>
-
例如:
<a href=mailto:2522908520@qq.com>联系我们</a>
点击‘联系我们’会出现一个界面
-
-
书签链接设置
-
定义书签:
<a name=书签名>内容</a> ###再有内容的标题上定义书签
-
链接书签:
<a href=#书签名>ss</a> ###在没有内容的标题上引用书签
-
-
插入多媒体对象
-
说明:
<embed>标签是HTML5中的新标签
-
功能:
<embed>标签定义嵌入的内容,比如插件。
-
格式:
<embed src=路径 autostart=true/false loop=# hidden=true/false width=# height=#>
-
举例说明与背景音乐的区别:
如果添加一个mp3格式的音乐,会出现播放器
解释属性:- autostart 打开网页时,是否自动播放,默认是true
- loop设置循环次数
- hidden是否隐藏播放器
- 注意
<embed>
标签必须有src属性
-