总结:html

1.HTML 简称

1.HyperText Markup Language简称为HTML

2.HyperText:超文本(文本+图片+视频+连接)

3.Markup Language:标记语言

4.由SGML(标准通用标记语言)发展而来

5.写给浏览器的语言

2.版本及历史

1.超文本标记语言(第一版)1993年6月(IETF制定)

2.HTML 2.0-----1995年11月

3.HTML 3.0-----1996年1月

4.HTML 4.0-----1997年

5.HTML 5.0-----2014年10月29日(W3C和WHATWG合作发布)

注明:

1.W3C:World Wide Wed Consortion (W3C理事会或万维网联盟)

2.WHATWG (Web超文本应用技术工作组)

3.关于新的HTML5标准

HTML5的设计目的是为了在移动设备上支持多媒体。
新的语法特征被引进以支持这一点,如video,audio和canvas标记。
HTML5还引进了新功能,可以真正改变用户与文档的交互方式,包括:

1.新的解析规则增强了灵活性
2.新属性
3.淘汰过时的或冗余的属性
4.一个HTML5文档到另一个文档间的拖放功能
5.离线编辑等等

支持Html5的浏览器包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),Safari,Opera等;国内的遨游浏览器(Maxthon),以及基于IE或Chromium(Chrome的工程版或称实验版)所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。

4.HTML的基本结构
<html>
<head>
<title>我的第一个网页</titlle>:head是头部
</head>
<body>
欢迎来到HTNL世界
</body>:是页面的主体</html>html:里面的东西是HTML网页

5:标签具有属性, 属性用来表示标签的性质和特征。属性要在开始标签中指定

6.定义一个合格的HTML页面

1.HTML5文档声明
<!DOCTYPE HTML>
说明:位于 <html> 标签之前,不区分大小写。告知浏览器该文档遵循HTML规范

2.设置网页标题
<title>---</title>

3.设置网页编码
<meta charset="utf-8"/>
说明:(utf-8是多国语言编码)(gb2312是中文简体编码)

4设置页面关键字,内容介绍
<meta name="keywords" conteny="关键字1,关键字2,。。。"/>
<meta name="description" content="内容介绍" />

1html的元素

1.换行符 <br />:就是换行
2.段落标签 <p>这是一个段落</p> 属性align只能写在前p里面:属性值有(left左,right右,center中)
3.写法:<p align="left">这是一个段落</p>:这是一个段落(会往左对齐)

4.标题
<h1>字最大</h1>
<h2>字比1小</h2>
<h3>字比2小</h3>
<h4>字比3小</h4>
<h5>字比4小</h5>
<h6>字最小没有在小的字了(在标题)</h6>

5文本格式化
<b>字加粗</p>
<i>字是斜体</i>
<del>字是删除的</del>
<sup>定义上标字</sup>
<sub>定义下标字</sub>

6.链接
<a href="点击名字要去的地方">是取名字(显示名字下有下划线)</a>

1.说明属性:1,herf(是定义链接地址)2,title(是链接提示信息)3,target(链接打开方式【值有blank是新窗口打开】【self是本窗口打开】【top是顶窗口打开】)
2.常规应用
1.<a href=“http://www.163.com”>外部链接</a>
2.<a href=“about.html”>内部链接 </a>

3.其他应用
1.<a href=“mailto:邮箱地址”>邮件链接</a>
2.<a href=“tel:电话号码”>一键拨打</a>
3.<a href="sms:139xxxxxxx">一键发送短信</a>
7.图像
<img src="url" width="100" height="10" alt="替代文字"/>
说明:src(定义图像的url)
alt(定义图像的替代文本)
width宽(height高){是图片的高宽}
8.图片相对地址的定义(重点)
1.(./是当前目录)
2.(../回到上一层目录)
3.(images/进入images一层目录)
4.(../images/回到上一层目录,然后再进入images目录)

9.图像热区(扩展)
<img src="URL" usemap="# map 名称" />
<map name="map 名称">
<area shape="形状" coords="坐标值" href="URL" />
</map>

1.说明shape 热区形状(rect. circle.poly)
2.coords 现状的坐标值

10. audio(音频)

带控制器的音频播放器

语法:
<audio src="song.ogg" controls="controls"></audio>

如果考虑到不同浏览器对视频文件的兼容性

<audio width="320" height="240" controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
<p>Your browser does not support the audio tag.</p>
</audio >

属性说明:

autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
preload preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
src url 要播放的音频的 URL

11. video(视频)

带控制器的视频播放器

语法:
<video src=“movie.mp4” controls="controls"></video>

如果考虑到不同浏览器对视频文件的兼容性

<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
<p>Your browser does not support the video tag.</p>
</video>

属性说明:
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
muted muted 规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
preload preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。
height pixels 设置视频播放器的高度。

12.html 实体字符
1.(&gt;是>),(&lt;是<),(&quot;是’引号)(&reg;注册商标(?))(&copy;是版权符号?)(&amp;是&)

13.无序列表 说明:属性type 属性值(disc)(circle)(上去了吧)
<ul>
<li>ewew</li>
<li>ewwe</li>
</ul>

14.有序列表 属性有(type或start)
1.属性值(type有1.a.A.i.I)用来设置项目前面的标记
2.start 数值 排序的起点数值
3.<ol>
<li>ere</li>
<li>ewew</li>
</ol>

15.定义列表
<dl>
<dt>HTML</dt>
<dd>html 是超文本标记语言</dd>

<dt>XHTML</dt>
<dd>可扩展超文本置标语言 </dd>
<dd>表现方式与超文本置标语言(HTML)类似,不过语法上更加严格 </dd>
</dl>

16.html 表格
1.表格由<table>标签以及一个或多个tr.th或td元素组成。
2.单元格可以包含文本。图片。列表。段落。表单。水平线。表格等等。
基本结构:
<table border="1">
<tr>
<td>row1,cel1 1</td>
<td>row1,cell 2</td>
</tr>
</table>
1.<table>定义表格 2.<th>定义表头 3.<tr>定义表格行 4.<td>定义表格的单元。
1,属性 值 说明
width px,% 指定表格的宽度
height px,% 表格的高度
border px 指定表格边框的宽度
cellpadding px 指定边框与内容之间的空白
cellspacing px ,% 指定单元格之间的空白
align left,right ,center 指定对齐方式
valign top, middie, bottom 垂直排列方式
colspan 合并列单元格
rowspan 合并行单元格

17.<iframe>内嵌框架
说明: 属性 属性值 说明
width px .% 指定框架的宽度
height px .% 指定框架的高度
scrolling yes,no,auto 是否显示滚动条
frameborder 1,o 是否显示边框
语法:<iframe src="url" name="框架名" ></iframe>
18.form(表单)(重点)
1.表单是一个包含表单元素的区域。
2.
表单能够包含 input 元素,textarea、select、fieldset、legend 和 label 元素。
3.
表单使用标签(<form>)定义。
4.
表单用于向服务器传输数据。

1,表单的基本结构:
<form name="form1" action="URL" method="get">

用户名:<input type="text" name="uname" />

密 码:<input type="password" name="passwd" />

</form>

2,说明:
属性 说明

name 表单的名称

action 表单提交地址

method 表单数据提交的方式 (get ,post)

enctype MIME类型

target 打开方式

19.<input>(表单元素:输入框)(重点)
说明:
属性 说明
type input元素类型

name input 元素的名称

value input 元素的值

size input 元素的宽度

readonly 是否只读

maxlength 输入字符的最大长度

disabled 是否禁用
20.复选框
<input type="checkbox"name="love" value="music" checked="checked"/>听音乐

<input type="checkbox"name="love" value="movie"/> 看电影

<input type="checkbox"name="love" value="game"/> 玩游戏
20.1单选按钮
<input type="submit" name="comit" value="提交"/>

<input type="reset" name="reset" value="重写"/>
<input type="image"name="img_btn" src="btn.gif"/>
《图片按钮有提交功能》

21.隐藏域
隐藏域用于在程序发送没有必要让用户看到特定值的时候使用。
<input type="hidden" name="uid" value="10"/>
1.上传文件
<input type="file" name="photo"/>
注意: 利用这项功能时,在form标签中要指定method属性。要把method指定为post,enctype属性指定为multipart/data。
说明:multiple 控制是否上传多文件

22.HTML5的表单所有TYPE类型
button 定义可点击的按钮(大多与 JavaScript 使用来启动脚本)
checkbox 定义复选框。
color 定义拾色器。
date 定义日期字段(带有 calendar 控件)
datetime 定义日期字段(带有 calendar 和 time 控件)
datetime-local 定义日期字段(带有 calendar 和 time 控件)
month 定义日期字段的月(带有 calendar 控件)
week 定义日期字段的周(带有 calendar 控件)
time 定义日期字段的时、分、秒(带有 time 控件)
email 定义用于 e-mail 地址的文本字段
file 定义输入字段和 "浏览..." 按钮,供文件上传
hidden 定义隐藏输入字段
image 定义图像作为提交按钮
number 定义带有 spinner 控件的数字字段
password 定义密码字段。字段中的字符会被遮蔽。
radio 定义单选按钮。
range 定义带有 slider 控件的数字字段。
reset 定义重置按钮。重置按钮会将所有表单字段重置为初始值。
search 定义用于搜索的文本字段。
submit 定义提交按钮。提交按钮向服务器发送数据。
tel 定义用于电话号码的文本字段。
text 默认。定义单行输入字段,用户可在其中输入文本。默认是 20 个字符。
url 定义用于 URL 的文本字段。

23.textarea(表单元素:多行文本域)
<textarea name="content" rows="5" cols="40"></textarea>
(rows,cols,只可以控制视觉的效果不可以控制px的大小)

24.select(表单元素:下拉框)
说明:
属性 说明

name 下拉列表框的名称

size 下拉列表框的显示行数

multiple 是否多选

disabled 是否禁用

selected 设置默认选中的选项

value 选项的值

例:
<select name="city">

<option value="0">请选择</option>

<option value="bj">北京</option>

<option value="gz">广州</option>

</select>

25.optgroup(表单元素:下拉框分组)
optgroup元素用于组合选项
说明:
属性 说明
label 指定组合选项名称

例:
<select name="city" multiple>

<optgroup label="广东">

<option value="1">广州</option>

<option value="2">深圳</option>

</optgroup>

<optgroup label="其他">

<option value="3">长沙</option>

<option value="4">香港</option>
</optgroup>

</select>
26. label

lablel 标签的作用是将输入项或选项及其标签文字关联起来。

例:

<input type="radio" name="sex" value="1" id="male" />

<label for="male">男</label>

<input type="radio" name="sex" value="0" id="female" />

<label for="female">女</label>

时间: 2024-10-03 10:45:14