HTML一些命令及源码

 

html 讲解

超文本标记语言 (静态网页语言)

HTML4 / HTML5

 

html的框架

 

HTML是由：标签和内容构成

HTML标签（标记）的语法： 标签是由"<"和">"括起来

双标签：<标签名>....</标签名>

单标签：<标签名/>

 

HTML中HEAD头部设置

网页编码：<meta charset="utf-8"/>

关键字：<meta name="Keywords" content="关键字" />

描述： <meta name="Description" content="简介、描述" />

网页标题：<title>本网页标题</title>

 

导入CSS文件：<link type="text/css" rel="stylesheet" href="**.css"/>

导入JS文件:<script type="text/javascript" src="/***.js"></script>

CSS代码：<style type="text/css">嵌入css样式代码</style>

JS文件或代码： <script >。。。</script>

 

body

 

文本标签：

<br/> 换行

<p>...</p> 换段

<i>...</i> 斜体

<em>...</em> 强调斜体

<b>...</b> 加粗

<strong>...</strong> 强调加粗

<hn>...</hn> 其中n为1--6的值。 标题标签（加粗、独立行）

_... ^...

<del></del> 删除线

<font > </font> 字体设置

 

 

格式化标签：

列表：

<ul> 无序列表

<ol> 有序列表 其中type类型值：A a I i 1 start属性表示起始值

<li> 列表项

 

<dl> 自定义列表

<dt> 自定义列表头

<dd> 自定义列表内容

 

<div>

<span>

 

 

超链接标签<a>

<a href=""></a> 超级链接标签

属性：href必须，指的是链接跳转地址

target: 表示链接的打开方式：

_blank 新窗口

_parent 父窗口

_self 本窗口（默认）

_top 顶级窗口

framename 窗口名

title：文字提示属性（详情）

锚点链接：

使用锚点： <a href="#a1">跳到a1处</a>

 

图片标签img

 

. 当前目录

.. 上一级目录

 

相对路径: ./

绝对路径: /

 

<img /> 在网页中插入一张图片

属性：src： 图片名及url地址

alt: 图片加载失败时的提示信息

title：文字提示属性

width：图片宽度

height：图片高度

border：边框线粗细

 

实战案例1

 

 

多媒体标签

 

<audio src="./mus/rim.mp3" >

你的浏览器不支持播放

</audio>

 

<br/>

 

autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。

controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。

preload preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。

 

如果使用 "autoplay"，则忽略该属性。

 

src url 要播放的音频的 URL。

 

 

 

 

<br/><br/>

<video controls="controls" width="400" height="400" loop poster="./images/linux.jpg">

<source src="./mus/back.mp4" type="video/mp4" />

<source src="movie.webm" type="video/webm">

你的浏览器不支持视频播放

</video>

 

 

*表格标签

*table 表格标签

caption 表格标题

*tr 行标签

*th 列头标签

*td 列标签

 

单元格边距(Cell padding)

本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。

单元格间距(Cell spacing)

本例演示如何使用 Cell spacing 增加单元格之间的距离。

 

实战案例2

 

 

form表单标签

---------------------------------------------------------

1. <form></form> --表单标签

form标签常用属性：

*action属性:提交的目标地址(URL)

*method属性:提交方式:get(默认)和post

get方式是URL地址栏可见,长度受限制(IE2k 火狐8k),相对不安全.

post方式是URL地址不可见,长度不受限制,相对安全.

enctype:提交类型

enctype="application/x-www-form-urlencoded"

enctype="multipart/form-data"

 

target: 在何处打开目标 URL。

name:属性为表单起个名字.HTML5不支持。用 id 代替。

 

2. <input> 表单项标签input定义输入字段，用户可在其中输入数据。在 HTML 5 中，type 属性有很多新的值。

具体在下面有详解：

如：<input type="text" name="username">

 

3. <select> 标签创建下拉列表。

*name属性:定义名称,用于存储下拉值的

size：定义菜单中可见项目的数目，html5不支持

disabled 当该属性为 true 时，会禁用该菜单。

multiple 多选

*<option> 下拉选择项标签,用于嵌入到<select>标签中使用的;

*value属性:下拉项的值

*selected属性:默认下拉指定项.

 

4. *<textarea> 多行的文本输入区域

*name :定义名称,用于存储文本区域中的值。

*cols ：规定文本区内可见的列数。

*rows ：规定文本区内可见的行数。

disabled： 是否禁用

readonly： 只读

...

默认值是在两个标签之间

 

5. *<button> 标签定义按钮。

您可以在 button 元素中放置内容，比如文档或图像。这是该元素与由 input 元素创建的按钮的不同之处。

 

 

6. <fieldset> html5标签--fieldset 元素可将表单内的相关元素分组。

disabled属性：定义 fieldset 是否可见。

form属性： 定义该 fieldset 所属的一个或多个表单。

 

7. <legend> html5标签--<legend> 标签为 <fieldset>、<figure> 以及 <details> 元素定义标题。

<form>

<fieldset>

<legend>健康信息：</legend>

身高：<input type="text" /><br/>

体重：<input type="text" /><br/>

</fieldset>

</form>

 

8. <optgroup> html5标签--<optgroup> 标签定义选项组。此元素允许您组合选项

样例：

<select>

<optgroup label="Swedish Cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

</optgroup>

<optgroup label="German Cars">

<option value="mercedes">Mercedes</option>

<option value="audi">Audi</option>

</optgroup>

</select>

 

9. <datalist> html5标签--<datalist> 标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。

样例：

<form action="demo_form.php" method="get">

<input list="browsers" name="browser">

<datalist id="browsers">

<option value="Internet Explorer">

<option value="Firefox">

<option value="Chrome">

<option value="Opera">

<option value="Safari">

</datalist>

<input type="submit">

</form>

 

10. **<input/> 表单项中的属性，可以提供

*type属性:表示表单项的类型:值如下:

text:单行文本框

password:密码输入框

checkbox:多选框 注意要提供value值

radio:单选框 注意要提供value值

file:文件上传选择框

button:普通按钮

submit:提交按钮

image:图片提交按钮

reset:重置按钮, 还原到开始(第一次打开时)的效果

hidden:主表单隐藏域,要是和表单一块提交的信息,但是不需要用户修改

*name属性:表单项名,用于存储内容值的

*value属性:输入的值(默认指定值)

size属性:输入框的宽度值

maxlength属性:输入框的输入内容的最大长度

readonly属性:对输入框只读属性

*disabled属性:禁用属性

*checked属性:对选择框指定默认选项

accesskey属性:指定快捷键(不常用) (IE:alt+键 火狐:alt+shift+键)

tabindex属性:通过数字指定tab键的切换顺序(不常用)

 

src和alt是为图片按钮设置的

 

注意：reset重置按钮是将表单数据恢复到第一次打开时的状态，并不是清空

image图片按钮，默认具有提交表单功能。

 

 

日期：<input type="date" name="dd"/><br/><br/>

时间：<input type="time" name="tt"/><br/><br/>

网址：<input type="url" name="uu"/><br/><br/>

邮箱：<input type="email" name="ee"/><br/><br/>

数值：<input type="number" name="mm"/><br/><br/>

 

实战案例3

 

frameset标签

<html>

<frameset cols="25%,50%,25%">

<frame src="frame_a.htm" />

<frame src="frame_b.htm" />

<frame src="frame_c.htm" />

</frameset>

</html>

 

iframe标签

 

<html>

<head>

<meta charset="utf-8"/>

<title>HTML实例</title>

</head>

<body>

<h2>HTML实例：iframe页面分帧实例</h2>

<ul>

<li><a href="1.html" target="frame1">1.html</a></li>

<li><a href="2.html" target="frame1">2.html</a></li>

</ul>

<iframe name="frame1" src="1.html" width="500" height="500" frameborder="1"></iframe>

</body>

</html>