比较简单，无事的跳过，直接w3c.school
一、HTML简介
一个实例：右键查看源文件（标签，属性，内容...)
HTML文档=网页
HTML超文本标记语言(Hyper Text Markup Language)
HTML标签：不区分大小写，有些大写是自动生成的。
页面包括：格式标签与页面内容。标签把要显示在网页的内容包含起来，就构成网页。
网页的样貌由css来呈现，它控制着内容显示的效果。
网页文件格式：.html 或 .htm
学习HTML是通用语言，需要：浏览器与记事本
使用工具：记事本,NotePad++,EditPlus...
网页三剑客:DreamWeaver,FireWorks,Flash
FrontPage
学习HTML方法：多记，多练
HTML+CSS=静态网页(过时)
JS+Jquery
二、编写HTML页面
1、步骤：
1）建立一个文本文件
2）创建的文件后缀名改为.htm或.html
3）写框架标签，对双出现，大写写随意。
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
2、基本标签
HTML基本结构：<html></html>
段落标签：<p></p>
空格标签： 不换行空格(Not-Break Space)
标题标签：<h#>:#=1-6 1最大，6最小
图片标签：<img src="..." />
scr：图片路径。注意：如果htm与图片是同一目录，可以用相对路径。
border: 图片边框，粗细以像素计算
height:图片高度
width:图片宽度
title:鼠标指向图片时的提示(无论是否正常显示)
alt:图片显示失败时的提示
注释标签: <!-- -->
<html>
<head>
<title>This is my first Html</title>
</head>
<body>
<p>今朝有酒今朝醉</p>
<p>莫使金 榜空对月</p>
<h1>我是标题1 </h1>
<h2>我是标题2 </h2>
<h3>我是标题3 </h3>
<h4>我是标题4 </h4>
<h5>我是标题5 </h5>
<h6>我是标题6 </h6>
<img src="E:\11.png" width="200",heighth="200" border="1px" title="还行吧" alt="这是图片"/>
<!--属性名="值"-->
</body>
</html>
练习：
<html>
<head>
<title>银河</title>
</head>
<body>
<h1>快来看啊！银河哦!!!</h1>
<img src="E:\1.png" width="200",height="200" tilte="银河" alt="银河图片"/>
<h2>科技名词定义</h2>
<p>中文名称：银河</p>
<p>英文名称:Milky Way</p>
<p>观测者所年垤的银河系主体在天球上的投影：在晴朗夜空中呈现为一条边界不规则的乳白色亮带</p>
<p>应用学科：天文学(一级学科),恒星和银河系（二级学科)</p>
</body>
</html>三、HTML元素
HTML基本块，Html元素
html元素有始有终，可以嵌套，使用小写.
加粗嵌套：<p>英文名称:<b>Milky Way</b></p>
html文档格式标签
标题标签：<h#></h#>
标题的重要性（搜索的问题）
浏览器会在标题前后添加空行
Html水平线：<hr /> horizantal
Html换行: <br /> break
Html中的特殊符号：
>(>),<(<),&(&),空格( )
练习：
<p>在晴朗夜空中呈现为一条边界不规则的乳白色亮带</p>
5>3<br/>
3<5<br/>
这是一个&号
<p>应用学科：天文学(一级学科),恒星和银河系（二级学科)</p>
四、Html属性
表现各标签的特征。<img>中的src即为属性
属性以"属性名=值“的形式出现。
属性的值建议用引号括起来；
属性建议以键值对的形式括起来；
一个标签可以有多个属性，用空格分开
<font></font>设置字体
size 字体大小1-7,7最大
color 字体颜色。
练习：
<html>
<head>
<title>img标签属性</title>
</head>
<body>
<h1>促销信息</h1>
<img src="E:\1.png" width="200",height="200" tilte="银河" border="1px"/>
<br/>
拍卖ACER上网本<br/>
奔腾双核，1G内存，200G硬盘
<p><font size="1" color="green">跳楼疯抢价</font><font size="7" color="red">1</font>元素起</p>
</body>
</html> 五、Html字体
<b> 加粗 Bold
<i> 斜体 Italic
<tt> 等宽(打印机文本) Typewrite Text
<u> 下划线 Underline
<sup>,<sub> 上下标
<s> 删除线 strikeout
练习：
<html>
<head>
<title>字体标签</title>
</head>
<body>
<b>要显示的文本内容</b><br/>
<i>要显示的文本内容</i><br/>
<tt>要显示的文本内容</tt><br/>
<u>要显示的文本内容</u><br/>
<p>要显示<sup>的</sup>文本<sub>内</sub>容</p>
<s>要显示的文本内容</s><br/>
</body>
</html>
六、A标签
1、超链接.
href属性指示链接的地址,注意不写明http会链接失败。不写href只是文本不是链接
<a>百度</a>
<a href="https://www.baidu.com">百度</a>
跳转：由一个网页地址转向另一个网页地址.
a一般是当前网页时行 跳转 。
target 指示跳转目标。 target="_blank"新开一个网页来打开链接.
_self则表示是自己，即当前网页。
<a href="https://www.baidu.com" target="_blank">百度</a>
<a href="http://www.baidu.com" target="_self">百度</a>
2、页面跳转
1)同页面跳转
name 给锚点位置命名,以便其它使用定位到此处。可用ID替代name
href中用"#name"链接到所去之处。
<body>
<a name="顶端" href="#底端">直到底端</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="底端" href="#顶端">回到顶端</a>
</body>
2）不同页面跳转定位
也可以不同网页中进行锚点。
修改href为"网页#name" ，就可以直接到另一个网页中的锚点位置name中去。
<a name="底端" href="test.html#积累量">回到顶端</a>
3)发送邮件
用href属性 mailto:邮件 来发送邮件。点击后会启动默认的邮件软件(outlook)进行发送。
subject=主题名&body=邮件内容
<a href="mailto:252696214@qq.com">发送邮件</a>
<a href="mailto:252696214@qq.com？subject=问题收集?body=兼容性不好">发送邮件</a>
一个图片标签，跳到另一个地方显示图片(连接指向另一个图片地址)
<a herf="png">照片</a>
文字显示链接，但又不允许连接上。
<a href="#">网易</a>
七、body中的属性
后面用样式表，比body的更强大。
text 设置文字颜色
<body text="red">
清风扶山岗,明月照大江<br/>
</body>
与下面的区别
<font color="red">清风扶山岗,明月照大江</font>
超链接，默认是蓝色，点击后变紫色
link 连接的颜色(默认蓝色），若改为白色则无法看到
alink active点击时,连接的颜色（默认紫色）
vlink visited点击后的颜色(以便识别已经点击过)
bgcolor 背景颜色
background 背景图片，平辅
<body text="green" link="pink" alink="red" vlink="black" bgcolor="gray" background="111.png">
<a href="#">清风扶山岗</a><br/>
<a href="#">清风扶山岗</a><br/>
</body>
八、html列表
1、无序列表unorder（圆点）
<ul>
<li>...</li>
<li>...</li>
...
</ul>
默认没有顺序，前面用小黑点表示。但可用type来指示前面符号
circle小空心圆， square小方块， disk小圆点(默认)
<ul type="square">
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
</ul>
2、有序列表order（数字）
<ol>
<li></li>
</ol>
默认从数字1开始。可用type指明序列开始。
a则是abc...开始,A则是ABC...开始,I则是罗马字符...开始
<ol type="A">
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
</ol>
3、自定义列表dl:define list; dt:define table, dd:define data
<dl>
<dt>...</dt>
<dd>...</dd>
<dd>...</dd>
<dt>...</dt>
...
</dl>
<dl>
<dt>面向对象</dt>
<dd>封闭</dd>
<dd>继承</dd>
<dt>C#类型</dt>
<dd>int</dd>
<dd>string</dd>
</dl>
九、Html表格
由于网页不容易控制排列格式，所以表格就显得很重要，它可以让数据排列整齐。
1、语法：
<table border="1">
<tr>
<td>单元格内容</td>
</tr>
....
</table>
tr:table row 表中一行数据。
td:table data 表中单元格数据
th:table head 表头（项目）数据，操作同td，只是文本加粗
width,height可以设置表格table的长宽大小
bgcolor 背景颜色
border 边框
align 水平对齐位置 left,center,right
valign 垂直对齐位置 top,middle,bottom
例子：
<table border="1" width="300" height="200">
<tr>
<td>1行1列</td>
<td>1行2列</td>
<td>1行3列</td>
</tr>
<tr>
<td>2行1列</td>
<td>2行2列</td>
<td>2行3列</td>
</tr>
</table>
注意：
1）表格中文字也可添加超链接；
2）表格中文字也可更改颜色，设置字号
3）去掉border后，没有边框，但仍然整齐排列
创建一行两列表格，左边放图片，右边放多行文本。
<table border="1px" >
<tr>
<td ><img src="E:\1.png" width="30" height="30"/></td>
<td>1行2列<br/>
1行2列<br/>
1行2列<br/>
</td>
</tr>
</table>
2、间距
cellsspacing 单元格间边框距离（0则无间距，是一条黑线)
cellpadding 单元格内距边框的最小空白。
上面两者是有区别的
<td>还有属性：align,valign,bgcolor,width,height,colspan,rowspan.
<table border="2" cellspacing="7" cellpadding="9">
<tr>
<td ><img src="E:\1.png" width="30" height="30"/></td>
<td>1行2列<br/>
1行2列<br/>
1行2列<br/>
</td>
</tr>
</table>
3、合并行与列
1)跨列合并的表格：colspan=数字 表示跨列合并的个数(column span)
已经跨列的后面单元，不再进行单元格填写
<table border="1" cellspacing="1" cellpadding="3">
<tr>
<td colspan="2">学生成绩 </td>
</tr>
<tr>
<td>语文</td>
<td>98 </td>
</tr>
<tr>
<td>数学</td>
<td>95 </td>
</tr>
</table>
2）跨行合并的表格:rowspan=数字， 表示跨行的个数(row span)
已经跨行的后面单元格，不再进行填写.
<table border="1">
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>98 </td>
</tr>
<tr>
<td>数学</td>
<td>95 </td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>88 </td>
</tr>
<tr>
<td>数学</td>
<td>91 </td>
</tr>
</table>
3）同时跨行与跨列的表格
从左向右，从上向下，逐个描述。已经跨的单元格不再进行描述。
<table border="1">
<tr>
<td>手机</td>
<td colspan="3">办公</td>
</tr>
<tr>
<td rowspan="3">总汇</td>
<td>铅笔</td>
<td>彩笔</td>
<td>粉笔</td>
</tr>
<tr>
<td>打印</td>
<td>刻录</td>
<td>墨盒</td>
</tr>
<tr>
<td>笔记</td>
<td>钢笔</td>
<td>墨水</td>
</tr>
</table>
4、综合练习：
1）用<ol><ul>显示歌曲列表。<ol>用abc，<ul>用实点
<ol type="a">
<li>爱 </li>
<li>青苹果乐园</li>
<li>红蜻蜓 </li>
<li>芙蓉姐夫 </li>
<li>水煮鱼 </li>
</ol>
<hr/>
<ul type="disk">
<li>爱 </li>
<li>青苹果乐园</li>
<li>红蜻蜓 </li>
<li>芙蓉姐夫 </li>
<li>水煮鱼 </li>
</ul>
2)用<table>作一表，显示姓名，性别，工资，表头加粗，居中显示.显示4个员工
<table width="200" height="100" border="1">
<tr>
<th align="center"><b>姓名</b></tH>
<th align="center"><b>性别</b></tH>
<th align="center"><b>工资</b></tH>
</tr>
<tr>
<td align="left">张三 </td>
<td align="left">男 </td>
<td align="left">10000</td>
</tr>
<tr>
<td align="right">李四 </td>
<td align="right">男 </td>
<td align="right">10000</td>
</tr>
<tr>
<td>王五 </td>
<td>男 </td>
<td>10001</td>
</tr>
<tr>
<td>王八蛋</td>
<td>男 </td>
<td>10002 </td>
</tr>
</table>
3)合并
<table border="1" cellpadding="1" width="300">
<tr>
<th colspan="3">学生基本情况</th>
</tr>
<tr>
<td align="center"><b>姓名</b></td>
<td align="center"><b>性别</b></td>
<td align="center"><b>专业</b></td>
</tr>
<tr>
<td>刘备 </td>
<td align="bottom">男 </td>
<td rowspan="3" width="50" height="50" bgcolor="green">计算机</td>
</tr>
<tr>
<td>孙尚香</td>
<td>女 </td>
</tr>
<tr>
<td>诸葛亮</td>
<td>男 </td>
</tr>
</table>
十、表单
html表单是用于搜集用户输入的数据，一般都扩在一对form标签中.
向服务器传输数据（比如用户密码等）
<form>的常用属性
action 表示提交的目标服务器
method 提交的方法get,poster
get 默认，以url提交，就是以地址栏带数据的方式提交
post 通用报文提交
1、表单元素：input,复选框，单选框，提交按钮，textarea等
input 有type属性：text,radio,submit,reset等。
submit默认为提交，reset默认为重置，用属性value可以更改名称。
name 指示控件名称，类似C#中的button1
<html>
<head>
<title>表单</title>
</head>
<body>
<form action="http://www.baidu.com" method="get">
用户名:<input type="text" name="txtName"/><br/>
密码:<input type="password" name="txtPwd"/><br/>
<input type="submit" value="提交到百度">
<input type="reset" value="清空">
</form>
</body>
</html> 填入用户与密码提交，会转到下面：
https://www.baidu.com/?txtName=abc&txtPwd=123
可以看到get方式是以地址栏，加上数据(键值对)的形式提交：
？key1=value1&key2=value2....
2、单选框的分组radio
默认单选框不分组，多个都可全部选中。用name来分组。用fielset划框，
用legend来说明图例
<form action="http://www.baidu.com" method="get">
<!--下面可以全部选中-->
<input type="radio"/>男<br/>
<input type="radio"/>女<br/>
<input type="radio"/>已婚<br/>
<input type="radio"/>未婚<br/>
<hr/>
<p/>
<!--下面用name来划分容器，用fieldset画出外表样式-->
<fieldset>
<legend>性别</legend>
<input type="radio" name="sex"/>男<br/>
<input type="radio" name="sex"/>女<br/>
</fieldset>
<fieldset>
<legend>婚姻状况</legend>
<input type="radio" name="married"/>已婚<br/>
<input type="radio" name="married"/>未婚<br/>
</fieldset>
</form>
3、下拉框select
不是写input,而是直接select.每个选项都是option
size 指示选项显示几项
optgroup进行选择分组，name指明分组的名称。
<select size="1">
<optgroup label="河北省">
<option>石家庄</option>
<option>沧州 </option>
<option>保定 </option>
<option>廊坊 </option>
</optgroup>
<optgroup label="河南省">
<option>郑州 </option>
<option>驻马店</option>
<option>洛阳 </option>
<option>新乡 </option>
</optgroup>
<optgroup label="湖北省">
<option>武汉</option>
<option>黄冈</option>
<option>黄石</option>
<option>十堰</option>
</optgroup>
<optgroup label="湖南省">
<option>长沙</option>
<option>岳阳</option>
<option>衡阳</option>
<option>益阳</option>
</optgroup>
</select>
4、照片文件类input file
还需要上照片，证件，材料等文件:
<input type="file"/>
5、多行文本textarea
可容纳无限数量文本，是等宽字体。用cols与rows来设置宽高尺寸.
<textarea cols="50" rows="3">
textarea标签是用来定义一个多行的文本输入控件，在文本输入域中可以输入任意长度的文本。还可以使用PHP等程序将此处输入的值发送到服务器，本篇文章我们就来详细介绍关于HTML中textarea标签的用法。
</textarea>
6、练习
<html>
<head>
<title>表单练习</title>
</head>
<body>
<form action="http://wwww.baidu.com" method="get">
<table border="1" width="200" height="80" >
<tr>
<td align="left">用户名:</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password"/></td>
</tr>
<tr>
<td>验证码：</td>
<td><input type="text" style="width:100px"/><image src="E:\1.png" width="30",height="10"</td>
</tr>
<tr>
<td></td>
<td><input type="checkbox"/>记住密码</td>
</tr>
<tr>
<td></td>
<td><input type="submit"/> <input type="reset"/></td>
</tr>
</table>
</form>
</body>
</html>
十一、Div+Span
能够熟练掌握css+div对网页布局
div是一个层级标签，独占多行，可通过style="backgroud:red;width:20;height:40"等
进行设置范围。注意：里面用分号隔开各项，键与值间用冒号。
span主要将修饰文本的放入其中，比如字体。
<html>
<head>
<title>Div</title>
</head>
<body>
<div>我是一个Div</Div>
<p>我是一个p标签</p>
<div style="background:gray;height:30">Div是一个层级标签</div>
<b>又是一个吃货</b>
<div style="background:green;height:30;width:200">Div是一个层级标签</div>
<hr/>
<span>Span标签上台表演---</span>
<b>可以看到span并不独占一行</b>
</body>
</html>
十二、框架标签
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个
框架，并且每个框架都独立于其他的框架。
使用框架的坏处：
开发人员必须同时跟踪更多的HTML文档
很难打印整张页面
网页被分成多个框架部分，作为承载这些部分的框架（承载框架），是不允许有body部分。
它专属拥有frameset标签来说明各部分的关系。
先写右边网页:
<html>
<head>
<title>right web</title>
</head>
<body bgcolor="green">
I'm right
</body>
</html> 再来左边网页
<html>
<head>
<title>left web</title>
</head>
<body bgcolor="pink">
I'm left
</body>
</html> 再来一个承载网页：
<html>
<head>
<title>index web</title>
</head>
<frameset>
<!--只能看到左边的页边，因为没有分配-->
<frame src="left.htm">
<frame src="right.htm">
</frameset>
</html>
保存后，打开index.htm发现只显示了第一个（也即left.htm）网页，因为并没有进行
分配它们的位置。
<html>
<head>
<title>index web</title>
</head>
<frameset rows="30%,*">
<!--只能看到左边的页边，因为没有分配-->
<frame src="left.htm">
<frame src="right.htm">
</frameset>
</html> 修改rows，表示从行的角度进行分配，即上下分配。30%则表示上面3成下面7成。
注意：30%与30不同，30是像素。
上面显示网页后，可以拖动中间的分隔线进行改变大小，这时可以设置其中一个：
<frame src="left.htm" noresize="noresize">
网页不不允许再进行更改大小。
也可以进行左右分配:
<frameset cols="50%,*">
但是，一个网页一次只能进行两部分的分隔.用frameset进行嵌套分隔就可以逐个分隔.
同一目录再建一个top.htm
<html>
<head>
<title>top web</title>
</head>
<body bgcolor="gray">
I'm top.
</body>
</html> 右边的网页加几个链接：right.htm
<html>
<head>
<title>right web</title>
</head>
<body bgcolor="Teal">
<a href="http://www.mop.com" target="left">猫扑</a><br/>
<a href="http://www.dapenti.com" target="left">打喷嚏</a><br/>
<a href="http://www.cnbeta.com" target="left">cnbeta</a><br/>
<a href="http://www.51aspx.com" target="left">51aspx</a><br/>
</body>
</html>
把承载网页index.htm修改：
<html>
<head>
<title>index web</title>
</head>
<frameset rows="15%,*">
<frame src="top.htm" noresize="noresize">
<frameset cols="50%,*">
<frame src="left.htm" noresize="noresize" name="left">
<frame src="right.htm">
</frameset>
</frameset>
</html>
扫一扫
3742
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
