HTML
什么是HTML
Hyper Text Markup Language (超文本标记语言)。
w3c标准
World Wide Web Consortiurk(万维网联盟)
成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构 http://www.w3.orgl http://www.chinaw3c.orgl w3C标准包括 结构化标准语言(HTML、XML)
表现标准语言(Css) 行为标准(DOM、ECMAScript )
标签
-
标签是成对出现的。
如<head> </head> 单个的前面部分叫开放标签后面叫闭合标签
网页基本信息
-
DOCTYPE声明:告诉浏览器使用什么规范
-
主题<title>标签
-
<meta>标签
-
注释格式
<!-- -->
-
<!-- 告诉浏览器使用什么规范 --> <!DOCTYPE html> <!-- 所有标在总标签下 --> <html lang="en"> <!-- 头部标签 --> <head> <!-- 描述标签，描述网站的一些信息 --> <!--用来做SEO--> <meta charset="UTF-8"> <!-- 主题标签 --> <title>Title</title> </head> <!-- 主体标签 --> <body> </body> </html>
网页基本标签
-
标题标签
-
段落标签
-
换行标签
-
水平线标签
-
字体样式标签
-
注释和特殊符号
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本标签</title> </head> <body> <!-- 标题标签 --> <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5> <!--段落标签 --> <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/> <h1>字体样式标签</h1> <p>粗体：<strong>我喜欢你 i love you</strong></p> <p>斜体：<em>我喜欢你 i love you</em></p> <!--特殊符号 以&开头然后以；结尾 --> <p>空 格</p> 空 格 <br/> > <br/> ©版权所有落春 </body> </html>
图像标签
<img src="path" alt="text" title="text" width="x" height="y"/> <!-- src:图像地址 alt:图像的替代文字 title:鼠标悬停的提示文字 width：宽度 height:高度 -->
<html lang="en"> <head> <meta charset="UTF-8"> <title>图像标签</title> </head> <body> <!-- 相对地址： 绝对地址：写死 ../上级目录 特别注意/不能丢，丢了图片显示不了 地址错误也显示不了 --> <img src="../resource/image/1.jpg" alt="落月专属" title="鼠标悬停文字" border="1px" hidden/> </body> </html>
链接标签
<a href="path" target="目标窗口位置" >连接文本或图像</a>
path:路径
target:目标在那个窗口打开
文本超链接
图像超链接
页间链接
从一个页面到另一个页面
锚链接
功能性链接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>链接标签</title> </head> <body> <!-- 使用name作为标记--> <a name="top" >顶部</a> <!--target="-blank"在新窗口打开 target="-self"在自己网页打开 --> <a href="基本标签.html" target="_blank">点击我跳转到基本标签</a> <a href="http://www.baidu.com"target="_self">点击我跳转到百度</a> <!--嵌套点击图片跳转 --> <br/> <a href="基本标签.html"> <img src="../resource/image/1.jpg" alt="落月专属" title="鼠标悬停文字" border="1px"/> </a> <!--锚链接 1.需要一个锚标记 2.跳转到标记 3.也能一个页面跳转到另一个页面底部 --> <a href="#top">回到顶部</a> <a name="down">底部</a> <!--功能性链接 邮箱链接：mailto qq链接 --> <a href="mailto:2263393389@qq.com">联系我</a> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2263393389&site=qq&menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=2:2263393389:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a> </body> </html>
块元素和行内元素
块元素：无论类容多少独占一行如（p h1-h6)
行内元素：内容撑开宽度，左右都是行内元素的排成一行（a strong..)
列表 标签
什么是列表
◆列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息 列表的分类 ◆无序列表
◆有序列表
◆定义列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表标签</title> </head> <body> <!--有序列表 适用于试卷问答--> <ol> <li>java</li> <li>c++</li> <li>html</li> <li>python</li> <li>ai </li> </ol> <hr/> <!--无序列表 适用于导航栏跟侧边栏 --> <ul> <li>java</li> <li>c++</li> <li>html</li> <li>python</li> <li>ai </li> </ul> <!--自定义列表 dl:标签 dt:标题 dd:内容 适用于网站底部 --> <dl> <dt>自定义列表</dt> <dd>鲜花</dd> <dd>水果</dd> <dd>骑车</dd> <dd>美女</dd> <dd>宠物</dd> </dl> </body> </html>
表格标签
-
为什么使用表格
-
简单通用结构稳定
-
-
基本结构
-
单元格
-
行
-
列
-
跨行
-
跨列
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<style>
<!--表格虚线合并-->
table {
padding: 20px;
border-collapse: collapse;
border-spacing: 0;
}
</style>
<body>
<!--
表格table
行tr 列td
-->
<table border="1px" align="center" valign="middle" height="300px" width="150px" >
<tr>
<!-- colspan跨列-->
<td colspan="5" >学生成绩</td>
</tr>
<tr>
<!-- rowspan跨行-->
<td rowspan="2">落月</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<!-- rowspan跨行-->
<td rowspan="2">小红</td>
<td>语文</td>
<td>100</td>
</tr><tr>
<!-- rowspan跨行-->
<td>数学</td>
<td>100</td>
</tr>
</table>
</body>
</html>
媒体元素
视频元素
video
音评元素
audio
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>媒体元素</title> </head> <body> <!--音频和视频 controls 控制开关 autoplay 自动播放 --> <video src="../resource/video/1.mp4" controls autoplay></video> <audio src="../resource/audio/2.mp3" controls autoplay></audio> </body> </html>
页面结构
header 标题头部区域的内容(用于页面或页面中的一块区域) footer 标记脚部区域的内容(用于整个页面或页面的一块区域) section Web页面中的一块独立区域 article 独立的文章内容 aside 相关内容或应用(常用于侧边栏) nav 导航类辅助内容
iframe内联框架
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联框架</title> </head> <body> <iframe src="" name="hi" width="1000px" height="800px"></iframe> <a href="https://www.sogou.com/" target="hi">点击跳转</a> </body> </html>
表单语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <h1>注册</h1> <!--表单form action表单提交的位置，可以是网站，也可以是一个请求处理的地址 method get post 提交方式 get方式提交我们能在url看到我们的信息不安全，但高效 post安全传输大文件 --> <form action="图像标签.html" method="post"> <!--文本输入框 --> <p><strong>名字</strong><input type="text" name="username"></p> <!--密码框 --> <p><strong>密码</strong><input type="password" name="password"></p> <p> <input type="submit"> <input type="reset"> </p> </form> </body> </html>
单选框
<!--单选框 value单选框的值 name分组 --> <p><strong>性别</strong><input type="radio" value="boy" name="sex"/>男 <input type="radio" value="girl" name="sex"/>女 </p>
多选框
<!--多选框 value单选框的值 name分组 checked 默认选中 --> <p> <strong>爱好</strong> <input type="checkbox" name="hobby" value="games"/>游戏 <input type="checkbox" name="hobby" value="basketball"/>篮球 <input type="checkbox" name="hobby" value="chat"/>聊天 <input type="checkbox" name="hobby" value="code"/>敲代码 </p>
按钮
<!--按钮 点击图片按钮实现提交 input type="button" 普通按钮 input type="image" 图像按钮 input type="submit" 提交按钮 input type="reset" 重置按钮 --> <p> <strong>按钮</strong> <input type="button" value="变长" name="btn1"/> <input type="image" src="../resource/image/1.jpg"> </p>
下拉框
<!--下拉框 列表框 --> <p> <strong>国家</strong> <select name="国家"> <option value=""></option> <option value="china">中国</option> <option value="us">美国</option> <option value="de" selected>德国</option> <option value="yi">英国</option> </select> </p>
文本域
<!--文本域 --> <p><strong>反馈</strong> <textarea name="textarea" cols="20" rows="5"></textarea> </p>
文件域
<!--文件域 --> <p><strong>上传文件</strong> <input type="file" name="files"> <input type="button" value="上传" name="upload"> </p>
简单验证
<!--邮件验证--> <P> <strong>邮件</strong> <input type="email" name="email"> </P> <!--url验证--> <P> <strong>地址</strong> <input type="url" name="url"> </P> <!--数字验证--> <P> <strong>数字</strong> <input type="number" name="number" max="100" min="0" step="10"> </P>
滑块
<!--滑块--> <P> <strong>音量</strong> <input type="range" name="voice" max="100" min="0" step="10"> </P>
搜索框
<!--搜索框--> <P> <strong>搜索</strong> <input type="search" name="search"> </P>
表单的应用
只读 readonly
隐藏域 hidden
禁用 disabled
增强鼠标的可用性
<P> <label for="mark">你点我</label> <input type="text" id="mark"/> </P>
表单初级验证
placeholder 在输入框中输入提示信息
requird 非空
pattern 正则表达式
610
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
