1. HTML:超文本标记语言，作用就是用来定义网页元素，比如文字、图片、表格等一些网页元素。
这个语言是由w3c万维网联盟定义的，这个标记语言，由浏览器解析执行。
语法特点就是，由很多预定义的标签组成 例如<a></a> <b></b>
这些标签有两类 : 一类叫做围堵标签，有开始标签和结束标签 例如：<s>内容</s>
另一类叫做 自闭和标签<br/> <hr/>
我们这些许许多多的预定义标签，就构成了我们整个HTML
严格意义上来说，标记语言，不算真正的语言，因为没有逻辑性，只需要记忆这些预定义标签是干嘛用的。
这些标签，上面还自带了一些属性，可以设置出一些标签的效果，例如 <font size="7" color="red">一段文字</font>
2. 快速入门：如何做出一个网页。
开发工具：记事本，IDE集成开发工具
先用记事本来做一个网页
新建一个记事本，然后将后缀名改为 .html或.htm
打开文件，进行编写
首先网页都需要一个骨架：
<html>
<head>
<title>我的网站</title>
</head>
<body>
<!--注释
font:字体标签
属性： size 设置字体大小 取值 1---7
color:设置颜色 取值可以写 颜色的因为单词 还可以写 16进制的颜色值
-->
<font size="7" color="#cc0066" face="楷体">这是一个网页的主体部分，欢迎光临我的网站。
</font>
</body>
</html>
META标记是html语言的head部分的一个辅助性的标记的，他位于head和title标记之间，他提供给用户不可见的信息。
meta标记的用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie;可以用于来鉴别作者，设置页面格式，标注内容提要和一些关键字，还可以设置页面的自动刷新以及等级等等。
在头部的<head></head>中，有另一组标签<title></title>。打在<title></title>这里面的文字会出现在浏览器视窗最上面蓝色部分里，作为网页的主题。
实例：
<title>这是我的html页面</title>
或许你会发现这样一个问题：我们已经在记事本里排版排的很漂亮，为何通过浏览器查看是就变了样子，那是因为浏览器不像word,他不认识Enter键或者空格键，所以当你按多少次空格，浏览器都会当作没看见一样。
常用的分隔标记：
强制断行标记“<br/>”
强制分段标记“<p>”
空格“ ；”
<br>的使用:
<html>
<head>
<title>文字上的分隔标记1</title>
</head>
<body>
为救李浪离家远。<br/>
谁料皇榜中状元。
</body>
</html>
例子2：<p>的使用
<html>
<head>
<title>文字上的分隔标记2</title>
</head>
<body>
为救李浪离家远。<p>
谁料皇榜中状元。</p>
</body>
</html>
例子3：空格的使用
<html>
<head>
<title></title>
</head>
<body>
为救李浪离家远。   谁料皇榜中状元。
</body>
</html>
1.文字的置左，置右，置中
刚刚我们学过的分段标记“<p>”在加上一些简单 的属性设定，就可以让其的文字置左，置右，置中。
2.置中标记
使用方法：
<center>内容</center>
3.保持原始数
使用方法：<pre>内容<pre>据格式标记
文字的置左，置中，置右
例子：
<html>
<head>
<title>排版不标记</title>
</head>
<body>
<p align="left">为救李浪离家远。</p>
<p align="center">谁料皇榜中状元。</p>
<p align="right">女驸马</p>
</body>
</html>
说明：align是分段标记的属性之一，这个属性将来会常常在不同标记中出现，他的功能就是专门在设定“水平对齐的位置”，其常见的属性值有三个“align="left"”置左，“align=""center”置中，“align="right"”置右。
置中标记
例子：
<html>
<head>
<title>置中标记</title>
</head>
<body>
<center>为救李浪离家远</center>
</body>
</html>
说明:
这是一个经常用到的标记，除了文字外，还有图片，表格等等一些其他的标记，任何可以显示在网页中的东西他都可以置之中。
保持原始数
例子：
<html>
<head>
<title>保持原始数据格式标记</title>
</head>
<body>
<Pre>
为救李浪离家远
谁料皇榜中状元
</pre>
</body>
</html>
说明：
利用“<pre>”标记可以将排版和格式后的内容原封不动的呈现出来。
1.标题标记
使用方法：<h1>内容</h1>
2.设置字体标记
使用方法：<font size=“2” color=“red” face=“黑体”>内容</font>
3.字体变化标记
使用：在文字标记中，对于文字的格式也有相当多的变化，如加粗，斜体等等。
<b></b> 加粗 <i></i> 斜体 <u></u> 底线
<kbd>用粗体等宽字体显示文字</kbd>
<var>用较小的固定宽度显示字体</var>
使用：在文字标记中，对于文字的格式也有相当多的变化，如加粗，斜体等等。
<dfn>用于名词解释，斜体显示</dfn>
<sup></sup> 上标 <smap>用于字母序列等宽</smap>
<sub></sub> 下标
<em></em> 强调 <address>模拟信封上的字体</address>
<strong></strong> 加强
<s></s>删除线 <strike>删除线</strike>
<big>比默认字号大一号</big>
<small>比默认字号小一号</small>
<code>以等宽字体显示计算机程序代码</code>
使用：<body bgcolor="red" backgroud="bg.jpg">
例子1：
<html>
<head><title>背景颜色</title> </head>
<body bgcolor="red">
<font size="4" face="黑体" color="red">背景颜色</font>
</body> </html>
例子2：
<html>
<head><title>背景颜色</title> </head>
<body background="bg.jpg">
<font size="4" face="黑体" color="red">背景图片</font>
</body> </html>
分隔线标记
使用:上一部分<hr>下一部分
例子：
<html>
<head>
<title>背景颜色</title>
</head>
<body>
abcdefg。<br>
<hr color="red" width="240" size="2" noshade>
higklmn。
</body>
</html>
虚线
<hr width=150 style="border:1px dashed red; height:1px"><HR style="BORDER-RIGHT: #00686b 1px dotted; BORDER-TOP: #00686b 1px dotted; BORDER-LEFT: #00686b 1px dotted; BORDER-BOTTOM: #00686b 1px dotted" noShade SIZE=1>
使用：<img src="boy.jpg" alt="haha" align="left" border="0" height="56px" width="32px">
例子：
<html>
<head>
<title>图片</title>
</head>
<body>
<img src="boy.jpg" alt="haha" align="left" border="0“ height="56px" width="32px">
</body>
</html>
说明：向网页中插入图片。
1.无序列表< ul>
2.有序列表 <ol>
3.自定义列表 <dl>
1.无序列表
例子：
<html>
<head>
<title>无序列表</title>
</head>
<ul>
<li>姓名：jock
<li>生日：1989/4/9
<li>星座：天蝎座
</ul>
</body>
</html>
说明：其中<ul>就是无序列表，没增加一列内容，就需要加一个<li>;
可以为 <ul>添加属性type="disk"(实心点)，type="square"(小正方形)type="circle"(空心点)
2.有序列表
例子：
<html>
<head>
<title>有序列表</title>
</head>
<ol>
<li>姓名：jock
<li>生日：1989/4/9
<li>星座：天蝎座
</ol>
</body>
</html>
说明：其中<ol>就是无序列表，没增加一列内容，就需要加一个<li>;
可以为 <ol>添加属性type="1"(数字)，type="A"(大写字母)，type="a"(小写字母)，type="I"(大写罗马)，type="i"(小写罗马)；
例子： 可以指定序列的开始数目。
<html>
<head>
<title>有序列表</title>
</head>
<ol start="8">
<li>姓名：jock
<li>生日：1989/4/9
<li>星座：天蝎座
</ol>
</body>
</html>
3.自定义列表
例子：
<html>
<head>
<title>有序列表</title>
</head>
<dt>咖啡</dt>
<dd>黑色热饮</dd>
<dt>牛奶</dt>
<dd>白色冷饮</dd>
</body>
</html>
html中有很多特殊的字符是需要特殊的处理。
下面看几个特殊的字符处理：
转义字符
< < > > & & &qout; “ 空格
例子： <html>
<head><title>特殊的字符</title> </head>
<body>
<<br>><br>&<br> &qout;<br>
</body>
</html>
1.连接到其他的文档
2.网页的内部链接
3.网页的外部链接
4.图片的锚点链接
1.连接到其他的文档
例子：
<html>
<head>
<title>超链接1</title>
</head>
<body>
<a href=“特殊字符.html“ target=”_blank”>连接其他文件</a> target=“_self” 在自身窗口打开
</body>_
</html>
这里需要注意的就是文件的路径，这里我用的是相对路径
绝对路径：是指从根目录到文件的完整路径。
相对路径：是指相对于当前文件的文件位置。
2.网页的内部链接
例子：
<html>
<head>
<title>超链接2</title>
</head>
<body>
<a href="#c7">查看章节7</a>
<h2>章节1</h2>
<p>该章节是关于。。。。。。。。。。</p>
<h2>章节2</h2>
<p>该章节是关于。。。。。。。。。。</p>
<h2>章节3</h2>
<p>该章节是关于。。。。。。。。。。</p>
<h2>章节4</h2>
<p>该章节是关于。。。。。。。。。。</p>
<h2>章节5</h2>
<p>该章节是关于。。。。。。。。。。</p>
<h2>章节6</h2>
<p>该章节是关于。。。。。。。。。。</p>
<a name="c7">
<h2>章节7</h2>
<p>该章节是关于。。。。。。。。。。</p>
</a>
<h2>章节8</h2>
<p>该章节是关于。。。。。。。。。。</p>
</body>
</html>
3.网页的外部链接
例子：
<html>
<head>
<title>链接的外部文件</title>
</head>
<body>
<a href="http://www.baidu.com">链接的百度</a>
</body>
</html>
4，通过CSS去掉 超链接的下划线
<style>
a:link{
color:red;
text-decoration:none;
}
a:visited{
color:yellow;
text-decoration:none;
}
a:hover{
color:green;
text-decoration:none;
}
a:active{
color:#33ff33;
text-decoration:none;
}
5. 图片的锚点链接
//给图片设置热点链接
<img src=“img/mainbg.jpg” width=“500px” height=“500px” align=“absmiddle” usemap=“#Map” />注意使用 usemap
<map name="Map" id="Map">
<area shape=“rect” coords=“47,67,187,140” href=“http://www.baidu.com”/> 几个数字 代表矩形的 xy 坐标 以及矩形的长宽
<area shape=“circle” coords=“300,400,300” href=“http://www.baidu.com” target=“_blank”/> 几个数字代表 圆形的xy坐标 以及圆点半径
</map>
表格的结构
1.<table>
<table>...</table>是用来在html页面上创建表格的。
2.<th>代表列名一般放在第一行
3.<tr>代表格的一行。
4.<td>用来定义表格的一列。
在默认情况下，表格是没有边框的，如果想要出现边框，就是用border属性。
表格的设置
表格的合并
表格的结构
1.<table>
<table>...</table>是用来在html页面上创建表格的。
2.<th>代表列名一般放在第一行
3.<tr>代表格的一行。
4.<td>用来定义表格的一列。
在默认情况下，表格是没有边框的，如果想要出现边框，就是用border属性。
表格的设置
表格的合并
<input />标签的 type分为：
text -文本框
button -按钮
submit-提交
reset-重置
password -密码
checkbox-多选
radio-单选
file -上传文件
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）
写法：<input type = “text” value=“”/>
注意：只有部分浏览器支持所有type类型
要想点击文字选中按钮要配合 label 标签
<input type="radio" id="sex" name="aa"/><label for="sex">男</label>
<input type="radio" id="wm" name="aa"/><label for="wm">nv</label>
4.1邮箱输入框
<input type="email" name="user_email" />
4.2数字输入框
<input type="number" name="points" min="1" max="10" />
4.3数字范围输入框（进度条）
<input type="range" name="points" min="1" max="10" />
4.4颜色选择框
<input type="color" name="colortext"/><br>
Select标签
<select>
<option value="qxz" selected/>请选择
<option value=“A”/>苹果
<option value=“B”/>香蕉
<option value=“C”/>橘子
<option value=“D”/>西瓜
</select>
TEXTAREA便签
<TEXTAREA ROWS="5" COLS="30" ></TEXTAREA >
表单的用途
表单在网页上用来给访问者填写信息的，从而获得用户信息，使用网页进行交互的功能。一般是将表单设计在一个html页面中，当用户填写信息后做提交操作，于是表单的内容就会从客户端的浏览器上发送给服务器，经过服务器上的jsp或者ASP或者Cgi等处理后，再将用户所需的信息传送给客户端的浏览器上，这样网页就具有交互性了。
表单构成
<form></form>
<form></form>标记是用来创建一个表单，在标记之间一切都属于表单里的内容。
<from>标记具有action，metnod,target属性。 action属性是处理处理程序的程序名称。method属性是用来定义处理程序的从表单中获取信息的方法，通常有两种分别是GET和POST两种。
target属性用来制定目标窗口的。
表单的工作原理
1.访问者填写表单，并提交给web服务器处理；
2.在web服务器上的后台处理程序对提交后的数据进行处理；
3.后台处理程序处理完成后，会重新生成一个新的html页面发给客户端。
表单中的各种组件
1.文本框
例子：
<html>
<head>
<title>表单中的文本框</title>
</head>
<body>
<form>
姓名：<input name="username" type="text" size="20" maxlength="5" value="请输入"/>
</form>
</body>
</html>
name="username" 文本框的名称
type="text" 该属性是确定文本框的形态
size="20" 文本框的宽度
maxlength="5" 可输入的最大长度
value="请输入" 预设值
2.密码框
例子：
<html>
<head>
<title>表单中的密码框</title>
</head>
<body>
<form>
密码：<input name="username" type="password" size="20" maxlength="5" value="123"/>
</form>
</body>
</html>
name="username" 密码框的名称
type="text" 该属性是确定密码框的形态
size="20" 密码框的宽度
maxlength="5" 可输入的最大长度
value="请输入" 预设值
3.单选按钮
例子：
<html>
<head>
<title>表单中的单选按钮</title>
</head>
<body>
<form>
男<input name="sex" type="radio" value="boy"/>
女<input name="sex" type="radio" value="girl" checked/>
</form>
</body>
</html>
name="sex" 单选按钮的名称
value="boy" 单选按钮的值
type="radio" 该属性是确定单选按钮的形态
checked 设置选中
4.复选框
例子：
<html>
<head>
<title>表单中的复选框</title>
</head>
<body>
<form>
爱好：
<input name="storp" type="checkbox" value="movie" checked/>电影
<input name="storp" type="checkbox" value="book" /> 看书
</form>
</body>
</html>
name="storp" 复选框的名称
type="checkbox" 该属性是确定复选框的形态
value="movie" 复选框的值
checked 设置选中
5.下拉列表
例子：
<html>
<head>
<title>表单中的下拉列表</title>
</head>
<body>
<form>
请选择你最喜欢的种族：
<select name="mx" multiple size="1">
<option value="qxz" selected/>请选择
<option value="sz"/>兽族
<option value="rz"/>人族
<option value="wlz"/>亡灵族
<option value="jlz"/>精灵族
</select>
</form>
</body>
</html>
name="mx" 复选框的名称
multiple 设置多选
size="1" 列显示几个选项
value="qxz" 复选框的值
selected 设置选中
6.文本域
例子：
<HTML>
<HEAD>
<TITLE> 文本域 </TITLE>
</HEAD>
<BODY>
<form>
意见：
<TEXTAREA NAME="yijian" ROWS="3" COLS="20" wrap="off"></TEXTAREA>
</form>
</BODY>
</HTML>
NAME="yijian" 名称
ROWS="3" 行数
COLS="20" 列数
wrap="off" 该属性有三种取值off(输入文字不自动换行)
virtual(输入文字自动换行，在用户没有自动按下回车，向后台发送时，视为没有换行)
physical(输入文字自动换行，向后台发送时，视为有换行)
7.文件域
例子：
<HTML>
<HEAD>
<TITLE> 文件域 </TITLE>
</HEAD>
<BODY>
<form>
<input name="file" type="file">
</form>
</BODY>
</HTML>
8.图片域
例子：
<HTML>
<HEAD>
<TITLE> 图片域 </TITLE>
</HEAD>
<BODY>
<form>
<input name="pt" type="image" src="F:\图片\刀刀\刀刀狗1.jpg" width="300" height="400" border="1">
</form>
</BODY>
</HTML>
9.普通按钮
例子：
<HTML>
<HEAD>
<TITLE> 按钮 </TITLE>
</HEAD>
<BODY>
<form>
<input name="anniu" type="button" value="send">
</form>
</BODY>
</HTML>
10.提交按钮
例子：
<HTML>
<HEAD>
<TITLE> 提交按钮 </TITLE>
</HEAD>
<BODY>
<form>
<INPUT name="anniu" TYPE="submit" value="提交">
</form>
</BODY>
</HTML>
11.重置按钮
<HTML>
<HEAD>
<TITLE> 重置按钮</TITLE>
</HEAD>
<BODY>
<form>
<INPUT name="anniu" TYPE="reset" value="重置" >
</form>
</BODY>
</HTML>
12.隐藏域
例子：
<HTML>
<HEAD>
<TITLE> 隐藏域 </TITLE>
</HEAD>
<BODY>
<form>
<INPUT TYPE="hidden" NAME="H1" value="love">
</form>
</BODY>
</HTML>
混合框架
<html>
<head>
<title>框架页示例</title>
</head>
<frameset rows="50%,50%">
<frame src="http://www.baidu.com">
<frameset cols="25%,75%">
<frame src="http://www.sina.com.cn">
<frame src="http://www.baidu.com">
</frameset>
</frameset>
</html>
1、HTML4多媒体
<embed src="文件源" width="宽度" autostart="true" loop="true">
src 设置文件源
width 设置宽度
autostart 设置是否自动播放，如果是true就是自动播放，是flase不自动播放
loop 设置是否循环播放true就是循环播放，false就是不自动播放
2、HTML5多媒体
<audio src="G:\Media\霍比特人3：五军之战.mp4" controls="controls"></audio>
3、添加背景音乐
<bgsound src="明月几时有.mp3" loop=5>
视频标签
<video src="G:\Media\霍比特人3：五军之战.mp4" width="320" height="240" controls="controls">
</video>
control 属性供添加播放、暂停和音量控件。
Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。
要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。
层也可以添加事件和属性
<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph</p>
</div>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas>
Js代码控制//画点
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
//画线
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
扫一扫
4991
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
