什么是HTML
Hyper Text Markup Language(超文本标记语言)
超文本包括:文字,图片,音频,视频,动画等
w3c标准
WOrld Wide Web Consortium(万维网联盟)
成立于1994年,Web技术领域最权威和具影响力的国际中立性技术标准机构
W3C标准包括
-
结构化标准语言(HTML、XML)
-
表现标准语言(CSS)
-
行为标准(DOM、ECMAScript)
<!--告诉浏览器,我们要是用什么规范 -->
网页基本标签
-
标题标签 <title> 标题</title>
-
段落标签 <p>一段话</p>
-
换行标签 一句话
-
水平线标签 <hr/>
-
字体样式标签 粗体 粗体 斜体
-
注释和特殊符号 <!-- 注释-->
<!--特殊符号-->
空 格:
大于号>
小于号<
©版权符号
图像标签
常见的图像格式
JPG
GIF
PNG
BMP
<img src="../resources/image/1.jpg" alt="我的图片" title="悬停文字" width="1366" height="768">
<!--img学习
src:图片地址
相对地址(推荐使用),绝对地址
../返回上一级目录 -->
alt 图片加载失败会显示的内容“”。
链接标签
<!-- a标签
href:必填,表示要跳转到那个页面
target:表示窗口在那里打开
_blank 在新标签中打开
_self 在自己的网页中打开
-->
超链接
页面间链接
从一个页面链接到另一个页面
锚链接
功能性链接
<body>
<!--使用name作为标记-->
<a name="top">顶部</a>
<!-- a标签
href:必填,表示要跳转到那个页面
target:表示窗口在那里打开
_blank 在新标签中打开
_self 在自己的网页中打开
-->
<a href="https://www.baidu.com" target="_blank">点击调转到百度
<img src="../resources/image/1.jpg" alt="图片加载失败">
</a>
<!--锚链接
1.需要一个锚标记
2.跳转到标记-->
<a href="#top">回到顶部</a>
<a name="down">底部</a>
<!--功能性连接
邮件连接:mailto
QQ链接-->
<a href="mailto:1395950933@qq.com">点击联系我</a>
</body>
</html>
行内元素和块元素
块元素:无论内容有多少,元素自己独占一行
例如:<p></p><hr/> <h1>
行内元素:内容撑开宽度,左右都是行内元素的可以排在一行
例如:<a><strong><em>
列表标签
什么是列表
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷地获得相应的信息。
列表的分类:
-
无序列表
-
有序列表
-
定义列表
表格
视频和音频
<title>视频和音频学习</title>
</head>
<body>
<!--音频和视频
src:资源路径
controls:控制调
autoplay:自动播放-->
<video src="../resources/video/2.mp4" controls autoplay></video>
<audio src="../resources/audio/3.mp3" controls autoplay></audio>
</body>
</html>
<title>页面结构分析</title> </head> <body> <header> <h2>网页头部</h2> </header> <section> <h2>网页主体</h2> </section> <footer> <h2>网页脚步</h2> </footer> <!--导航 nav--> <nav></nav> </body> </html>
iframe内联框架
<title>内联框架iframe</title> </head> <body> <!--iframe内联框架 src:地址 w-h:宽,高--> <iframe src="" name="change" frameborder="0" width="1000" height="800">点击跳转学习java</iframe> <a href="https://www.baidu.com" target="change" >点击跳转</a> </body> </html>
表单
<title>表单学习</title> </head> <body> <h1>注册</h1> <!--表单form action:表单提交的位置,可以是网站,也可以是一个请求处理地址 method:post,get 提交方式 get方式提交:我们可以在url中看到我们提交的信息,不安全,但高效 post:比较安全,传输大文件--> <form action="10.表单.html" method="post"> <!--文本输入框 Input type="text" submit提交按钮 reset重置按钮 --> <p>名字:<input type="text" name="username"/></p> <p>密码:<input type="password" name="pwd"/></p> <p><input type="submit"> <input type="reset"></p> </form>
<title>表单学习</title> </head> <body> <h1>注册</h1> <!--表单form action:表单提交的位置,可以是网站,也可以是一个请求处理地址 method:post,get 提交方式 get方式提交:我们可以在url中看到我们提交的信息,不安全,但高效 post:比较安全,传输大文件--> <form action="10.表单.html" method="post"> <!--文本输入框 Input type="text" name 输入框的名字 value 默认一个初始化值 maxlength 文本框最大输入字符 size 文本框长度 submit提交按钮 reset重置按钮 --> <p>名字:<input type="text" name="username" value="帅" maxlength="8" size="10"/></p> <p>密码:<input type="password" name="pwd"/></p> <!--单选框按钮 name必须为一致,才能表示为同一组,才能只选择一个 input标签 类型是radio时,必须有value--> <p> <input type="radio" value="boy" name="sex"/>男 <input type="radio" value="girl"name="sex">女 </p> <p><input type="submit"> <input type="reset"></p> </form> </body> </html>
单选框多选框
<!--单选框按钮 input type="radio" name必须为一致,才能表示为同一组,才能只选择一个 input标签 类型是radio时,必须有value checked 默认选中--> <p> <input type="radio" value="boy" name="sex"/>男 <input type="radio" value="girl"name="sex">女 <!-- 多选框标签 input type="checkbox" --> <input type="checkbox" value="sleep" name="hobby"/>睡觉 <input type="checkbox" value="talk" name="hobby"/>聊天 <input type="checkbox" value="game" name="hobby" checked/>游戏 <input type="checkbox" value="eat" 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/1.jpg"/> </p> <p><input type="submit"> <input type="reset"></p>
下拉框
<!--下拉框 列表框 <select> name是下拉框的名字 option value 是下拉框可以选择的值 selected是默认为那个列 --> <p>国家 <select name="列表名称" > <option value="china" selected>中国</option> <option value="us">美国</option> <option value="agt">阿根廷</option> <option value="md">缅甸</option> </select> </p>
文本域、文件域
<!-- 文本域 cols="30" rows="10" 行,,,列 --> <p>反馈:<textarea name="textarea" cols="30" rows="10">文本内容</textarea></p> <!-- 文件域 --> <p><input type="file" name="files"> <input type="button" value="上传" name="upload"> </p>
功能验证
<!-- 邮箱验证 --> <p><input type="email" name="email"></p> <!-- URL验证--> <p><input type="url" name="url"></p> <!-- 数字验证 max最大数量 min 最小数量 step 每次点击增加或减少的数量--> <p><input type="number" name="num" max="100" min="1" step="1"></p> <!--滑块--> <p>音量<input type="range" name="voice" max="100" min="0" step="2" ></p> <!-- 搜索框--> <p><input type="search" name="search"></p>
表单的应用
只读:value="admin"(先给一个默认值) readonly
禁用:disabled
隐藏:hidden
单词:description 描述 content内容
<!-- 增强鼠标可用性--> <p> <lable for="mark">点击</lable> <input type="text" id="mark"/> </p>
表单初级验证
placeholder="请输入用户名"<!--提示属性--> required 非空判断 pattern 正则表达式
基础汇总
<!--告诉浏览器使用的规范-->