简单学习前端HTML5!
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站狂神说:
- 从零开始前端学习[4]:关于html5文本文件的一些简单介绍
- 如何区分HTML5开发和前端开发?学习HTML5需要掌握的专业技术有哪些?
- 学习:从零玩转HTML5前端+跨平台开发(表单标签-按钮(掌握))
- 学习:从零玩转HTML5前端+跨平台开发(表单标签-非input标签(掌握))
- web前端学习笔记(2)——调色板简单初始版
- DayDayUP之HTML5学习笔记四----使用Video标签制作简单的播放器
- HTML5培训学习简单的10点建议
- 前端学习笔记(注册页面综合案例html5)
- 学习:从零玩转HTML5前端+跨平台开发(img标签(掌握))
- 【自学系列一】HTML5大前端学习路线+视频教程(全套完整版)
- Bootstrap 栅格系统 学习总结 Bootstrap框架是如今最流行的前端框架之一,Bootstrap功能强大,简单易学,很符合实际应用场景。 只是Bootstrap的内容较多,新手
- 从零开始前端学习[41]:html5中新增加的一些智能表单
- 前端-HTML5 canvas学习
- 前端学习日记(四):html中fieldset、select、textarea、input其他属性、H5新增type属性的简单应用
- 前端学习笔记——HTML5
- 从零开始玩转HTML5前端 学习笔记2
- 前端开发学习笔记二--HTML5
- 【HTML5学习研究】简单服务器推送(通过SSE实现即时聊天)
- 前端学习【01】HTML5新增标签与属性
- 学习:从零玩转HTML5前端+跨平台开发(DTD文档声明规范 掌握)