HTML5简单学习!
1.初识HTML
HTML:Hyper Text Markup Language(超文本标记语言)
前端现在主流HTML5+CSS3
优势
- 所有浏览器都支持
- 市场的需求
- 跨平台
W3C标准(万维网联盟)
W3C标准包括
- 结构化标准语言(HTML,XML)
- 表现标准语言(CSS)
- 行为标准(DOM,ECMAScript)
HTML基本结构
2.网页基本信息
DOCTYPE声明:告诉浏览器,我要使用什么规范。(默认是html)
head:head标签表示网页头部
meta:meta描述性标签,它用来描述我们网站的一些信息,一般用来做SEO
title:title标签表示网页标题
boby:body标签表示网页主体
代码示例
<!--DOCTYPE告诉浏览器,我要使用什么规范。(默认是html)-->
<!DOCTYPE html>
<html lang="en">
<!--head标签表示网页头部-->
<head>
<!--meta描述性标签,它用来描述我们网站的一些信息,一般用来做SEO-->
<meta charset="UTF-8">
<meta name="keywords" content="狂神说java">
<!--title标签表示网页标题-->
<title>我的第一个网页</title>
</head>
<!--body标签表示网页主体-->
<body>
hello world!
</body>
</html>
3.网页的基本标签
-
标题标签:
<!--标题标签 h表示--> <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5>
-
段落标签:
<!--段落标签和换行标签区别:1.行间距不同,段落标签行间距更大,2.换行标签还是一段--> <!--段落标签 p表示--> <p>从前从前有个人爱你很久,</p> <p>但偏偏风渐渐把距离吹得好远,</p> <p>好不容易又能再多爱一天,</p> <p>但故事的最后你好像还是说了拜拜。</p> <p>——《晴天》</p>
-
换行标签:
<!--换行标签 br/是(一个自闭和标签)只有一个字母br--> 从前从前有个人爱你很久,<br/> 但偏偏风渐渐把距离吹得好远,<br/> 好不容易又能再多爱一天,<br/> 但故事的最后你好像还是说了拜拜。<br/> ——《晴天》<br/>
-
水平标签:
<!--水平标签 hr表示--> <hr/>
-
字体样式标签:
<!--粗体strong表示,斜体em表示--> <h1>字体样式</h1> 粗体:<strong>好好学习!</strong> 斜体:<em>天天向上!</em>
-
注释和特殊符号:
<!--特殊符号--> 比如: 空格 空格如果在HTML中不用 那么多个空格只能表示一个空格 <br> 大于号:> <br> 小于号:< <br> 版权符号:©
4.图像标签
常见的图像格式:JPG,GIF,PNG,BMP…
格式:
- Src:表示图像地址(相对地址(常用 …/ – 表示上一级目录, 绝对地址)
- alt:图像的替代文字(没有加载或者错误显示的文字 必填)
- title:鼠标悬停提示文字
- width:图像宽度
- height:图像高度
代码举例:
<img src="../resource/image/1.png" alt="图像" title="悬停文字" width="300" height="300">
5.超链接标签
页面间标签: 从一个页面链接到另一个页面
-
文本链接和图像链接
<!--a标签 href:必填,表示要跳转到哪个页面 target:表示窗口在哪里打开 ( _blank:表示在新页面中打开 _self:默认在本页面打开) --> <a href="http://www.baidu.com" target="_blank">点击我跳转到百度</a> <a href="3.图像标签.html"><img src="../resource/image/1.png" alt="图像" title="悬停文字" width="300" height="300"></a>
锚标签: 起到定位的作用
<!--锚链接的标记 name-->
<a name="top">顶部</a>
<!--锚链接 起到定位的作用
1.需要一个锚标记
2.跳转到标记用#加标记
3.可以在本页面跳转也可以不同页面间跳转
-->
<a href="#top">回到顶部</a>
功能性标签:
邮件链接:mailto
<a href="mailto:24736743@qq.com">点击联系狂神说</a>
行内元素和块元素:
行内元素:内容撑开宽度,左右都是行内元素的可以并排在一行如(a, strong , em…等)
块标签:无论内容多少,该元素独占一行如(p, h1-h6…等)
6.列表标签
列表: 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷地获得相应的信息
列表的分类:
- 无序列表:ul标签 子列表:li标签
<!--无序列表ul表示-->
<ul>
<li>Java</li>
<li>前端</li>
<li>运维</li>
<li>C</li>
<li>C++</li>
</ul>
- 有序列表:ol标签 子列表:li标签
<!--有序列表ol表示-->
<ol>
<li>Java</li>
<li>前端</li>
<li>运维</li>
<li>C</li>
<li>C++</li>
</ol>
-
定义列表:dl标签 列表名称:dt标签 子列表:dd标签
<!--自定义列表--> <dl> <dt>学科</dt> <dd>java</dd> <dd>前端</dd> <dd>C</dd> <dd>C++</dd> </dl>
7.表格标签
表格优点: 简单通用 结构稳定
基本结构:table
- 单元格
- 行:tr标签
- 列:td标签
- 跨列:colspan关键字 colspan = “4”表示跨4列
- 跨行:rowspan关键字 rowspan = “4”表示跨4行
<table border="1px">
<tr>
<td colspan="4">学生成绩</td>
</tr>
<tr>
<td rowspan="2">姓名</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
</tr>
<tr>
<td>81</td>
<td>100</td>
<td>60</td>
</tr>
</table>
8.媒体元素
视频元素: video标签
音频元素: audio标签
<!--视频和音频
src:资源路径
controls:控制条
autoplay:自动播放
-->
<video src="../resource/video/视频.mp4" controls autoplay></video>
<audio src="../resource/audio/音频.mp3" controls autoplay></audio>
9.页面结构分析
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页底部</h2>
</footer>
10.iframe内联框架
作用: 在页面中再打开一个页面
格式:
<!--iframe内联框架
src:地址
width:宽度
height:高度
-->
<iframe src="" name="hello" frameborder="0" width="1000px" height="1000px"></iframe>
<a href="https://www.baidu.com" target="hello" >点击跳转百度</a>
11.初识表单
表单form标签:
- action:表单提交的位置,可以是网站,也可以是一个请求处理的地址
- method:post,get方式
- get方式提交,我们可以在url中看到我们提交的信息,不安全,高效
- post方式提交,比较安全,可以传输大文件
<h2>登入</h2>
<form action="1.我的第一个网页.html" method="post">
<!--文本输入框:input type="text"-->
<p>名字:<input type="text" name="username"></p>
<!--密码框:input type="password"-->
<p>密码:<input type="password" name="password"></p>
<p>
<!--提交框-->
<input type="submit">
<!--重置框-->
<input type="reset">
</p>
</form>
表单元素格式:
<form action="1.我的第一个网页.html" method="post">
<!--文本输入框:input type="text
value="root" 默认初始值
maxlength="8" 输入的最大长度
size="30" 文本框的长度
-->
<p>名字:<input type="text" name="username" ></p>
<!--密码框:input type="password"-->
<p>密码:<input type="password" name="password"></p>
<!--单选框标签
input type="radio"
value:单选框的值
name:表示组,单选框一个组只能选一个
checked:默认选中值
-->
<p>
性别:
<input type="radio" value="男" name="sex">男
<input type="radio" value="女" name="sex">女
</p>
<!--多选框标签
input type="checkbox"
value:选框的值
name:表示组,多选框一个组可以选多个
checked:默认选中值
-->
<p>
爱好:
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="game" name="hobby">打游戏
<input type="checkbox" value="movie" name="hobby">看电影
</p>
<!--按钮
input type="submit" 提交按钮
input type="reset" 重置按钮
input type="button" 普通按钮
input type="image" 图像按钮
-->
<p>
按钮:
<input type="button" name="btn" value="点击">
<input type="image" src="../resource/image/1.png">
</p>
<p>
<!--提交-->
<input type="submit">
<!--重置-->
<input type="reset">
</p>
</form>
一些简单验证:
- 邮箱验证:input type=“email” name=“email”
- 网址验证URL:input type=“url” name=“url”
- 数字验证:input type=“number” name=“num” max=“100” min=“1” step="1"表示增量
<!-- 邮箱验证-->
<p>邮箱:<input type="email" name="email"></p>
<!-- 网址验证URL-->
<p>网址:<input type="url" name="url"></p>
<!-- 数字验证-->
<p>数量:<input type="number" name="num" max="100" min="1" step="1"></p>
<!-- 滑块-->
<p>音量<input type="range" name="range" max="100" min="0" step="2"></p>
搜索框:
下拉框和列表框
下拉框: select标签 选项:option标签 默认选中:selected标签
<!-- 下拉框,列表框-->
<p>
国家:
<select name="列表名称" id="1">
<option value="China">中国</option>
<option value="Us" selected>美国</option>
<option value="Uk">英国</option>
</select>
</p>
文本域: textarea标签 行:rows标签 列:cols标签
<!-- 文本域-->
<p>
反馈:
<textarea name="textarea" id="" cols="30" rows="10">请输入内容:</textarea>
</p>
文件域: 选中文件:input type=“file” name=“files”
<!-- 文件域-->
<p>
<input type="file" name="files">
<input type="button" name="btn" value="upload">
</p>
简单验证和搜索框
一些简单验证:
- 邮箱验证:input type=“email” name=“email”
- 网址验证URL:input type=“url” name=“url”
- 数字验证:input type=“number” name=“num” max=“100” min=“1” step="1"表示增量
<!-- 邮箱验证-->
<p>邮箱:<input type="email" name="email"></p>
<!-- 网址验证URL-->
<p>网址:<input type="url" name="url"></p>
<!-- 数字验证-->
<p>数量:<input type="number" name="num" max="100" min="1" step="1"></p>
<!-- 滑块-->
<p>音量<input type="range" name="range" max="100" min="0" step="2"></p>
搜索框: input type=“search” name=“search”
<!--搜索框-->
<p>搜索:<input type="search" name="search"></p>
增强鼠标可用性: label标签 id=“mark”表示标记让for去指向
<!--label标签-->
<p>
<label for="mark"> 点击到文本框:</label>
<input type="text" id="mark" name="text">
</p>
12.表单的应用
一些字的功能:
- 隐藏域 :hidden字
- 只读:readonly字
- 禁用:disabled字
表单的初级验证:
常用方式:
- placeholder:给文本框一些提示信息
<p>名字:<input type="text" name="username" placeholder="请输入用户名" ></p>
- required:文本框非空判断
<p>密码:<input type="password" name="password" required></p>
- pattern:正则表达式 需要查正则表达式表
<!-- 正则表达式验证-->
<p>
自定义邮箱验证:
<input type="text" name="diymail"
pattern="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
</p>
总结
本次学习视频来自B站狂神说: