初识HTML
Hyper Text Markup Language(超文本标记语言)
超文本包括:文字、图片、音频、视频、动画等
W3C标准
World Wide Web Consortium (万维网联盟)
W3C标准包括:
结构化标准语言(HTML、XML)
表现标准语言(CSS)
行为标准(DOM、ECMAScript)
网页基本构成
<!-- !DOCTYPE 告诉浏览器,要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!-- head网页头部-->
<head>
<!-- meta 描述性标签,用来描述网站的一些信息
meta 一般用来做seo -->
<meta charset="UTF-8">
<!-- <meta name="keywords" content="html,基本标签">-->
<!-- <meta name="description" content="这里是我学习过程中的笔记呀~多复习!">-->
<!-- title 网页标题 -->
<title>Title</title>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
网页布局
页面结构分析:
- header:标题头部区域内容(用于页面或页面中的一块区域)
- footer:标记脚步区域的内容(用于整个页面或页面的一块区域)
- section:;web页面中的一块独立区域
- article:独立的文章内容
- aside:相关内容或应用(常用于侧边栏)
- nav:导航类辅助内容
网页基本标签
标题标签:
<!--h1~h6-->
<h1></h1>
段落标签:
<p></p>
换行标签:
<br>
水平线标签:
<hr>
字体样式标签:
粗体:<strong></strong>
斜体:<em></em>
特殊符号:
空格:
大于号:>
小于号:<
版权符合:©
图像:
<!-- src填图像地址,
alt是图像的替代文字(即图像加载失败时显示的文字),
titile是鼠标悬停时的提示文字,
width图像宽度, high图像高度 -->
<img src="" alt="" title=" width="" height="">
超链接:
-
页面间链接
<!-- href:表示要跳转的网页地址 target:表示链接在哪个窗口打开,常用值: _self:在自己的网页中打开 _blank:在新标签页打开 a标签内可嵌套其他标签,如img。 --> <a href="path" target="">链接文本或图像</a>
-
锚链接
-
同一个页面内:
<!-- 设置一个锚标记 --> <a name="top">我是顶部</a> ...... <!-- 跳转到锚标记处 --> <a href="#top">点击我回到顶部</a>
-
不同页面间:
页面一:first.html
<!-- 设置一个锚标记 --> <a name="down">底部</a> .......
页面二:second.html
<!-- 跳转到锚标记处 --> <a href="first.html#top">点击直达first.html底部</a>
-
-
功能性链接
<!-- 邮件链接:mailto --> <a href="mailto:邮箱地址">点击联系我</a> <!-- QQ链接--> <!--百度搜索QQ推广,点进去,找到推广工具,选择想要的样式,会给出相应的语句,复制粘贴用即可-->
iframe内联框架:
<!-- src:引用页面地址,name:框架标识名-->
<iframe src="" name="hello" frameborder="1"></iframe>
<!-- 还可与a标签配合使用。此处target填的是上面iframe中的name值-->
<a href="first.html" target="hello">点击跳转</a>
列表:
-
有序列表:
<ol> <li>语文</li> <li>数学</li> <li>英语</li> <li>日语</li> </ol>
-
无序列表:
<ul> <li>语文</li> <li>数学</li> <li>英语</li> <li>日语</li> </ul>
-
自定义列表:
<!-- dt:列表名称,dd:列表内容 --> <dl> <dt>学科</dt> <dd>Java</dd> <dd>C</dd> <dd>C++</dd> <dd>Python</dd> </dl>
表格:
<!--border:表格边界,colspan:跨列,rowspan:跨行-->
<table border="1px">
<tr>
<td colspan="3" rowspan="1.5">学生成绩</td>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>80</td>
</tr>
<tr>
<td>数学</td>
<td>99</td>
</tr>
<tr>
<td rowspan="2">嘟嘟</td>
<td>语文</td>
<td>88</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
</table>
效果图:
媒体元素:
<!-- src:资源路径
controls:控制条
autoplay:自动播放 -->
<video src="../resourse/video/1.mp4" controls autoplay></video>
<audio src=" "controls></audio>
表单及表单应用:
-
文本框、密码框、按钮、提交、重置
<!-- action:表单提交的位置,可以是网站,也可以是一个处理请求地址 method:表单提交方式:get(提交的信息会在地址栏显示)、post --> <form action="first.html" method="get"> <p>姓名:<input type="text" name="username"> </p> <p>密码:<input type="password" name="pwd"> </p> <!--按钮--> <p>按钮: <input type="button" name="btn1" value="按钮a"> <!-- 图片按钮的效果和提交一样(但带上图片的参数)--> <input type="image" name="btn2" src="../resourse/img/111.jpg"> </p> <p> <input type="submit"> <input type="reset"> </p> </form>
-
单选、多选、下拉框:
<!--单选 ,value一定要填(否则无法读取值),name值要相同否则不能单选--> <p>性别: <input type="radio" value="boy" name="sexs">男 <input type="radio" value="girl" name="sexs">女 </p> <!--多选 ,value一定要填(否则无法读取值)--> <p>性别: <input type="checkbox" value="sleep" name="hobby">睡 <input type="checkbox" value="chat" name="hobby">聊天 <input type="checkbox" value="game" name="hobby">游戏 <input type="checkbox" value="book" name="hobby">看书 </p> <!--下拉框,select默认选定--> <p>国家: <select name="国家"> <option value="japan">日本</option> <option value="english">英国</option> <option value="china" selected>中国</option> <option value="usa">美国</option> </select> </p>
-
文本域、文件域
<!-- 文本域--> <p>反馈: <textarea name="textarea" cols="30" rows="10">请输入内容</textarea> </p> <!-- 文件域--> <p>资料: <input type="file" name="files"> </p>
-
滑块
<!--滑块--> <p>音量: <input type="range" name="voice" min="0" max="100" step="2"> </p> <!--搜索框--> <p>搜索: <input type="search" name="find"> </p>
-
隐藏域、只读、禁用
隐藏域:hidden
只读:readonly
禁用:disabled
(默认内容:当取值是输入或选择时,写入value的值即为默认值)
表单初级验证:
常用方式:
-
placeholder:给出提示信息
<input type="text" name="username" placeholder="请输入你的姓名">
-
required:必填项
密码:<input type="password" name="pwd" required>
-
pattern:正则表达式判断