系列文章目录
前端学习 01 —— HTML5
前端学习 02 —— CSS01
前端学习 02 —— CSS 02
前端学习 02 —— CSS 03
前端学习 03 —— JavaScript 01
前端学习 03 —— JavaScript 02
文章目录
基本常识
一些介绍
HTML： Hyper Text Markup language 超文本语言。这里的超文本包括：文字、图片、音频、视频、动画等。目前最新版本是HTML5，所有的浏览器都支持HTML5。
**W3C：**World Wide Web Consortium万维网联盟，Web技术领域最权威和最具影响力的机构。
W3C标准包括：
- 结构化标准语言——HTML、XML
- 表显标准语言——CSS
- 行为标准——DOM、ECMAScript
IDEA 写HTML
-
创建：正常创建Java项目——>删除src目录——>自己新建一个html目录
——>右键该目录——>new——>HTML File (可以输入中文文件名) -
打开：先设置打开html的浏览器，Ctrl+Alt+S（或者IDEA工具栏 File —> Setting）,搜索Web Browsers，然后点击你IDEA页面中有一个浏览器的标识。
-
在IDEA中HTML的快捷方式：
- 生成注释：Ctrl+/
- 输入某个标签后按Tab键，例如 head+Tab 可生成标题标签。
网页基本信息
首先，html中标签分为闭合标签与自闭合标签，闭合标签即在后要一个对应，而自闭合则只需一个即可。
通过IDEA自动生成HTML后，我们可以看到如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
其中，DOCTYPE 标签告诉浏览器我们使用什么规范，这里是html。
所有html代码需包含在标签中，而标签代表网页头部，代表主体。
网页标签
块元素：
- 无论内容多少，这个元素都会独占一行
- 例如：p、h1、h2这些标签，我们输入一个p标签就一定会占一行。
行内元素：
- 内容撑开宽度，左右都是行内元素的，可以排在一行
- 例如：a、strong、em这些标签，我们可以把两个a标签放在同一行。
基本标签
直接看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本符号</title>
</head>
<body>
<!--标题标签-->
<h1>标题</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<!--段落标签-->
这一段没有段落标签，
所以都在一行。
<p>这一段有段落标签，</p>
<p>所以分成两段。</p>
<!--换行标签-->
这一段有换行标签，<br/>
和段落标签对比一下间隔。<br/>
<!--水平线标签-->
<hr/>
<!--粗体，斜体-->
<p><strong>这是粗体</strong></p>
<p><em>这是斜体</em></p>
<!--特殊符号-->
<p>在IDEA输入再多空格都只算一个，例 如，必须要符号，空 格。</p>
<p>其余的，先输入&，然后再按其他字母</p>
<p>例如，大于 >，小于<，版权符号©</p>
</body>
</html>
结果：
图像标签
首先，对于所有资源最好在项目中有一个位置来单独存放，例如：
然后将图片资源复制到这个文件夹中，直接IDEA中右键文件夹粘贴就行。
图像标签使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签使用</title>
</head>
<body>
<!--
img标签学习：
src：图片路径，推荐使用相对路径，其中../表示上一级目录
alt：当图片没有加载出来，比如图片不存在时，图片位置会显示该属性的内容
上面这两个是必填属性，其他的都是选填。
例如 title属性是鼠标放在图片上会出现的内容
-->
<!-- 这是个锚点，下一节讲 -->
<a name="other"/>
<img src="../resource/image/程序猿.jpg" alt="程序猿图片" title="鼠标悬停" width="400" height="200">
</body>
</html>
超连接标签
直接看代码就好
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接学习</title>
</head>
<body>
<!--
超连接a标签学习
内容不一定是文字，可以是图片等。
页面间链接：
href：跳转的链接
target：表示窗口在哪打开, 默认_self，_blank新页面打开
-->
<a name="top">这是锚点top</a>
<a href="1.%20我的第一个网页.html">跳到第一个网页</a><br/>
<p>
<a href="https://www.baidu.com" target="_blank">
<img src="../resource/image/程序猿.jpg" alt="程序猿"/>
</a>
</p>
<p><img src="../resource/image/程序猿.jpg" alt="程序猿"/></p>
<!--
锚链接：
先有一个锚标记，用a标签的name属性指定。
然后在href中用#+name就可跳转到锚标记。日常我们看到的跳转到顶部就是这样实现。
锚点可以是其他页面。
-->
<a href="#top">跳到锚点top</a><br/>
<a href="2.%20图像标签使用.html#other">跳到另一个页面锚点other</a><br/>
<!--
功能性链接：
邮件链接：把href的值换为 mailto:邮箱号 即可
-->
<a href="mailto:[email protected]">点击发送邮件</a>
<!--
QQ推广：https://shang.qq.com/v3/widget.html，即可实现那些网页的小广告效果
-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1142729000&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:1142729000:53" alt="大爷，来玩呗~" title="大爷，来玩呗~"/>
</a>
</body>
</html>
QQ推广：
列表标签
一般分为有序列表、无序列表、自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--有序列表 ordered list-->
<ol>
<li>Java</li>
<li>Python</li>
</ol>
<hr/>
<!--无序列表 unordered list-->
<ul>
<li>重庆</li>
<li>四川</li>
</ul>
<hr/>
<!--
自定义列表 常用在公司网站底部
dl 标签 dt 列表标题 dd列表内容
-->
<dl>
<dt>课程</dt>
<dd>Java</dd>
<dd>Python</dd>
<dt>地点</dt>
<dd>重庆</dd>
<dd>四川</dd>
</dl>
</body>
</html>
结果：
这是其他公司底部的自定义列表：
表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--
表格 table标签，border属性是边框宽度
行标签 tr，列标签 td。
colspan 跨列属性，rowspan 跨行属性。
-->
<table border="1px">
<tr >
<td colspan="3" align="center">学生成绩</td>
</tr>
<tr>
<td rowspan="2">小明</td>
<td>语文</td>
<td>100分</td>
</tr>
<tr>
<td>数学</td>
<td>95分</td>
</tr>
</table>
</body>
</html>
结果：
媒体元素（视频、音频）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素学习</title>
</head>
<body>
<!--
视频标签video 音频标签audio
属性 controls 增加控制条
属性 autoplay 自动播放
属性 muted 静音
-->
<video muted src="../resource/video/火影.mp4" controls autoplay></video>
<br>
<audio muted = "muted" src="../resource/audio/萤火虫和你.mp3" controls = "" autoplay = "autoplay"></audio>
</body>
</html>
目前的浏览器貌似自动播放都需要配合 muted 属性才行。
页面结构分析
| 元素名 | 描述 |
|---|---|
| header | 标记头部区域的内容（用于整个页面或页面中一块区域） |
| section | Web页面中的一块独立区域 |
| footer | 标记脚部区域的内容（用于整个页面或页面中一块区域） |
| article | 独立的文章内容 |
| aside | 相关内容或应用（常用于侧边栏） |
| nav | 导航类辅助内容 |
iframe 内联框架
可以先试试B站的iframe标签，随便找一个视频，里面有分享，复制里面的代码就行。
直接粘贴到HTML的效果，就是这种嵌套视频到网页里：
下面是iframe标签内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架学习</title>
</head>
<body>
<!--
iframe标签
src：指向一个链接
name：框架标识名
-->
<iframe src="https://www.baidu.com" width="400" height="300" ></iframe>
<br>
<!--
可以用a标签配合iframe标签，让src为空，设置name属性，
然后a标签的target指向name，
实现点击a后，iframe的内容跳转到a的src
-->
<iframe src="" name="media" width="400" height="300" ></iframe>
<a href="6.%20媒体元素.html" target="media">跳转到媒体元素</a>
</body>
</html>
表单
我们在各大网站经常都会要求输入账号密码，那其实就属于表单。
表单的属性比较多，下面列出一些常用的：
1.文本和密码输入框，单选多选框，几个按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!--
表单标签form 内部经常配合input标签
action： 提交表单的位置
method： 提交方式——>get 提交表单后可以在url看得到提交的内容，不安全但高效
post 提交后看不见内容，相对安全
-->
<h1>登录</h1>
<form action="5.%20表格.html" method="get">
<!--
input标签控制表单提交的数
type：输入类型
name：标识该input是哪一个，后续根据name判断，所有input必填该属性。
value：初始值，maxlength：字符最大长度，size：框的字符长度
-->
<p>账号：<input type="text" name="username"/></p>
<p>密码：<input type="password" name="password"/></p>
<!-- radio 单选框，需要填value，来判断属于同一组的哪个框。若为同一组单选框，name必须相同。checked默认选择 -->
<p>
<input type="radio" value="boy" name="sex">男
<input type="radio" checked value="girl" name="sex">女
</p>
<!-- checkbox 多选框 类似单选，最后获取时是得到一个数组 -->
<p>
<input type="checkbox" name="hobby" value="game">游戏
<input type="checkbox" name="hobby" value="sleep">睡觉
</p>
<!-- 按钮：submit 提交按钮，reset 重置按钮，button 普通按钮，image 图片按钮（和submit功能相同）-->
<p>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
<input type="button" value="普通按钮"/>
<input type="image" src="../resource/image/button.png" value="图片"/>
</p>
</form>
</body>
</html>
结果：
2.下拉框、滑块、文件上传、邮箱数字URL验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<h1>练习</h1>
<form action="2.%20图像标签使用.html" method="post">
<!-- label标签增强鼠标可用性，点击内容可将光标锁定到对应id的元素上 -->
<p>
<label for="mark">你点我试试：</label>
<input type="text" id="mark">
</p>
<!-- selected 默认选择 -->
<p>
下拉框:
<select name="country">
<option value="China">中国</option>
<option value="US" selected>美国</option>
<option value="Japan">日本</option>
</select>
</p>
<p>文本域：<textarea name="ta" cols="8" rows="3">文本内容</textarea></p>
<!-- 上传文件 -->
<p>
<input type="file" name="file">
<input type="button" name="upload" value="上传"/>
</p>
<!-- 几个验证 邮箱、URL、数字 -->
<p>
<!-- 不输入或者只要包含@就算，不安全 -->
邮箱：<input type="email" name="email">
URL：<input type="url" name="url">
<!-- step 表示步长，每次加10 -->
数字：<input type="number" name="number" max="100" min="0" step="10">
</p>
<!-- 滑块——>可用于音量控制 -->
<p>音量：<input type="range" min="0" max="100"></p>
</form>
</body>
</html>
结果：
这里面还有些属性是通用的，比如 disabled元素不可用，onlyread 元素只读，hidden 隐藏、placeholder 提示信息、required 元素非空以及pattern正则表达式等。【正则表达式可以直接百度 常用正则表达式 就能找到很多用法。】