初识Html
HTML(Hyper Text Markup Language)：超文本标记语言
超文本包含文字、图片、音频、视频、动画等
Html发展史
主流的浏览器都支持HTML5 ，W3C是World Wide Web Consortium(万维网联盟)
W3C标准包括：结构化标准语言(HTML、xml)、表现标准语言(css)、行为标准(Do,.ECMAScript)
相关IDE：DW(早期)、WebStorm、IDEA
使用工具
使用工具：IDEA
我们添加一个页面，然后在右边即可选择对应的浏览器进行浏览：
在settings中我们可以对浏览器进行使用：
一、网页基本描述
<!-- DOCTYPE:告诉浏览器，我们使用什么规范 --> <!DOCTYPE html> <html lang="en"> <!-- head标签代表网页头部--> <head> <!-- meta是描述性标签，它用来描述网站的一些信息--> <!-- meta一般用来做SEO--> <meta charset="UTF-8"> <meta name="keywords" content="长路Java，学习HTML中。。。。。"> <meta name="description" content="不断学习积累，目标Java后端"> <!-- title：表示网页标题--> <title>Title</title> </head> <!-- body标签代表网页主体--> <body> hello,world! </body> </html>
效果展示 ：
二、网页基本标签
标题标签：
段落标签(上下都空一行)：
换行标签：
水平线标签：
粗体标签：
斜体：
特殊符号： (空格) < (小于) >(大于) ©(版权符号©)
2.1、head部分
页面加载时重定向功能：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 重定向，页面刷新后3秒跳转百度 --> <meta http-equiv="refresh" content="3,url=https://www.baidu.com"> </head>
三、其他标签
图像标签 <!-- src：可以使用绝对路径与相对路径(建议使用) ./：当前目录 ../：上级目录 alt：用来表示当前图片路径找不到时显示文字 title：鼠标移到图片上出现的提示信息 width：宽度 height：高度 --> <img src="./resources/images/1.jpg" alt="没有找到图片" title="布丁照片" width="200" height="300">
超链接标签(5个应用)
想要点击链接不跳转设置：href = "javascript:;"
① 链接里带文字(点击文字跳转)
<!--超链接中文字--> <a href="https://www.baidu.com/" target="">点击我跳转百度</a>
② 链接里带图片(点击图片跳转)
<!--超链接中放置图片--> <a href="https://www.baidu.com/"> <img src="resources/images/1.jpg" alt="没有找到图片" title="布丁照片" width="200" height="300"> </a>
③ 锚链接(跳转到当前页某个部分或其他页面指定部分)
# 方式一：根据标签的name来定位 <a id="123">顶部</a> <a href="#123"></a> # 方式二：根据标签的id来定位 <p id="bq">标签一</p> <a href="#bq"></a> # 方式三：定位到别的页面的某个部分,只需要在#之前加上链接即可！！！ <a href="../1.html#bq"></a>
④ 邮件链接
<a href="mailto:975734243@qq.com">给我发邮件</a>
⑤ QQ链接
qq推广工具：https://shang.qq.com/v3/widget.html
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=939974883&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:939974883:53" alt="加我聊天" title="加我聊天"/></a>
效果展示：
行内元素与块元素(概念)
行内元素：无论内容多少，该元素独占一行，如p,h1标签等
块元素：内容撑开宽度，左右都是行内元素的可以在排一行，就是不单独另起一行的元素，如a，strong，em标签等
列表标签
三个部分：有序列表、无序列表、自定义列表(ol、ul、dl dt dd)
<!--有序列表 应用范围：试卷、问答--> <ol> <li>Java</li> <li>C++</li> <li>Python</li> <li>C</li> <li>VB</li> </ol> <br> <!--无序列表 应用范围：导航、侧边栏--> <ul> <li>Java</li> <li>C++</li> <li>Python</li> <li>C</li> <li>VB</li> </ul> <br> <!--自定义列表 dl：标签 dt：列表名称 dd：列表内容 应用范围：公司网站底部--> <dl> <dt>学科</dt> <dd>Java</dd> <dd>C++</dd> <dd>Python</dd> <dd>VB</dd> <dt>地区</dt> <dd>江苏</dd> <dd>北京</dd> <dd>深圳</dd> <dd>天津</dd> </dl>
效果：
表格标签
主要三元素：table、tr、td
属性：colspan(跨行)、rowspan(跨列)
<!-- 表格学习 tr：行 rows td：列 --> <table border="1px"> <tr> <!-- colspan：跨行 --> <td colspan="3" align="center">学生成绩</td> </tr> <tr> <!-- rowspan：跨列 --> <td rowspan="2">狂神</td> <td>语文</td> <td>100</td> </tr> <tr> <td>数学</td> <td>100</td> </tr> <tr> <td rowspan="2">秦疆</td> <td>语文</td> <td>100</td> </tr> <tr> <td>数学</td> <td>100</td> </tr> </table>
效果展示：
媒体元素
都有src、conrols、autoplay属性，对于音频使用autoplay某些浏览器不能直接播放
视频：
音频：
<!-- src：资源路径 controls：控制条，出现控制视频器多个选项，点击播放等下载功能 autoplay：自动播放 loop：循环播放 --> <video src="resources/video/01.mp4" controls autoplay width="400" height="200"></video> <audio src="./resources/audio/攀登.m4a" controls autoplay></audio>
