HTML笔记
初识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：正则表达式判断
