前言:此笔记根据狂神哔哩哔哩视频所写,转载请自觉注明出处
点击跳转狂神哔哩哔哩
第二阶段
HTML详解
什么是HTML
- HTML
- Hyper Text Markup Language(超文本标记语言)
- 超文本包括:文字、图片、音频、视频、动画等
一个网站通过需要通过浏览器来访问,而浏览器访问的是什么呢?访问的就是HTML
</head>
<boday>
<h3>Hello HTML</h3> # 文字
<img src="../1.jpg"/> # 照片
<hr/>
<video scr="../v.swf"></video> # 视频
</boday>
</html>
HTML发展史
HTML5的优势
- 世界知名浏览器厂商对HTML5的支持
- 微软
- 苹果
- Opera
- Mozilla
- 市场的需求
- 跨平台
W3C标准
- W3C
- World Wide Web Consortium(万维网联盟)
- 成立于1994年,Web技术领域最权威和具影响力的国际中立性技术标准机构
- http://www.w3.org/
- http://www.chiniaw3c.org/
- W3C标准包括
- 结构化标准语言(HTML、XML)
- 表现标准语言(CSS)
- 行为标准(DOM、ECMAScript)
常见的IDE
- 记事本
- Dreamweaver
- IDEA
- WebStorm
- …
HTML基本结构
网页的基本设置
-
DOCTPE声明
-
< title >标签
-
标签
<!-- 告诉浏览器,我们要使用是么规范 -->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--mate描述性标签,它来描述我们网站的一些信息-->
<!--mate一般用来做SEO-->
<meta charset="UTF-8">
<!--title网页标签-->
<title>Title</title>
</head>
<!--body标签代表网页主体-->
<body>
Hello,world!
</body>
</html>
网页基本标签
- 标题标签
- 段落标签
- 换行标签
- 水平标签
- 字体样式标签
- 注释和特殊符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--段落标签-->
<p>跑得快 跑得快</p>
<p>一只没有耳朵 一只没有尾巴</p>
<p>真奇怪 真奇怪</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
跑得快 跑得快<br/>
一只没有耳朵 一只没有尾巴<br/>
真奇怪 真奇怪<br/>
<!--粗体,斜体-->
<h1>字体样式标签</h1>
粗体: <strong>i love you</strong>
<br/>
斜体:<em>i love you</em>>
<br/>
<!--特殊符号-->
空 格
<br/>
空 格
<br/>
>
<br/>
<
<br/>
©版权所有狂神
<!--
空格
大于号
小于号
版权符号
特殊符号的记忆方式
& ;
百度搜索
-->
</body>
</html>
图像标签
-
常见的图像格式
- JGP
- GIF
- PNG
- BMP
- …
<img scr="path" alt="text" title="text" width="x" height="y"/> <!-- scr:图像地址 alt:图像的代替文字 title: 鼠标悬停提示文字 width:图像宽度 height:图像高度 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签学习</title>
</head>
<body>
<!--img学习
src :图片地址
相对地址(推荐使用),绝对地址
../ 上一级目录
alt : 图片名字(必填)
-->
<img src="../resources/images/1.jpg" alt=" 飞机" title="悬停文字 " width="519" height="385">
</body>
</html>
链接标签
<a href="path" target="目标窗口位置">链接或图像</a>
<!--
href : 连接路径
target : 链接在那个窗口打开
目标窗口位置 : 常用值:——self、—blank
-->
- 文本超链接
- 图像超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接学习</title>
</head>
<body>
<!--a标签
href : 必填 ,表示要跳转到那个页面
target : 表示窗口在哪里打开
_blank : 在新标签中打开
_self : 在自己的网页打开
-->
<a href="1.我的第一个网页.html" target="_blank"> 点击我跳转页面一</a>>
<a href="https://www.baidu.com" target="_self"> 点击我跳转到百度</a>>
<br/>
<a href about="1.我的第一个网页.html" target="_self ">
<img src="../resources/images/1.jpg" alt=" 飞机" title="悬停文字 " width="519" height="385">
</a>>
</body>
</html>
超链接
- 页面间链接
- 锚链接
- 功能性连接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接学习</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top">顶部</a>>
<!--a标签
href : 必填 ,表示要跳转到那个页面
target : 表示窗口在哪里打开
_blank : 在新标签中打开
_self : 在自己的网页打开
-->
<a href="1.我的第一个网页.html" target="_blank"> 点击我跳转页面一</a>>
<a href="https://www.baidu.com" target="_self"> 点击我跳转到百度</a>>
<br/>
<a href about="1.我的第一个网页.html" target="_self ">
<img src="../resources/images/1.jpg" alt=" 飞机" title="悬停文字 " width="519" height="385">
</a>>
<!--锚链接
1,需要一个锚标志
2. 跳转到到标记
-->
<a href="#top"> 回到顶部</a>>
<a name="down">down</a>>
<!--功能性链接
邮件链接 : mailto
QQ链接
-->
<a href="mailto:3142108769@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::52" alt="欢迎加入我的人生" title="欢迎加入我的人生"/>
</a>
</body>
</html>
行内元素和块元素
- 块元素
- 无论内容多少,该元素独占一行
- (p、h1-h6…)
- 行内元素
- 内容撑开宽度,左右都是行内元素的可以排在一起
- (a.strong.em)
列表
- 什么是列表
- 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快更快捷地获得相应的信息
- 列表的分类
- 无序列表
- 有序列表
- 自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表学习</title>
</head>
<body>
<!--有序列表
应用范围 : 试卷,问答...
-->
<ol>
<li>Java</li>
<li>Python</li>
<li>运维</li>
<li>前段</li>
<li>C/C++</li>
</ol>
<!--无序列表
应用范围 :导航,侧边栏
-->
<ul>
<li>天才</li>
<li>大佬</li>
<li>黑客</li>
<li>凡人</li>
<li>疯子</li>
</ul>
<!--自定义列表
dl : 标签
dt :列表名称
dd : 列表内容
-->
<dl>
<dt>学科</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>Linux<dt>
<dd>C</dd>
<dt>兴趣</dt>
<dd>打太极</dd>
<dd>登山</dd>
<dd>游泳<dt>
<dd>跳舞</dd>
</dl>
</body>
</html>
表格
- 为什么是使用表格
- 简单通用
- 结构稳定
- 基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列
姓名 | 年龄 | 爱好 |
---|---|---|
疯子 | 60 | Python |
天才 | 3 | Java |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格学习</title>
</head>
<body>
<!--表格table
行 tr rows
列 td
-->
<table border="lpx">
<tr>
<td>学生成绩</td>
</tr>
<tr>
<!--
rowspan 跨行
colspan 跨列
-->
<td rowspan="2">狂神</td>
<td>语文</td>
<td>120</td>
</tr>
<tr>
<td>数学</td>
<td>140</td>
</tr>
<tr>
<td rowspan="2">游翔</td>
<td>语文</td>
<td>120</td>
</tr>
<tr>
<td>数学</td>
<td>140</td>
</tr>
</table>
</body>
</html>
视频和音频
- 视频元素
- video
- 音频元素
- audio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素学习</title>
</head>
<body>
<!--音频和视频
src : 资源路径
controls : 控制条
autoplay :自动播放
-->
<!--<video src="../resources/video/阿离.mp4" controls autoplay></video>-->
<audio src="../resources/audio/诺言.mp3 controls autoplay"></audio>
</body>
</html>
页面结构分析
元素名 | 描述 |
---|---|
header | 标题头部区域的内容(用于页面或者页面中的一块区域) |
footer | 标记脚部区域的内容(用于整个页面或页面的一块区域) |
section | Web页面中的一块独立区域 |
article | 独立的文章内容 |
aside | 内容相关或应用(常用于侧边栏) |
nav | 导航类辅助内容 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构分析</title>
</head>
<body>
<head>
<h2>网页头部</h2>
</head>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
</body>
</html>
iframe内联框架
<iframe scr="path" name="mainFrame"></iframe>
path : 应用页面地址
mainFrame : 框架标识名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe</title>
</head>
<body>
<iframe src="https://www.baidu.com" name="hello" frameborder="0" width="600" height="400">点击跳转百度</iframe>
<a href="https://mp.csdn.net/console/home" target="hello">点击跳转</a>
<!--<iframe src="//player.bilibili.com/player.html?aid=840034966&bvid=BV1S54y1R7SB&cid=171979312&page=26"
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>-->
</body>
</html>
表单语法
<form method="post" action="result.html">
<p> 名字:<input name="name"type="text0"></p>
<p> 密码:<input name="pass"type="password"></p>
<p>
<input type="submit"name="Button" value="提交"/>
<input type="rest"name="Reset" value="重填"/>
</p>
</form>
post : 规定如何发送表单数据 常用值:get|post
resut.html : 表示向何处发送表单数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<!--表达from
action : 表单提交的位置,可以是网站,亦可以是请求处理地址
method ; post,get 提交方式
get方式提交:我们可以在url中看到我们的提交信息,不安全,高效
post : 比较安全, 传输大文件
-->
<from action="1.我的第一个网页.html" method="get">
<!--文本框输入 : <input type="text"
value="狂神好帅" maxlength="8" size="30"-->
<P>名字 : <input type="text" name="username" ></P>
<!--密码框 : <input type="password"-->
<P>密码 : <input type="password" name="pwd"></P>
<!--单选框标签
input type="radio"
value : 单选框的值
name : 表示组
-->
<p>性别 :
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!--多选框
input type="checkbox"
checked 默认选项
-->
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" checked name="hobby">敲代码
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戏
<!--按钮 :
-->
<p>
<input type="button" name="btn" value="点击变长" >
<!-- <input type="image" src="../resources/images/1.jpg" >-->
</p>
<!--下拉框,列表框
下拉框 :option value="china"
selected :默认选项
-->
<p>国家 :
<select name="列表名称" >
<option value="china">中国</option>
<option value="us">英国</option>
<option value="eth" selected>瑞士</option>
<option value="India">印度</option>
</select>
</p>
<!--文本域 textarea
cols="30" rows="10"
-->
<p>反馈 :
<textarea name="textarea" cols="30" rows="10"></textarea>
</p>
<!--文件域
input type="file" name="files"
-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<!--邮件验证
-->
<p>邮箱 :
<input type="email" name="emil">
</p>
<!--URL
-->
<p>URL :
<input type="URL" name="URL">
</p>
<!--数字
-->
<p>商品数量 :
<input type="number" name="num" min="0" max="100" step="1">
</p>
<!--滑块
input type="range"
-->
<p>音量 :
<input type="range" name="voice" min="0" max="60" step="1">
</p>
<!--搜索框
input type="search"
-->
<p>搜索 :
<input type="search" name="search">
</p>
<!--增强鼠标可用性-->
<p>
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</from>
</body>
</html>
表单元素格式
属性 | 说明 |
---|---|
type | 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button,默认为text |
name | 指定表单元素的名称 |
value | 元素的初始值。type为radio时必须制定一个值 |
size | 指定表单元素的初始宽度。当type为text或password时,表单元素的大小以字符为单位。对于其他类型的1,宽度以像素为单位 |
maxlength | type为text或password时,输入最大的字符数 |
checked | type为radio或checkbox时,指定按钮是否被选中 |
表单的应用
- 隐藏域 hidden
- 只读 raedonly
- 禁用 disabled
表单的初级验证
- 思考?为什么要进行表单验证 //减轻服务器的负担
- 常用方式
- placeholder 提示信息
- required 非空判断
- pattern 正则表达式