我的第十六篇博客---HTML
Posted sll-csdn
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我的第十六篇博客---HTML相关的知识，希望对你有一定的参考价值。
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 延迟时间，用于设定两次滚动操作之间的间隔时间，以毫秒为单位
页面布局：
空格：
格式：
注意： 前后最多有一个空格，如果有多个空格，浏览器默认只识别一个
换行：
格式：<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:[email protected]>联系我们</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>
以上是关于我的第十六篇博客---HTML的主要内容，如果未能解决你的问题，请参考以下文章