1.概述

Hyper Text Markup Language(超文本标记语言) 超文本包括:文字、图片、音频、视频、动画等。 Html5+Css3 —>现在使用的版本 Html5提供了一些新的元素和一些有趣的新特性,同时也建立了一些新的规则。这些元素、特性和规则的建立,提供了许多新的网页功能,如使用网页实现动态渲染图形、图表、图像和动画,以及不需要安装任何插件直接使用网页播放视频等等。 ————————————————

1.2 Html的基本结构

开放标签(成对出现) 闭合标签(单独呈现的标签(空元素))

<!--DOCTYPE:告诉浏览器,我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!-- head标签代表网页头部 -->
<head>
    <!--meta表示网页标签 一般用来做SEO-->
    <meta charset="UTF-8">
    <!-- keywords表示关键字,输入什么关键词能找到这个网站 -->
    <meta name="keywords" content="狂神说java">
    <!--description表示这个网站是做什么的-->
    <meta name="description" content="来这个网站"> 

    <!--表示网页标题-->
    <title>Title</title>
</head>
<!--body表示网页主体-->
<body>
Hello,World!
</body>
</html>

1.3 各种标签

标题标签<h1></h1>

段落标签<p></p> //用来分段

换行标签<br/> //只用一个在结尾会换行

水平线标签<hr/>

字体样式标签<strong></strong>//粗体
<em></em>//斜体

注释和特殊符号
&nbsp;//转义符号可以转义空格
&gt;// >号
&lt;// <号


&copy;版权符号

1.4 图像、超链接标签及网络布局

常见图像格式 JPG GIF PNG BMP

<img src="path" alt="text" title="text" width="x" height="y"/>

**src图像地址:绝对地址、相对地址 …/上一级目录 alt图像的替代文字:图片的名字 title鼠标的悬停文字 width图像宽度 height图像高度 **

1.5 链接标签

文本超链接

<a herf="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a>
<a herf="https://www.baidu.com" target="_self">点击我跳转到百度</a>
<a herf="1.我的第一个网页.html">
     <img src="path" alt="text" title="text" width="x" height="y">
</a>
//这个可以点击图片跳到链接
herf:必填,表示要跳转到哪个页面
target:表示窗口在哪里打开_blank在新标签中打开
_self:在自己的网页中打开,默认的

图像超链接

<a herf="path"(链接路径) target="目标窗口位置"(链接在哪个窗口打开)>链接文本和图像</a> 

<!-- 例 -->
<a herf="1.我的第一个网页.html">
<img src="../resources/image/1.jpg" alt="狂神头像" title="悬停文字" width="300" height="300">


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>

锚链接

<a ip = "top">跳转到标记</a>
<a herf="2.我的第二个网页.html#top"></a>   //#加个定义的锚就可以直接跳转页面


<!--a标签
快捷方式:    a + tab 
href : 必填,表示套跳转到那个页面
target : 表示窗口在哪里打开
          参数: _blank 在新标签中打开
               _self 在自己的网页打开

-->
<a href="1.我的第一个网页.html" target="_blank">点击跳转到我的第一个网页</a>
<a href="https://wwww.baidu.com" target="_self">点击跳转到百度</a>

<br/>
<a href="1.我的第一个网页.html"><img src="../resource/image/1.png" alt="蔷薇图片" tiele="悬停文字" width="300" height="300">图片转跳</a>

<p><img src="../resource/image/1.png" alt="蔷薇图片" tiele="悬停文字" width="300" height="300"></p>

<a ip="top">顶部</a>
<!--锚链接
1.需要一个锚标记
2.跳转到标记
#
-->
<a href="#top">回到顶部</a>     //ip 的就是锚链接

邮件链接

邮件链接 href = "mailto:邮箱"

邮件链接:mailto:
QQ链接

<a href="mailto:2452467292@qq.com">点击联系我邮件</a>


</body>
</html>