HTML 超文本标记语言
第一个网页 IDE注释的快捷键是ctrl+/
<!DOCTYPE html>
<html lang="en">
<!-- 快捷注释键是ctral+/-->
<!--head标签代表网页的头部-->
<head>
<!--meta描述性标签-->
<meta charset="UTF-8">
<!--title代表的是网页的标题-->
<title>我的第一个网页</title>
</head>
<!--body标签代表网页的主体-->
<body>
hello，word！
</body>
</html>
body是网页的主体部分
基本的标签总结
<body>
<!--标题标签-->
<h1>我是一级标签</h1>
<h2>我是二级标签</h2>
<h3>我是二级标签</h3>
<h4>我是二级标签</h4>
<h5>我是二级标签</h5>
<!--段落标签-->
<p>跑的快 </p>
<p>跑得快</p>
<!--换行标签-->
我是第一行我是第二行</br>
我是第一行</br>
<!--水平线标签-->
<hr/>
<!--字体样式标签-->
粗体：<strong>我是粗体</strong> <br>
斜体：<em>我是斜体</em> <br>
<!--特殊符号-->
空格：
空 格
<br>
版权符号：©©
</body>
总结： 标题标签、段落标签、换行标签、水平线标签 字体样式标签
空格和版权符号用到的最多
图像标签
<body>
<!--图像标签 可以增加属性 src 代表的是源地址 alt 图片代替的文字-->
<!-- title 鼠标悬停提示的文字 width 宽度 height 高度-->
图片地址：分为相对路径
绝对路径
<img src="../resources/img/2.1.jpg" alt="画的图片" title="鼠标悬停" width="500px"/>
<img src="" > <!--空格可以对属性进行提示-->
</body>
超链接标签
- 页面间的跳转连接
- 锚点连接（页面内的链接）
- 功能性链接（点击邮箱链接）（qq推广）
<body>
<a name="top">顶部</a> <!--添加name目的是作为锚点的使用-->
<a href="http://www.baidu.com" target="_blank">百度一下</a><br/>
<a href="3.图像标签.html" target="_self">图像</a>
图像也可以作为超链接，本意是可以为图像添加超链接
target="_blank" 空白页面打开
target="_self" 自己页面打开
<p>
<img src="../resources/img/2.1.jpg" alt="画的图片" title="鼠标悬停" width="500px"/>
</p>
<!--锚点连接-->
1.需要一个标记 在标记处使用name 属性作为标记
2.跳转到标记 锚链接#表示
3.锚链接代表的是页面内的跳转
<br>
<a href="#top">回到顶部</a>
<!--功能性连接，邮件连接，mailto-->
<a href="mailto:[email protected]">点击联系我</a><br>
<!--功能性连接，百度qq推广-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2628733927&site=qq&menu=yes">
哈哈<img border="0" src="http://wpa.qq.com/pa?p=2:2628733927:53" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>
</body>
列表标签
列表的分类： 有序列表 ol li 无序列表 ul li 适用的范围：导航栏之类的 定义列表 dl dt dd 适用的范围： 网站网页的底部设计
<body>
<!--
1、什么是列表，列表就是信息资源的一种展示形式。可以是信息的展示结构化和条理化
便于浏览者更快捷的获得响应的信息
列表的分类：
有序列表 ol li
无序列表 ul li
定义列表 dl dt dd
-->
<ol>
有序列表适用于:试卷、问答...
<li>java</li>
<li>python</li>
</ol>
<hr/>
<ul>
无序列表适用于：导航，侧边栏...
<li>java</li>
<li>python</li>
</ul>
<hr/>
<dl>
自定义列表适用的范围：适用于公司网站的底部
<dt>名字</dt>
<dd>java<dd/>
<dd>python<dd/>
</dl>
</body>
表格标签
标签是table 创建行是 tr 列是 td 跨列合并是colspan 跨行合并是 rowspan
<body>
<!--表格 简单通用、结构稳定-->
<!--基本的结构包括：单元格+行+列+跨行+跨列-->
<!--行是 tr table row 列是 td-->
<table border="1px">
<tr>
<!-- colspan 跨列-->
<td colspan="4">1-1</td>
</tr>
<tr>
<!-- rowspan 跨列-->
<td rowspan="2">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>
视频和音频
总结：学习了音频和视频的标签 以及两个属性controls and autoplay
<body>
<!--音频和视频-->
<video src="../resources/video/甘肃省文旅数据中心-示例1.mp4" controls autoplay></video>
src 代表的是资源路径
controls 代表控制条
autoplay 代表自动播放
<audio src="../resources/audio/阿虾%20-%20儿时.mp3" controls autoplay></audio>
总结：学习了音频和视频的标签
以及两个属性controls and autoplay
</body>
页面结构分析
学习web前端要有观察网站的思维
<body>
<!--
header 头部
footer 脚部区域
section 独立区域
article 独立的文章内容
aside 相关内容或者应用
nav 导航栏辅助内容
-->
学习web前端需要有观察的思维
<header> <h2> 网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚注</h2>
</footer>
总结： 网页的整体布局都是有规律的，有头部、主体和脚注和导航栏
在平时上网的时候，要善于观察
</body>
iframe内联框架
iframe 框架实现的是，在一个网站里面嵌套另一个网站
<body>
<!--
iframe 内联框架
src:地址
w-h:高宽
name:其实是框架的标识名，方便超链接的跳转,结合超链接的target属性，跳转到内联窗口
target属性：可以在本页面打开，也可以跳转到新的窗口，也可以跳转到指定的内联窗口
-->
<iframe src=" " name="hello" frameborder="0" width="1000px" height="800px" ></iframe>
<a href="https://www.hao123.com" target="hello">点我跳转</a><br/>
iframe 框架实现的是，在一个网站里面嵌套另一个网站
</body>
form 表单
form 里面 action：表单提交的位置 method:表单提交的方式，post 和get
get方式的提交：我们可以在url中看到我们提交的信息，不安全，但是高效
psot方式提交：比较安全，适合传输较大的文件
<form action="1.我的第一个网页.html" method="post">
<!-- 文本输入框
input type="text"
name="后期java调用
主要调用的是name"
value="默认初始值" required 必须的不能为空的
-->
<p>姓名：<input type="text" name="username" placeholder="请输入姓名" required ></p>
<!-- 密码输入-->
<p>密码：<input type="password" name="pwd"></p>
<!-- 单选框
type="radio"
value="boy"
name="sex"表示同一组的按钮，只能选单个，分组的概念
-->
<p>
性别：<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女
</p>
<!--
type="checkbox"
value="sleep" 传给后台的java
name="hobby" 代表的是一组的信息
-->
<p>
爱好：<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby" checked>敲代码
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戏
</p>
<!-- 按钮
value 可以为表单的按钮进行赋值
-->
<p>按钮
<input type="button" name="bt1" value="点击变长">
图片也可以作为按钮进行使用
</p>
<p>
<!--表单的信息，可以传输到后台进行分析
下拉列表
-->
</p>国家：
<select name="select1">
<option value="china">中国</option>
<option value="us">美国</option>
<option value="yd" selected>雅典</option>
<option value="rs">瑞士</option>
</select>
<!-- 文本区域-->
<p>反馈信息：
<textarea name="textarea" cols="10" rows="10">文本内容</textarea>
</p>
<!--文件区域-->
<p>
<input type="file" name="files">
</p>
<!--邮件 和 url 数字-->
<p>
邮箱：<input type="email" name="email">
url:<input type="url" name="url">
数字：<input type="number" name="num" max="100" min="0" step="10">
<p>后期都可以使用jsp进行自主的表单验证</p>
</p>
<!--滑块-->
<p>滑块：
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<!--搜索-->
<p>
搜索：<input type="search" name="search">
</p>
<p>
增加鼠标的可用性:
<label for="mk">你点我试试</label>
<input type="text" id="mk">
</p>
<p>
表单的应用
重点是这三个：hidden 隐藏域 只读 readonly 禁用 disabled
</p>
<p>
表单的初步验证：placeholder="请输入姓名"(默认提示) required(不能为空、非空判断)
pattem正则表达式判断 https://www.jb51.net/tools/regexsc.htm
</p>
<p>
自定义邮箱：<input type="text" name="email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>
<p>
<input type="submit" value="点击提交">
<input type="reset">
</p>
</form>