html被称为超文本标记语言（简单来说就是比文本更加高级的语言），俗称网页，由内容和标签组合在一起的只能使用浏览器来观看的一种语言。不只是能放文字数字等，还可以放图文声像。
html是一种不需要编译，直接在浏览器中运行的标记语言。
网站就是多个网页由超链接连在一起的一个完整的可以直接访问的页面集合。
浏览器：一种专门用来访问页面的软件工具。
主流的浏览器有：谷歌浏览器 火狐浏览器
html的文件后缀名：.html .htm
：网页的根节点
：网页头信息
：主体部分
<html>
<head>
<title>百度一下，你差不多就知道title>
head>
<body>
你好，我是当前网页的主体内容！！！
body>
html>
二、html标签 1.介绍：
标签： html中定义的一些特殊的标记，用来让页面中的内容如何显示，怎么显示，在哪里显示等等。
作用：
1，内容如何显示
2，内容在哪里显示
3，内容怎么显示
分类：
双标记： <开始标记 属性=“值” 属性=“值” … > 内容
单标记： < 标记名 属性=“值” 属性=“值” …/>
（不同的标签属性不同）
2.使用规则：标记的使用规则：
1,一定要使用以定义的标签，不可使用自定义的标签
2,标记一定要有开始和结束成对出现，不可缺少
3,标记忽略大小写
4,标记内可以使用固定属性
5,多个标签可以相互嵌套，不可以交叉
注意：
1.html中的所有的标记都是固定标记，且带有一定的呈现效果，学习时要谨记。
2.html自带容错机制，如果出错，则会自动跳过，继续展示。
3.html中的多个留白默认是一个留白。
3.常用标签： ①文本标签：1）标题标签
< h align=“left/center/right”> 标题标记 < /h> h后面可以跟数字，n:1–6之间的数字，数字越小，字体越小，默认加粗且换行
align属性：设置对齐方式，缺省值为left
2）段落标签
< p align=“left/center/right”> 段落标签 < /p> 一段文字，与下一段有个间距
3）换行标签
< br/>
4）水平线标记
< hr color=“颜色” width=“长度” align=“left/center/right” size=“粗细”/>
长度和粗细的单位为px（像素）
5）字体标记
< font color=“颜色” size=“大小” face=“字体类型”>字体标记< /font>
6）居中标记
< center> 居中 < /center>
7）加粗标记
< b> 加粗 < /b> < strong> 加粗 < /strong>
8）斜体标记
< i> 斜体 < /i> < em> 斜体 < /em>
9）删除标记
< s> 删除< /s>
10）下标标记
< sub> 下标 < /sub>
11）上标标记
< sup>上标 < /sup>
小练习：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>《童话》歌词title>
head>
<body>
<h1>童话h1>
<p><b>演唱：光良b> 词曲：光良p>
<hr />
<p>
忘了有多久<br />
再没听到你<br />
对我说你最爱的故事我想了很久我开始慌了<br />
是不是我又做错了什么<br />
你哭着对我说<br />
童话里都是骗人的<br />
我不可能是你的王子<br />
也许你不<br />
p>
body>
html>
< img src=“图片路径” border=“边框” width=“图片宽度” height=“图片高度” alt=“图片没显示时提示语句” />
可以放置不同的图片格式
图片格式： jpg png gif …
图片路径：
相加路径 : 相对于当前的页面的路径
绝对路径 : 在具体的某个盘符中的路径
px : 像素 类似常见的厘米，米，毫秒… 注意：在html中可以省略不写
③列表标签列表就是在页面中可以有序的，或者无序的单有一定规则的一系列的数据。
有序列表：
<ol type="1/A/a/I/i" start="数字开始点">
<li type="...." >列表值li>
<li>列表值li>
......
ol>
无序列表：
<ul type="disc/circle/square">
<li type="...">列表值li>
<li>列表值li>
......
ul>
自定义列表：
<dl>
<dt>二级列表值dt>
<dd>三级列表值dd>
......
dl>
案例：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<h2>拜拜h2>
<h3>无序h3>
<ul type="disc">
<li >对你说拜拜oh 我的男孩li>
<ol>
<li>把偌大地图看穿li>
<li>找寻你的所在li>
<li>期待久违的对白li>
ol>
<li type="square">到底是掰还是暂时放开li>
<li >一年又一个礼拜li>
<li type="circle">把照片又往空盒里塞li>
ul>
<hr />
<h3>有序h3>
<ol type="I">
<li >对你说拜拜oh 我的男孩li>
<li >到底是掰还是暂时放开li>
<li >一年又一个礼拜li>
<li type="1">把照片又往空盒里塞li>
ol>
body>
html>
音频和视频在html也提供了一套专门用来播放视频和音频的标签，但是该标签只是简单的视频播放器而已。
视频音频播放标签：
可以放视频和音频，mp3，mp4等格式
< video src=“视频或音频的路径” controls width=“宽度” height=“高度”> < /video>
< embed src=“视频或音频的路径”> < /embed>
注意：视频直接放进去之后是一张图片，音频直接放进去则什么也不显示，需要加上controls属性，加上控制器就可以了。还可以调整视频的宽度和高度。
音频播放标签
< audio src=“视频或音频的路径” controls>< /audio>
注意：该标签只能播放音频，把视频放进入之后会发现，会把视频当成音频播放，没有画面。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<h2>视频播放标签h2>
<video src="./image/05html-列表.mp4" controls width="400" height="300">video>
<video src="image/拜拜-浙音4811（一个大金意）.mp3" controls>video>
<h2>音频播放标签h2>
<audio src="image/05html-列表.mp4" controls="controls">audio>
<audio src="image/拜拜-浙音4811（一个大金意）.mp3" controls="controls">audio>
body>
html>
超链接是页面与页面之间搭建相互访问关系的重要标签。
< a href="目标资源 " target=“打开的方式” name=“锚点名称” > 链接源 < /a>
href属性 : 目标资源
1， 网址资源 http://www.baidu.com
2， 本地资源 网页，图片，视频，音频，文件等等
3，锚点链接 跳转到页面中的指定位置 格式： #锚点名称
先在指定位置定义一个锚点，给出name，然后在需要跳转的位置给出锚点链接使用 href=#锚点名称 即可跳转
4，邮箱链接 发送邮件 格式： mailto:…
target属性: 页面的打开方式
_blank 在新窗口中打开页面
_self 在原有的窗口中打开页面，默认的
_parent 在父窗口中打开资源
自定义 在指定名称的窗口中打开资源
⑥表格标签表格用来在页面中展示信息较为整洁方便，也可以在整体的页面中进行整体布局。
table : 表格最大标签
属性：
border 边框尺寸
bordercolor 边框颜色
bgcolor 背景色
background 背景图片
width 表格宽度
height 表格高度
align 表格在body中的水平位置
frame 设置外边框
box border（四边框显示） lhs rhs（左、右侧边框显示） void（四边框不显示） blow above（底、顶部边框显示）
rules 设置内边框
none（内边框不显示） all（边框合并） rows（横向边框显示） cols（纵向边框显示）
cellspacing 设置内外边框留白
cellpadding 设置边框与内容之间的留白
caption: 表格的名称（表名）
tr:表格的行
属性：
height
bgcolor
background
align 表格中内容的位置
th:表格的列，表头使用默认内容加粗且居中，类似td
td:表格的列，普通的列
属性：
width
bgcolor
background
align left/right/center 水平位置
valign top/middle/bottom 垂直位置
rowspan 合并单元行
colspan 合并单元列
学生信息表案例：
注意：写的时候可以先写内容在调格式，这样会比较快，也比较清晰。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<h2 align="center">学生信息表h2>
<table border="1" width="500" height="100" align="center" >
<caption>学生信息表caption>
<tr align="center">
<th rowspan="2">学号th>
<th colspan="3">个人信息th>
<th colspan="2">入学信息th>
tr>
<tr align="center">
<td>姓名td>
<td>性别td>
<td>年龄td>
<td>班级td>
<td>入学年月td>
tr>
<tr align="center">
<td>001td>
<td>小红td>
<td>女td>
<td>22td>
<td>20210400td>
<td>2020年5月td>
tr>
<tr align="center">
<td>002td>
<td>小明td>
<td>男td>
<td>21td>
<td>20220101td>
<td>2021年6月td>
tr>
table>
body>
html>
个人简历案例：
<table border="1" align="center" width="600px">
<caption>个人简历caption>
<tr>
<td>姓名td>
<td width="90">td>
<td>性别td>
<td width="90">td>
<td>出生日期td>
<td width="90">td>
<td width="90" rowspan="4">照片td>
tr>
<tr>
<td>民族td>
<td width="90">td>
<td>政治面貌td>
<td width="90">td>
<td>婚姻状况td>
<td width="90">td>
tr>
<tr>
<td>现所在地td>
<td width="90">td>
<td>籍贯td>
<td width="90">td>
<td>学历td>
<td width="90">td>
tr>
<tr>
<td>毕业学校td>
<td colspan="2">td>
<td>专业td>
<td colspan="2">td>
tr>
<tr>
<td rowspan="5">学习经历td>
<td colspan="2">起止年月td>
<td colspan="2">就读学校td>
<td colspan="2">专业/课程td>
tr>
<tr height="20">
<td colspan="2">td>
<td colspan="2">td>
<td colspan="2">td>
tr>
<tr height="20">
<td colspan="2">td>
<td colspan="2">td>
<td colspan="2">td>
tr>
<tr height="20">
<td colspan="2">td>
<td colspan="2">td>
<td colspan="2">td>
tr>
<tr height="20">
<td colspan="2">td>
<td colspan="2">td>
<td colspan="2">td>
tr>
<tr>
<td rowspan="5">工作经历td>
<td colspan="2">起止年月td>
<td colspan="2">工作单位td>
<td colspan="2">职位td>
tr>
<tr height="20">
<td colspan="2">td>
<td colspan="2">td>
<td colspan="2">td>
tr>
<tr height="20">
<td colspan="2">td>
<td colspan="2">td>
<td colspan="2">td>
tr>
<tr height="20">
<td colspan="2">td>
<td colspan="2">td>
<td colspan="2">td>
tr>
<tr height="20">
<td colspan="2">td>
<td colspan="2">td>
<td colspan="2">td>
tr>
<tr>
<td>求职意向td>
<td colspan="6">td>
tr>
table>
表格布局：
在一个完整的页面中会把整个页面分为若干个不同的区域，不同的区域来放置不同的内容，这种方式被称为网页布局。而如果使用表格来布局被称为表格布局。后期也会学习div，div+css别称为div布局，也是目前主流的布局方式。
使用注意：
1，先对页面进行表格合理分割
2，创建表格，现在展示其边框
3，一定要定义好其单元格的尺寸
4，表格的单元格内也可以存在表格
5，编写好这个页面，最后微调，取消表格边框即可
⑦滚动标签文字从右往左滚动
< marquee direction=“left/right/top/down” height=“高度” widht=“宽度” scrollamout=“数字速度” behavior=“scroll/slide/alternate” loop=“-1/滚动次数”> 滚动的文字或图片等等 < /marquee>
direction=left/right，left设置文字往左滚动，right设置文字往右滚动
behavior="scroll/slide/alternate，scroll滚动，slide滚动一次就停，alternate来回滚动
loop=“-1/滚动次数” -1代表无限滚动
事件：
οnmοuseοver=“this.stop()” 鼠标放上去就停
οnmοuseοut=“this.start()” 鼠标离开就开始
相对路径说明：
…代表上一级路径，目前在03，…就回到项目上面了，…/02就能找到02文件夹了
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<marquee direction="right" scrollamount="20" behavior="scroll" loop="2">
滚动的文字
marquee>
<hr />
<marquee direction="right" scrollamount="30" onmouseover="this.stop()" onmouseout="this.start()">
<img src="../02/image/3.jpg"/>
marquee>
body>
html>
进度条
< meter value=“” min=“” max=“”>< /meter>
< progress value=“”>< /progress>
<body>
<meter value="20" min="0" max="100" >meter> <br/>
<progress value="20" max="100">progress>
body>
中文注释
< ruby>
文字< rt>注释的问题< /rt> < rp>如果浏览器不支持ruby时显示的文字< /rp>
< /ruby>
⑧折叠标签< details>
< summary> 折叠的标题内容 < /summary>
…(被折叠的内容，可以放置任意标签和内容)
< /details>
<details>
<summary>三国演义summary>
<p>蜀国刘关张桃园三结义p>
<p>魏国曹 *** p>
details>
< header> 布局的头部标签 < /header>
< article> 布局的侧边标签 < /article>
< section> 布局的中心标签 < /section>
< footer> 布局的底部标签 < /footer>
< div> 块标签，默认换行< /div>
< span> 行内标签，默认不换行 < /span>
三、表单
表单是以后用来专门收集数据的标签集合。俗称 form表单.
格式：
< from action=“提交的url路径” method=“get/post” name=“名称” enctype=“multipart/form-data”>
< input type=“text/radio/checkbox/password/tel/url/email/search/bottom/file/number/date/datetime_local/color/range/hidden/submit/reset/image” name=“名称” value=“值” placeholder=“提示语句” />
< select name=“名称” multiple>
< option> 列表项< /option>
< option selected value=“值”> 列表项< /option>
…
< /select>
< textarea name=“名称” cols=“” row=“”> 值 < /textarea>
< /form>
enctype="multipart/form-data"是用来上传的
name，提交数据都是通过name，name是键value是值，通过键值对的形式提交
type:
text：输入框
radio：单选按钮，名字要相同，这样两个单选框才是一组，checked，默认选中
number：数字输入框，只能输入数字
checkbox：多选按钮，名字相同的为一组
range：进度条
date：进行日期选择
file：文件上传
search：搜索框
select：下拉框列表，嵌套选项，multiple属性，显示选项
textarea ：多行输入框，通过设置行跟列的宽度来设置大小
submit：用来提交数据
reset：重置，清除表单中的数据
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<form action="提交表单的url路径" method="表单的提交方式(get/post)" name="表单的名称"
enctype="multipart/form-data">
姓名：<input type="text" name="name" value="李四" placeholder="请输入用户名"><br/>
性别：<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女 <br/>
密码：<input type="password" name="pwd" placeholder="请输入密码" ><br/>
主页：<input type="url" placeholder="请输入网址"><br/>
邮箱: <input type="email" placeholder="请输入邮箱"><br/>
电话：<input type="tel" placeholder="请输入电话号"><br>
按钮：<input type="button" value="点击触发"><br/>
年龄 ：<input type="number" ><br/>
爱好: <input type="checkbox" name="hobby" value="蓝球">蓝球
<input type="checkbox" name="hobby" value="足球" checked>足球
<input type="checkbox" name="hobby" value="排球">排球<br/>
颜色：<input type="color"><br/>
进度条： <input type="range" value="20"><br/>
出生日期： <input type="date" placeholder="请选择日期"><br/>
时间： <input type="datetime-local"><br/><br>
时间 : <input type="time" > <br/>
文件上传： <input type="file"><br/>
隐藏标签: <input type="hidden"><br/>
搜索： <input type="search"> <br/>
省份：
<select name="省份" multiple>
<option>河南省option>
<option>河北省option>
<option>广西省option>
<option selected>湖北省option>
select> <br/>
备注：
<textarea cols="20" rows="8">textarea> <br/> <br/>
<input type="submit" value="注册">
<input type="reset" value="重置">
<br/>
<input type="image" src="img/tj.png">
form>
body>
html>
案例1：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<h2>用户自主服务申请表单h2>
<form action="#" method="get">
手机号码：<input type="tel" placeholder="请填写真实手机号"/><br>
企业姓名：<input type="text" placeholder="请填写真实企业"/><br>
企业类型：<select name="企业类型">
<option>民营企业option>
<option>国企option>
<option>私企option>
select><br>
行业类型：<select name="行业类型">
<option>农林牧渔option>
<option>金融option>
<option>IToption>
select><br>
年营业额：<select name="年营业额">
<option>10万-50万option>
<option>50万-100万option>
<option>100万-500万option>
select><br>
员工数量：<select name="员工数量">
<option>0-10option>
<option>10-50option>
<option>50以上option>
select><br>
你的身份：<input type="checkbox" name="shenfen" value="个人"/>个人
<input type="checkbox" name="shenfen" value="厂商" />厂商
<input type="checkbox" name="shenfen" value="代理商" />代理商
<input type="checkbox" name="shenfen" value="其他" />其他
<br />
<input type="submit" value="快速提交" />
<input type="reset" value="一键取消" />
form>
body>
html>
案例2：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<form method="get" action="#">
<table border="1" width="300">
<caption>新用户信息注册caption>
<tr>
<td>用户名td>
<td> <input type="text" placeholder="请输入账号"> td>
tr>
<tr>
<td>密码td>
<td> <input type="password" placeholder="请输入密码"> td>
tr>
<tr>
<td>Emailtd>
<td> <input type="email" placeholder="请输入邮箱"> td>
tr>
<tr>
<td>姓名td>
<td> <input type="text" placeholder="请输入姓名"> td>
tr>
<tr>
<td>手机号td>
<td> <input type="text" placeholder="请输入手机号"> td>
tr>
<tr>
<td>性别td>
<td>
<input type="radio" name="sex" checked> 男
<input type="radio" name="sex" > 女
td>
tr>
<tr>
<td>出生日期td>
<td> <input type="date" > td>
tr>
<tr>
<td>验证码td>
<td> <input type="text" placeholder="请输入验证码"> td>
tr>
<tr>
<td colspan="2" align="center"> <input type="submit" value="注册"> td>
tr>
table>
form>
body>
html>
框架： iframe其本质上就是在当前的页面中重新开辟一个空间，可以用来放置另一个页面。
iframe中可以用来放置页面，视频，音频，图片等等。
案例：
当点击下面超链接时，内容会显示到框里面
超链接的target和iframe的name对应即可
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<iframe name="if" width="1000" height="500">iframe>
<br/>
<a href="https://www.bilibili.com" target="if">哔哩哔哩a>
<a href="https://www.taobao.com" target="if">淘宝a>
body>
html>
案例2：
照片墙展示，下方图片滚动，点击后显示到上方的大框内
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<table border="1" width="600" align="center">
<tr height="350">
<td>
<iframe src="img/01.png" name="sh" scrolling="no" frameborder="0" width="600" height="350">iframe>
td>
tr>
<tr height="100">
<td>
<marquee onmouseover="this.stop()" onmouseout="this.start()">
<a href="img/01.png" target="sh"><img src="img/01.png" width="150" height="88">a>
<a href="img/02.jpg" target="sh"><img src="img/02.jpg" width="150" height="88">a>
<a href="img/03.jpg" target="sh"><img src="img/03.jpg" width="150" height="88">a>
<a href="img/04.jpg" target="sh"><img src="img/04.jpg" width="150" height="88">a>
<a href="img/05.jpg" target="sh"><img src="img/05.jpg" width="150" height="88">a>
<a href="img/06.jpg" target="sh"><img src="img/06.jpg" width="150" height="88">a>
marquee>
td>
tr>
table>
body>
html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）