HTML5
程序员文章站
2022-06-10 13:57:02
初识HTML 什么是HTML Hyper Text Markup Language(超文本标记语言) HTML5的优势 世界知名浏览器厂商对HTML5的支持 微软 Google 苹果 Opera Mozilla 市场需求 跨平台 W3C标准 W3C World Wide Web Consortium ......
初识html
什么是html
- hyper text markup language(超文本标记语言)
html5的优势
- 世界知名浏览器厂商对html5的支持
- 微软
- 苹果
- opera
- mozilla
- 市场需求
- 跨平台
w3c标准
-
w3c
- world wide web consortium(万维网联盟)
- 成立于1994年,web技术领域最权威和最具有影响力的国际中立性技术标准机构
-
w3c标准包括:
- 结构化标准语言(html、xml)
- 表现标准语言(css)
- 行为标准(dom、ecmascript)
<!-- doctype:告诉浏览器我们要使用什么规范--> <!doctype html> <html lang="en"> <!--head代表网页的头部--> <head> <!--meta代表网页的描述--> <meta charset="utf-8"> <meta name="keywords" content="小董的网页"> <meta name="description" content="慎思之、笃行之"> <!-- title代表网页的标题--> <title>我的第一个网页</title> </head> <body> hello world! <!--body代表网页的主题--> </body> </html>
网页的基本标签
标题标签
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <!--标题标签--> <h1>一级标签</h1> <h2>一级标签</h2> <h3>一级标签</h3> <h4>一级标签</h4> <h5>一级标签</h5> <h6>一级标签</h6> <!--段落标签--> <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/> 一只没有耳朵,一只没有尾巴,<br/> 真奇怪!真奇怪!<br/> <!--字体标签--> 粗体:<strong> 我是粗体 </strong> <br/> 斜体:<em> 我是斜体 </em> <!--注释和特殊服符号 空格、大于、小于、版权--> 空格:我 拍 你 <br/> 大于:> <br/> 小于:< <br/> 版权所有:©版权所有 <!-- & ; 百度 --> </body> </html>
图像标签
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>图像标签学习</title> </head> <body> <!-- src :图片地址(必填) 相对地址(推荐使用),绝对地址; ../ 上一级目录 alt :图片名字(必填) --> <img src="../resources/image/tang.jpg" alt="米老鼠" title="悬停文字" width="300" height="300"> </body> </html>
链接标签
- 网址链接
- 锚链接
- 功能性链接
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>链接标签学习</title> </head> <body> <!-- href :表示网页的地址 target:表示网页在那个窗口打开 _blank :在新的窗口打开网页 _self :在当前窗口打开网页 --> <a name="top">顶部</a> <a href="1.firstpage.html" target="_blank"> 到第一网页区 </a> <a href="https://www.baidu.com" target="-_self"> 跳转到百度去 </a> <br/> <br/> <p> <a href="1.firstpage.html"> <img src="../resources/image/tang.jpg" alt="米老鼠" title="悬停文字" width="300" height="300"> </a> </p> <!--锚链接 1. 需要一个标记 <a name="top">顶部</a> 2. 跳转到标记 --> <a href="#top"> 回到顶部 </a> <a name="down">底部</a> <!--功能性链接 邮件链接:mailto qq链接 --> <a href="mailto:45334544@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)
列表
-
什么是列表
- 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷地获得相应的信息
-
列表的分类
- 无序列表
- 有序列表
- 定义列表
<!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>java</li> <li>python</li> <li>运维</li> <li>前端</li> <li>c/c++</li> </ul> <!--自定义列表 dl:标签 dt:列表名称 dd:列表内容 --> <dl> <dt>学科</dt> <dd>java</dd> <dd>python</dd> <dd>运维</dd> <dd>前端</dd> <dd>c</dd> <dt>国家</dt> <dd>中国</dd> <dd>德国</dd> <dd>美国</dd> <dd>俄国</dd> </dl> </body> </html>
表格
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>表格学习</title> </head> <body> <table border="1px"> <!--表格table tr:行 td:列 --> <tr> <!--colspan:跨列--> <td colspan="4">1-1</td> </tr> <tr> <!--rowspan:跨行--> <td rowspan="3">2-1</td> <td>2-2</td> <td>2-3</td> <td>2-4</td> </tr> <tr> <td>3-2</td> <td>3-3</td> <td>3-4</td> </tr> </table> </body> </html>
媒体元素
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>媒体元素学习</title> </head> <body> <!--视频 src:资源路径 controls:控制条 autoplay:自动播放 --> <video src="../resources/a.mp4" controls autoplay></video> <audio src="../resources/a.mp3" controls ></audio> </body> </html>
页面结构分析
元素名 | 描述 |
---|---|
header | 标题头部区域的内容(用于页面或者页面中的一块区域) |
footer | 标记脚部区域的内容(用于整个页面或者页面中的一块区域) |
section | web页面中的一块独立区域 |
article | 独立的文章内容 |
aside | 相关内容或者应用 |
nav | 导航类辅助内容 |
<!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>iframe</title> </head> <body> <!--iframe 内联框架 src:地址 w-d:宽度、长度 --> <iframe src="" name="hello" frameborder="0" height="800px" width="1000px"></iframe> <a href="https://www.cnblogs.com/running-man/p/14848232.html" target="hello"> 点击跳转 </a> </body> </html>
表单
表单元素格式
type | 指定元素的类型:text、password、checkbox、radio、submit、reset、file、hidden、image、button,默认为text |
---|---|
name | 指定表单元素的名称 |
value | 元素的初始值,type为radio时,必须指定一个值 |
size | 指定表单元素的初始宽度 |
maxlength | type为text或者password时,输入的最大字符数 |
checked | type为checkbox或者radio时,指定按钮是否是被选中 |
表单的应用
- 隐藏 hidden
- 只读readonly
- 禁用disabled
表单的初级验证
-
为啥要验证
-
常用方式:
- placeholder :文本框提示信息
- required :必须填写
- pattern :正则表达式
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>表单学习</title> </head> <body> <h2>注册</h2> <!--表单:form action:表单提交的位置,可以是网站,也可以是一个请求处理的地址 method:get、post提交方式(显示、隐式) get提交方式,可以在url中直接看到,不安全,高效 post:比较安全,大文件 --> <form action="1.firstpage.html" method="get"> <!--文本输出狂:input type="text" value="小尼姑" 文本框初始值 maxlength="8" 最长能写几个字符 size="20" 文本框的长度 --> <p> 用户:<input type="text" name="username" placeholder="请输入用户名"></p> <!--密码输出狂:input type="password"--> <p>密码:<input type="password" name="pwd" value="12345" required></p> <!--单选框标签:input type="radio" value:单元框的值 name:表示组 --> <p>性别: <input type="radio" value="boy" name="sex">男 <input type="radio" value="girl" name="sex">女 </p> <p>爱好: <input type="checkbox" value="read" name="hobby">读书 <input type="checkbox" value="game" name="hobby">打游戏 <input type="checkbox" value="swim" name="hobby">游泳 <input type="checkbox" value="football" name="hobby">足球 </p> <!--input type="button" 普通按钮 input type="image" 图片按钮 input type="submit" 提交按钮 input type="reset" 重置按钮 --> <p>按钮: <input type="button" name="btn1" value="点击一下"> <!-- <input type="image" src="../resources/image/tang.jpg">--> </p> <!--下拉框 --> <p>国家: <select name="列表名字" id=""> <option value="china">中国</option> <option value="usa">美国</option> <option value="japan">日本</option> <option value="indian">印度</option> </select> </p> <!--文本框--> <p>反馈: <textarea name="textarea" id="1" cols="30" rows="10">文本内容</textarea> </p> <!--文件域--> <p> <input type="file"> <input type="button" name="upload" value="上传"> </p> <!--邮件验证--> <p>邮箱: <input type="email"> </p> <!--url--> <p>url: <input type="url"> </p> <!--数字--> <p>商品数量: <input type="number" name="voice" min="0" max="100" step="10"> </p> <!--滑块--> <p>voice: <input type="range" name="voice" min="0" max="100" step="2"> </p> <!--搜索框--> <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> </form> </body> </html>