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 dl dd ul li ol table form hr

display属性
display:inline 可以让块状元素变为行内显示
display:block 可以让行内元素变为块状元素


行内元素:
行内元素在一行显示,只能容乃文本或者其他行内元素;不可设置宽度(设置其他样式都可)、高度,
常用行内元素:
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 b-

 页面设置:

标签之背景色:
<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>

指定字体大小
格式:<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 延迟时间,用于设定两次滚动操作之间的间隔时间,以毫秒为单位

 

 页面布局:

 

空格:
格式:&nbsp;
注意:&nbsp; 前后最多有一个空格,如果有多个空格,浏览器默认只识别一个

换行:
格式:<br> 注意:没有结束标签

换段:
格式:<p>文本</p> #paragraph 段落
换段之后,会与上一行之间有一个空行

段落标签有一个最常用的属性:对齐方式
格式:
<p align=left> <p align=center> <p align=right>

块缩进
格式:<blockquote>文本</blockquote> 默认5个空格

注意了注意了:
块缩进标签可以套用哦:
<blockquote><blockquote>文本</blockquote></blockquote>

定位标签(与p标签相似,都有align属性)
格式:<div>文本</div>

区别:<p>与<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. 如果要更改,可以在<ol>标签中加入type属性,如:<ol type=A>

无序列表
格式:
<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属性

 

表格:

最基本的表格格式
格式:
<table border=#>
<tr>
<td>对象</td>
</tr>
<tr>
<td>文本2</td>
</tr>
</table>
解释:
<td>:单元格属性,即有一个单元格,就有一对<td>
<tr>:行属性,即有一行就有一对<tr>

表格属性:大小
格式:<table width=# height=#>

表格属性:边框与外边框颜色
格式:<table border=10 bordercolor=red>

表格对齐方式
<table border=10 align=left/center/right>

表格属性:背景色及背景图片
格式:<table bgcolor=red background=路径>

单元格的间距和边距
间距:单元格距离外边框的距离 cellspacing
边距:文本距离单元格的距离 cellpadding

行和单元格中对齐方式
行对齐:<tr align=>
列对齐:<tr valign=>
单元格行对齐:<td align=>
单元格列对齐:<td valign=>

不规则表格:跨行
<td rowspan=#> rowspan:表示该单元格占几行
<td colspan=#> colspan:表示该单元格占几列

 

 表单:

 

表单:表单域
什么是表单:文本框、按钮、下拉菜单等
格式:<from></from>
所有的表单都要写到表单域中

<form>里的属性:
action:定义表单数据提交地址
method:一般有get方式和post方式:
get:获取数据,在地址栏中传递,安全性不高,长度有限制
post:提交数据的,通过头部提交数据,更安全,长度无限制
enctype='multipart/form-data' 当有上传文件时必须要有

<input>
type属性
file 上传文件

表单:文本框
格式:<input type=text size=# maxlength=#>
解释:size表示文本框的大小,即横向的宽度

<form>
账号<input type=text size=10 maxlength=6>
</form>

表单:密码框
格式:<input type=password size=# maxlength=#>
<form>
账号<input type=text size=10 maxlength=6>
密码<input type=password size=10 maxlength=6>
</form>

表单:提交按钮
格式:<input type=submit value=提交>
<form>
<input type=submit value=提交>
</form>

表单:重置按钮
格式:<input type=reset value=重置>

<form>
账号:<input type=text size=10 maxlength=6>
密码:<input type=password size=10 maxlength=6>
<input type=submit value=提交>
<input type=reset value=重置>

表单:普通按钮
格式:<input type=button value=#>

表单:单选框
格式:<input type=radio>

<form>
男<input type=radio name=sex>
女<input type=radio name=sex>
</form>


表单 多选框
格式:<input type=checkbox >
<form>
你最喜欢的动物是:
猫<input type=checked>
狗<input type=checked>
鸟<input type=checked checked=checked(默认选择)>
</form>

表单:文本域
格式:<textarea rows=# clos=#>文本</textarea>

表单:下拉菜单
格式:
<select>
<option>列表1</option>
<option>列表2</option>
<option>列表3</option>
</select>