HTML
HTML
Hyper Text Markup Language(超文本标记语言)
优势：
- 世界知名的浏览器都对HTML5支持
- 市场的需求
- 跨平台
W3C标准
W3C ：World Wide Web Consortium（万维网联盟）成立于1994年，时web领域最权威和具有影响力的国际 中立性技术标准机构
- http://www.w3.org/
- http://www.chinaw3c.org/
W3C标准包括
- 结构化标准语言（HTML、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript）
<!--<!DOCTYPE html>:告诉浏览器，我们使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<head>
<!--head头部标签-->
<!-- meta 描述性标签，他用来描述我们网站的一些信息-->
<meta charset="UTF-8">
<!-- 网页标题-->
<title>Title</title>
</head>
<body>
<!--body主体标签-->
</body>
</html>
网页基本标签
- 标题标签 h1-h6
- 段落标签p
- 换行标签br
- 水平线标签hr
- 字体样式标签strong em
- 注释和特殊符号 ；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<!--段落标签-->
<p>两只老虎，两只老虎，</p>
<p>跑得快，跑得快，</p>
<p>一只没有眼睛，</p>
<p>一只没有尾巴，</p>
<p>真奇怪！真奇怪！</p>
<p>两只老虎，两只老虎，</p>
<p>跑得快，跑得快，</p>
<p>一只没有耳朵，</p>
<p>一只没有尾巴，</p>
<p>真奇怪！真奇怪！</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
一只没有尾巴，<br/>
真奇怪！真奇怪<br/>
两只老虎，两只<br/>
跑得快，跑得快<br/>
一只没有耳朵，<br/>
一只没有尾巴，<br/>
真奇怪！真奇怪<br/>
<hr/>
<!--字体样式标签-->
<h1>字体样式标签</h1>
粗体：<strong>你好</strong><br/>
<br/>
斜体：<em>你好</em>
<br/>
<hr/>
<!--特殊符号-->
空 格：你 好
<br/>
大于：>
<br/>
小于：<
<br/>
版权：©
&g
</body>
</html>
图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<!--scr :图片路径 (必填)使用方法：
··/表示上一级
相对路径··/resource/image
alt：（必填）图片加载失败会显示的内容
title：鼠标悬停在图片上显示的东西-->
><
<img src="../resource/image/1.png" alt="头像" title="这是my头像" width="300" height="300"></body>
</html>
链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body>
<!--a标签学习
href：（必填）表示要跳转的页面
target:表示窗口在哪打开
_blank：在新页面打开
_self: 在默认页面打开，就是原来的窗口打开
-->
<!--使用name作为标记-->
<a name="top">顶部</a>
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面1</a>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>
<br/>
<a href="https://www.baidu.com"><img src="../resource/image/1.png" alt="图片显示失败"></a>
<p>
<br/>
<a href="https://www.baidu.com"><img src="../resource/image/1.png" alt="图片显示失败"></a>
</p><p>
<br/>
<a href="https://www.baidu.com"><img src="../resource/image/1.png" alt="图片显示失败"></a>
</p><p>
<br/>
<a href="https://www.baidu.com"><img src="../resource/image/1.png" alt="图片显示失败"></a>
</p><p>
<br/>
<a href="https://www.baidu.com"><img src="../resource/image/1.png" alt="图片显示失败"></a>
</p><p>
<br/>
<a href="https://www.baidu.com"><img src="../resource/image/1.png" alt="图片显示失败"></a>
</p><p>
<br/>
<a href="https://www.baidu.com"><img src="../resource/image/1.png" alt="图片显示失败"></a>
</p><p>
<br/>
<a href="https://www.baidu.com"><img src="../resource/image/1.png" alt="图片显示失败"></a>
</p>
<!--锚链接
1.需要一个标记
2.通过#+name跳到标记位
可以跳到另一个页面的锚链接标记位上
-->
<a href="#top">回到顶部</a>
<br/>
<!--功能性链接
邮件链接：mailto:
QQ链接：
-->
<a href="mailto:2858048735@qq.com">点击联系我</a>
<a target="_blank"
href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="联系客服" title="联系客服"/>
</a>
</body>
</html>
块元素和行内元素
块元素
- 无论内容多少，该元素独占一行
- (p,h1-h6)
行内元素
- 内容撑开宽度，左右都是行内元素可以在排在一行
- (a.strong.em···)
列表标签
列表分类
- 无序列表 ol
- 有序列表ul
- 定义列表dldtdd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 列表学习</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ol>
<hr/>
<!--无序列表-->
<ul>
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ul>
<hr/>
<!--自定义列表
dt列表名称
d列表的内容
一般应用网站底部
-->
<dl>
<dt>学科</dt>
<dd>语文</dd>
<dd>数学</dd>
<dd>英语</dd>
<dt>位置</dt>
<dd>重庆</dd>
<dd>武汉</dd>
<dd>泉州</dd>
</dl>
</body>
</html>
表格
为什么使用表格
- 简单通用
- 结构稳定
基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格学习</title>
</head>
<body>
<!--
表格table
行 tr
列 td
border:添加边框
-->
<table border="1px">
<tr>
<!-- colspan:跨列 -->
<td colspan="3" style="text-align:center">语文</td>
</tr>
<tr>
<!-- rowspan:跨行 -->
<td rowspan="2">语文</td>
<td>数学</td>
<td>英语</td>
</tr>
<tr>
<td>数学</td>
<td>英语</td>
</tr>
</table>
</body>
</html>
视频和音频
视频元素
- video
音频元素
- audio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视频和音频</title>
</head>
<body>
<!--
controls:控制播放 没有这个视频无法播放 autoplay：是设置打开网页自动播放视频
-->
<video src="../resource/video/QQ视频20191226234311.mp4" controls width="500"height="300" autoplay></video>
<audio src="../resource/audio/00.mp3"controls autoplay></audio>
</body>
</html>
页面结构分析
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-28tZSQKL-1613899196516)(D:\date img\QQ截图20210221130206.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构</title>
</head>
<body>
<header><h2>网页头部</h2></header>
<section><h2>网页主体</h2></section>
<footer><h2>网页脚部</h2></footer>
</body>
</html>
iframe内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架</title>
</head>
<body>
<iframe src="https://www.baidu.com" frameborder="0" width="1000"height="800"></iframe>
<!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"-->
<!-- scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> -->
<!--</iframe>-->
</body>
</html>
表单（重点）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jL82OU3o-1613899196520)(D:\date img\QQ截图20210221163606.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习表单---登录注册</title>
</head>
<body>
<h1>---------注册---------</h1>
<!--表单注册form
action:表单提交的位子，可以是网站，也可以是请求处理地址
method:get/post get 是显示提交信息,不安全，但是高效 post是隐藏提交信息，比较安全，可以传输大文件-->
<form action="1.我的第一个网页.html"method="get">
<!-- input type="text"文本输入框
password:密码输入框
value="请输入账号"maxlength="8"size="30"
value：初始默认值
maxlength:表示文本框最大输入内容位几位
size：文本框的长度
readonly:只读，不允许修改
hidden:隐藏密码框
-->
<p>账户 <input type="text" name="username"value="admin"readonly></p>
<p>密码 <input type="password"name="pwd" hidden></p>
<!-- 单选框标签
radio：单选，必须设置value值，将选项都放在一个组里，所以名字相同就是在同一个组
checked:默认选中
disabled:不能选择这个选项
-->
<p>性别：
<input type="radio"value="boy"name="sex"checked>男
<input type="radio"value="girl"name="sex"disabled>女
</p>
<!-- 多选框标签
checkbox：多选
同样也要相同的名字，为一个组
checked:默认选中
-->
<p>
爱好
<input type="checkbox"value="sleep" name="hobby">睡觉
<input type="checkbox"value="code" name="hobby"checked>敲代码
<input type="checkbox"value="chat" name="hobby">聊天
<input type="checkbox"value="game" name="hobby">游戏
</p>
<!-- 按钮-->
<p>按钮
<input type="button"name="but1"value="确定">
<!-- <input type="image"src="../resource/image/1.png">-->
<!-- 图片按钮会自动提交-->
</p>
<!-- 下拉框
selected:默认选中-->
<p>下拉框
<select name="列表名称" >
<option value="选项的值">中国</option>
<option value="选项的值">美国</option>
<option value="选项的值"selected>瑞士</option>
<option value="选项的值">印度</option>
</select>
</p>
<p>
<!-- 文本域
cols="30" rows="10"：行与列-->
反馈：
<textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
</p>
<!-- 文件域-->
<p>
<input type="file"name="files">
</p>
<!-- 验证-->
<p>邮箱验证
<input type="email"name="email">
</p>
<p>URL验证
<input type="url"name="url">
</p>
<p>数字验证
<input type="number"name="num"max="100"min="10"step="10">
</p>
<!-- 滑块-->
<p>滑块
<input type="range"name="voice"min="0"max="100"step="10">
</p>
<!-- 搜索框-->
<p>
搜索
<input type="search"name="search">
</p>
<!-- 增强鼠标可用性-->
<p>
<label for="make">点我</label>
<input type="text"id="make">
</p>
<p>
<!--submit : 提交-->
<input type="submit">
<!--reset : 重置，清空-->
<input type="reset">
</p>
</form>
</body>
</html>
表单初级验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单初级验证</title>
</head>
<body>
<!--
placeholder：提示信息
required：不能为空 必填项目
-->
<form action="1.我的第一个网页.html"method="get">
<p>账户 <input type="text" name="username"placeholder="请输入账号"required></p>
<p>密码 <input type="password"name="pwd"required></p>
<!--正则表达式-->
<p>自定义邮箱
<input type="text"name="diyemail"pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>
<p>
<!--submit : 提交-->
<input type="submit">
<!--reset : 重置，清空-->
<input type="reset">
</p>
</form>
</body>
</html>
103
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
