目录
1 HTML前言
1.1HTML介绍
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
超文本是一种组织信息的，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
1.2 web标准
web标准有三层结构：分别是结构（html）,表现（css）和行为（Javascript）
其中结构类似人的身体，表现类似人的穿着，行为类似人的行为动作
理想状态下，他们三层相互独立，放在不同的文件中
2 HTML基本结构
2.1 结构
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
我的第一个网页
</body>
</html>
<head>......</head>网页头部：网页的标题与信息。
<body>......</body>：主体部分：网页的主体内容，这里的东西都会在浏览器上面去呈现出来。
2.2 语法
如上<body></body>等称之为标签，他们都有一个特点，都是成对出现的，而且第二个标签都有一个斜杠来表示闭合，否则都是开放标签，无法配对，从而引起页面的错乱，也有一些是单个出现的。
2.3转义符
| | 空格 |
| < | < |
| > | > |
| ¥ | ￥ |
| " | " |
| © | © |
| ® | ® |
| ± | ± |
| ‰ | ‰ |
| ÷ | ÷ |
| ...... | ....... |
3 常用标签
3.1 常用的标签
< 标签名 属性 = "属性值">
3.2 表单标签
<form 属性名称=“属性值”>
.......
</form>
表单标签一般会和input标签、textarea标签、select标签连用
例如：
<!DOCTYPE html>
<html>
<head>
<title>表单标签</title>
</head>
<body>
<form>
用户名：<input type="text"><br>
<input type="submit" value="按钮">
</form>
</body>
</html>3.2.1 form的属性
文件路径例子：
<!DOCTYPE html>
<html>
<head>
<title>表单标签</title>
</head>
<body>
<form action="..\demo01\demo04.html">
用户名：<input type="text"><br>
<input type="submit" value="提交">
</form>
</body>
</html>3.2.2 input标签
<input type="元素类型" name="元素名称" value="元素值" id="客户唯一标识"
| input的属性 | 说明 |
|---|---|
| checked | 默认选择 |
| readonly | 字段只读不能修改 |
| disabled | 表示input禁用 不可点击 |
| autofocus | 默认光标的位置 |
| required | input不能为空白提交 |
| size | |
| maxlength |
例如：
<!DOCTYPE html>
<html>
<head>
<title>type属性</title>
</head>
<body>
<div align="center">
<h1>用户注册</h1>
2.3.2 select标签
select标签表示下拉选择框
会和option标签连用 option表示的下拉选择框中的选项
属性：
value ---- 选项的值
name ---- 下拉框的名称
selected ----- 默认被选中的选项
multiple ----- 以列表的形式显示
<form>
用户名：<input type="text" name="username" id="username"
value="zhangsan" readonly="readonly" disabled="disabled"><br>
密码：<input type="password" name="password" autofocus><br>
确认密码：<input type="password" name="password" required><br>
请选择你的性别：<input type="radio" value="男" name="gender" checked>男
<input type="radio" value="女" name="gender">女<br>
<p>
<input type="checkbox" value="跳舞" name="dance">跳舞
<input type="checkbox" value="跳舞" name="dance">唱歌
<input type="checkbox" value="跳舞" name="dance">打篮球
<input type="checkbox" value="跳舞" name="dance">看书
<input type="checkbox" value="跳舞" name="dance">说唱
</p>
<input type="submit" value="提交">
<input type="reset" value="复位">
<input type="button" value="按钮"><br>
<!--<input type="image" src="..\images\按钮1.jpg">-->
<input type="file">
<input type="hidden">
请您输入您的邮箱：<input type="email">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="time">
<input type="range">
</form>
</div>
</body>
</html>3.2.3select标签
select标签表示下拉选择框 会和option标签连用 option表示的下拉选择框中的选项
| select标签的属性 | 说明 |
|---|---|
| value | 选项的值 |
| name | 下拉框的名称 |
| selected | 默认被选中的选项 |
| multiple | 以列表的形式显示 |
例如：
<!DOCTYPE html>
<html>
<head>
<title>select</title>
</head>
<body>
<form>
请选择您所在的城市：
<select multiple="multiple">
<option value="北京">北京</option>
<option>上海</option>
2.3.3 textarea标签
语法结构：
cols ---- 多少列 表示的是文本域的宽度
rows --- 多少行 表示的文本域的高度
2.4 常用的一些属性
常用属性（以body标签为例）
Text --- 文本颜色
link ------ 超链接文本的颜色
vlink --- 访问过的超链接的文本颜色
Alink --- 激活超链接文本的颜色
bgcolor ---- 背景颜色
background --- 背景图片 一般不建议背景使用图片
背景图片和背景颜色同时存在时候要注意优先级的问题（自己下来看）
<option>广州</option>
<option selected="selected">重庆</option>
</select>
</form>
</body>
</html>3.2.4 textarea标签
<textarea name=" " cols=" " rows=" ">内容</textarea>
cols-----多少列 表示的是文本域的宽度
rows-----多少行 表示的文本域的高度
例如：
<!DOCTYPE html>
<html>
<head>
<title>select</title>
</head>
<body>
<form>
<textarea cols="20" rows="5">阿福讲案例法案件发了软件上！！！！</textarea>
</form>
</body>
</html>3.3常用的一些属性
<label>标签 意义不太明确，一般会和input连用
常用属性（以body标签为例）
<a>-----超链接
例如：<a href="https://www.baidu.com/">点击我</a>
| 属性 | 说明 |
|---|---|
| 跑马灯（弹幕） marquee 标签 | 淘汰 |
| direction | -表示滚动的方向，值可以是left，right，up，down，默认为left |
| behavior | 表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（往返滚动） |
| loop | 表示循环的次数，值是正整数，默认为无限循环 |
| scrollamount | -表示运动速度，值是正整数，默认为6 |
| scrolldelay | 表示停顿时间，值是正整数，默认为0，单位似乎是毫秒 |
| align | --表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle |
| bgcolor | 表示运动区域的背景色，值是16进制的RGB颜色，默认为白色 |
| height、width | 表示运动区域的高度度和宽度，值是正整数（单位是像素）或百分数，默认 width=100% height为标签内元素的高度 |
| hspace、vspace | -表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。 |
| οnmοuseοver=this.stop() οnmοuseοut=this.start() | 表示当鼠标移上区域的时候滚动停止，当鼠标 移开的时候又继续滚动。 |
3.4 a标签
超链接标签，语法：
<a href="链接地址">链接别名</a>
Target属性值
| 值 | 说明 |
|---|---|
| _blank | 在新窗口中打开被链接文档 |
| _self（默认） | 在相同的框架中打开被链接文档 |
| _parent | 在父框架集中打开被链接文档 |
| _top | 在整个窗口中打开被链接文档 |
| framename | 在指定的框架中打开被链接文档 |
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="https://www.baidu.com/">点击我</a>
<a href="https://www.baidu.com/" target="_blank">点击我1</a>
<a href="https://www.baidu.com/" target="_self">点击我2</a>
</body>
</html>锚点
<body>
<h3>XXX小说</h3>
<a href="#01"><h5>第一章</h5></a>
<a href="#02"><h5>第二章</h5></a>
<a href="#03"><h5>第三章</h5></a>
<a href="#04"><h5>第四章</h5></a>
<a href="#05"><h5>第五章</h5></a>
<a href="#06"><h5>第六章</h5></a>
<p>
<a id=“01”>第一章</a>
.........
</p>
</body>
回到顶部：
<body>
<a id="top"><h3>XXX小说</h3></a>
<a href="#01"><h5>第一章</h5></a>
<a href="#02"><h5>第二章</h5></a>
2.6 img标签
图片格式：GIF JPG PNG BMP
2.6.1 常见的属性
src属性 ---- 指代图片的路径（相对路径和绝对路径）
alt属性 ---- 表示的图像的代替文本（路径错误或者图片损坏或者浏览器的问题显示不出图片的时候）
width 和 height ----- 控制图片的大小 单位可以使用px %
border -------- 边框 默认边框的取值0 没有边框 >=1 数字越大边框就越大 （大小指的是边框的粗细）
align ----位置 指的是文字和图片的位置 取值 center left right bottom middle top,默认的下对齐
title ---- 图片标题 ，用来显示描述图片的文字，鼠标悬停在图片上的时候会出现的文字
注意：如果没有设置Alt属性的时候，title就是Alt的取值
<a href="#03"><h5>第三章</h5></a>
<a href="#04"><h5>第四章</h5></a>
<a href="#05"><h5>第五章</h5></a>
<a href="#06"><h5>第六章</h5></a>
<p>
<a id=“01”>第一章</a>
.........
</p>
<a href="#top">回到顶部</a>
</body>3.5 img标签
插入图片，图片格式:GIF JPG PNG BMP
3.5.1 img常见属性
格式：<img src="image/图片1.png" alt="哆啦">
| img属性 | 说明 |
|---|---|
| src | 指代图片的路径（相对路径和绝对路径） |
| alt | 表示的图像的代替文本（路径错误或者图片损坏或者浏览器的问题显示不出图片的时候） |
| width 和 height | 控制图片的大小 单位可以使用px % |
| border | 边框 默认边框的取值0 没有边框 >=1 数字越大边框就越大 （大小指的是边框的粗细） |
| align | -位置 指的是文字和图片的位置 取值 center left right bottom middle top,默认的下对齐 |
| title | 图片标题 ，用来显示描述图片的文字，鼠标悬停在图片上的时候会出现的文字 |
注意：如果没有设置Alt属性的时候，title就是Alt的取值
<body>
哆啦A梦<img src="images/图片1.png" alt="哆啦" width="200px" height="150px"
border="1"><br>
哆啦A梦居中<img src="images/图片1.png" alt="哆啦" width="200px" height="150px"
align="center"><br>
哆啦A梦居左<img src="images/图片1.png" alt="哆啦" width="200px" height="150px"
align="left"><br>
哆啦A梦居中<img src="images/图片1.png" alt="哆啦" width="200px" height="150px"
align="middle"><br>
哆啦A梦下对齐<img src="images/图片1.png" alt="哆啦" width="200px" height="150px"
align="bottom"><br>
哆啦A梦上对齐<img src="images/图片1.png" alt="哆啦" width="200px" height="150px"
align="top"><br>
哆啦A梦居右<img src="images/图片1.png" alt="哆啦" width="200px" height="150px"
align="right"><br>
</body>3.5.2 位图
usemap属性
map标签和area标签连用
| shape属性 | 鼠标点击的形状 |
| coords属性 | 点击形状的大小 |
| href属性 | 表示跳转的路径 |
例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="images/猫咪.jpg" usemap="#image">
<map name="image">
<area shape="circle" coords="154,132,50" href="demo01.html"></area>
</map>
</body>
</html>3.5.3多媒体标签
视频标签 video 音频标签 audio
| src | 表示音频和视频的文件位置（相对路径或者绝对路径） |
| controls | 表示的是显示播放器的组件 |
| autoplay | 自动播放 |
<!DOCTYPE html>
<html>
<head>
<title>音频和视频</title>
</head>
<body>
<audio src="D:\重大城科\前端0601\第四天\video\汪苏泷 - 小星星.mp3" controls
autoplay></audio>
<video src="D:\重大城科\前端0601\第四天\video\花园宝宝2.mp4" controls autoplay>
</video>
</body>
</html>3.6表格布局
表格的作用：用来描述具有二维结构的数据
包括的标签有：table thead tbody tfoot tr td
| table标签 | 用于定义一个表格 |
| thead | 定义表头 |
| tr | 行 |
| td | 列 单元格 必须放在tr |
| tbody | 主干 |
| tfoot | 尾 |
<!DOCTYPE html>
<html>
table标签 ------- 用于定义一个表格
thead ---- 定义表头
tr ---- 行
td ---- 列 单元格 必须放在tr
tbody --- 主干
tfoot----- 尾
2.7.1 表格的属性
2.7.1.1 表格的边框
border 属性 ------ 边框 取值是数字 单位是像素 当取值为0的时候表示没有边框（默认）大于0的时候表
格是有边框的，数值一定要为整数
<head>
<title>表格标签</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<td>this text is in the thead</td>
</tr>
</thead>
<tbody>
<tr>
<td>this text is in the tbody</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>this text is in the tfoot</td>
</tr>
</tfoot>
</table>
</body>
</html>
3.6.1 表格的属性
| 表格 | 属性 | 说明 |
|---|---|---|
| 表格的边框 | border 属性 | - 边框 取值是数字 单位是像素 当取值为0的时候表示没有边框（默认）大于0的时候表 格是有边框的，数值一定要为整数 |
| 表格的宽和高 | width | 表示的是表格宽度（单位是像素，百分） |
| height | 表示表格高度（单位是像素，百分） | |
| 表格的对齐 | align | 表示的是表格对齐方式 left center right,默认是lef |
| 表格的背景 | bgcolor | 表示的是表格的背景颜色 |
| background | 表示背景图像 | |
| 注意：表格的tr和td也是可以设置宽度和高度已经背景颜色 | ||
| 表格的间距和边距（默认都为2px） | cellpadding | 表示表格边距（单元格内元素距离单元格边缘的距离） |
| cellspacing | 表示表格间距（单元格与单元格之间的距离） | |
| 表格合并 | rowspan="n" | - n是一个整数，表示的是单元格在垂直方向跨的行数 单元格跨列-----合并的是列 |
| colspan="n" | n是一个整数，表示的是单元格在水平方向跨的列数 | |
设置表格高度和宽度：
<!DOCTYPE html>
<html>
<head>
<title>表格标签</title>
</head>
<body>
<table border="1" width="200" height="100">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>表格的对齐例子
<!DOCTYPE html>
<html>
<head>
<title>表格标签</title>
</head>
<body>
<table border="1" width="200" height="100" align="right">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>表格背景
<!DOCTYPE html>
<html>
<head>
<title>表格标签</title>
</head>
<body>
<table border="1" width="200" height="100" align="center" background =
"bg.jpg" bgcolor="#cccccc">
<tr>
<td > </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>3.6.2 表格的嵌套
表格嵌套指的是一个表格放在另一个表格单元格中。可以用来布局,如下
<!DOCTYPE html>
<html>
<head>
<title>表格标签</title>
</head>
<body>
<table width="300" border="1">
<tr>
<td> </td>
<td>
<table width="100" border="1" align="center">
<tr>
<td> </td>
<td> </td>
</tr>
2.7.3 表格合并
单元格跨行---- 合并的是行
rowspan="n" ----- n是一个整数，表示的是单元格在垂直方向跨的行数
单元格跨列-----合并的是列
</table>
</td>
</tr>
</table>
</body>
</html>3.7 列表标签
主要有三种----- 有序、无序、数据列表
| 列表标签 | 属性 | 说明 |
|---|---|---|
| 有序列表 ol | type属性 | 表示设置序号的种类，1、A、a、I、i,默认取值是1 |
| start 属性 | 控制开始序号的位置 | |
| reversed | 降序（反序） | |
| 无序列表 ul | disc（默认） | 实心圆 |
| clrcle | 空心圆 | |
| square | 实心方块 |
3.8 多窗口框架
一个页面可以显示多个窗口 ----- frameset
4.0版本 多窗口 5.0版本中 内嵌窗口
注意：如果要使用frameset标签，就不能和body标签连用
| 属性 | 值 | 说明 |
|---|---|---|
| cols | plxels % * | 定义框架集中列的数目和尺寸 |
| rows | 定义框架集中行的数目和尺寸 |
例如
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<frameset rows="15%,*,15%">
<frame src="demo01.html"></frame>
<frameset cols="25%,*">
<frame src="demo02.html"></frame>
<frame src="demo03.html"></frame>
</frameset>
<frame src="demo04.html"></frame>
</frameset>
</html>
558
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
