HTML5快速上手笔记--------------------------持续更新

学习视频,[狂神说Java]HTML5

一、初识HTML

一)、什么是HTML?

1、HTML

  • Hyper Text Markup Language(超文本标记语言)

    超文本包括:文字、图片、音频、视频、动画等

2、HTML5的优势

  • 世界知名浏览器厂商对HTML5的支持
    • 微软
    • Google
    • 苹果
    • Opera
    • Mozilla
  • 市场的需求
  • 跨平台

3、W3C标准

  • W3C
    • World Wide Web Consortium(万维网联盟)
    • 成立于1994年,Web技术领域最权威和最具影响力的国际中立性技术标准机构
    • http://www.w3.org/
    • http://www.chinaw3c.org/
  • W3C标准包括
    • 结构化标准语言(HTML、XML)
    • 表现标准语言(CSS)
    • 行为标准(DOM、ECMAScript)

4、常见IDE

  • 记事本
  • Dreamweaver
  • IDEA
  • WebStorm
  • ……

5、HTML基本结构

<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    我的第一个网页
</body>
</html>

image-20210301213616063

< body > < /body >等成对的标签,分别叫开放标签和闭合标签
自闭合标签:单独呈现的标签(空元素),如 < hr/ >;意为用 / 来关闭空元素

6、注释

<!-- 注释 -->

在这里插入图片描述

<!-- DOCTYPE:告诉浏览器,我们要用什么规范 -->

<!DOCTYPE html>
<html lang="en">
<!-- head标签代表网页头部 -->
<head>
    <!--meta描述性标签,它用来描述网站的一些信息-->
    <!--meta一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="keywords相当于网站的关键词描述">
    <meta name="description" content="description描述来这个地方干啥">

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

二、网页基本标签

1、块元素

  • 无论内容多少,该元素独占一行
  • (p,h1-h6…)

2、行内元素

  • 内容撑开宽度,左右都是行内元素的可以排在一行
  • (a,strong,em…)

具体有哪些标签怎么分类,我还不清楚,暂时无法分类

  • 标题标签
  • 段落标签
  • 换行标签
  • 水平线标签
  • 字体样式标签
  • 注释和特殊符号
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>

<!--标题标签 <h1></h>-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--段落标签 <p></p>-->

<p>我爱得忘乎所以,</p>
<p>高歌敞开心扉。</p>
<p>像大地一样忠诚,</p>
<p>像天空一样爱人。</p>
<p>我把自己甩掉,</p>
<p>我把自己忘了。</p>
<p>心灵只要</p>
<p>我情人的爱情。</p>

<!--水平线标签-->
<hr/>

<!--换行标签:<br/>,
换行标签的本质上还是一个段落,只不过换行了,每一行显得紧凑
不像<p></p>段落标签显得每一行中间有间隙-->
我爱得忘乎所以,<br/>
高歌敞开心扉。<br/>
像大地一样忠诚,<br/>
像天空一样爱人。<br/>
我把自己甩掉,<br/>
我把自己忘了。<br/>
心灵只要<br/>
我情人的爱情。<br/>

<!--字体样式标签:粗体,斜体-->
<h1>字体样式标签</h1>
粗体:<strong>这是粗体</strong>
斜体:<em>这是斜体</em>
<br/>

<!--特殊符号
&转义字符
空格:&nbsp;
大于:&gt;
小于:&lt;
版权符号:&copy;
-->
空   格 <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/>

大于符号:&gt; <br/>
小于符号:&lt; <br/>
版权符号:&copy; <br/>

</body>
</html>

image-20210306140246347

三、图像,超链接,网页布局

1、图像标签

<img src="path" alt="text" title="text" width="x" height="y" />
<!--
src:图像的地址
alt:图像的替代文字
title:鼠标悬停提示文字
width:图像宽度
height:图像高度
-->
  • 常见的图像格式
    • JPG
    • GIF
    • PNG
    • BMP
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--
src:图片地址
    相对地址:../resources/images/戴拿的肯定.jpg
    绝对地址:F:\代码\HTML\resources\images\戴拿的肯定.jpg
    ../ 上一级目录
alt:图像的替代文字(必填)
title:鼠标悬停提示文字
width:图像宽度
height:图像高度

-->

<img src="../resources/images/戴拿的肯定.jpg" alt="戴拿的肯定" title="鼠标放在图片上就显示文字" width="300" height="300"><br/>
<img src="../resources/images/迪迦.jpg" alt="迪迦的肯定" title="鼠标放在图片上就显示文字" width="300" height="300">

</body>
</html>

image-20210306161823568

image-20210306142213754

2、链接标签

  • 文本超链接
  • 图像超链接页面间链接

1)、从一个页面链接到另一个页面

<a href="path" target="目标窗口位置">链接文本或图像</a>
<!--

href="path":链接路径
target="表示窗口在哪里打开":链接在哪个窗口打开,目标窗口位置常用值_self、_blank

-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--
herf:必填,表示要跳转到哪个页面
target:表示窗口在哪里打开
    _blank  在新标签中打开
    _self   在自己的网页中打开
-->
<a href="1.我的第一个网页.html" target="_blank">跳转到页面一</a>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>
<br/>

<a href="1.我的第一个网页.html">
    <img src="../resources/images/戴拿的肯定.jpg" alt="戴拿的肯定" title="鼠标放在图片上就显示文字" width="300" height="300"><br/>
</a>

</body>
</html>

20210306_150328 00_00_00-00_00_30

2)、锚链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚链接</title>
</head>
<body>
<!--锚链接
1.需要一个锚标记
2.跳转到标记
用井号#
-->
<!--使用name作为标记-->

<h3>
    <a name="top">天真的预言</a>
</h3>

<p>从一粒细沙中窥探世界</p>
<p>在一朵野花里寻觅天堂</p>
<p>掌中握无限</p>
<p>霎那成永恒</p>
<p>当真理被恶意利用时</p>
<p>比一切臆造的谎言狰狞</p>
<p>现实本来就这样</p>
<p>人生来就要面对快乐和悲惨</p>
<p>只要能明了这一点</p>
<p>我们就不会再受伤害</p>
<p>将快乐和忧伤编织</p>
<p>披在我神圣的心上</p>
<p>穷人手里的一个铜板</p>
<p>抵得上非洲海岸的所有黄金</p>
<p>从劳动者手里砸取的一丁点钱</p>
<p>能买的下守财奴的所有土地</p>
<p>如果得到上帝的庇护</p>
<p>甚至可以买卖国土的全部</p>
<p>谁曾嘲笑纯真的信念</p>
<p>他将被岁月和死亡讥讽</p>
<p>谁要动摇纯真的信念</p>
<p>他将永远被埋葬在陈腐的墓穴中</p>
<p>谁能尊重纯真的信念</p>
<p>他将战胜地狱和死亡</p>
<p>如果不相信自己的眼睛</p>
<p>将永远不懂得去信任,请随心而行</p>
<p>如果太阳和月亮心存猜疑</p>
<p>它们将会转瞬消失</p>
<p>被激情围绕就能拥有美好</p>
<p>情欲攻心则会迷失自我</p>
<p>每一个夜晚,每一个清晨</p>
<p>有人生来就为不幸伤神</p>
<p>每一个清晨,每一个夜晚</p>
<p>有人生来就被幸福拥抱</p>
<p>有人生来就被幸福拥抱</p>
<p>有人生来就被长夜围绕</p>
<p>如果不是亲眼所见</p>
<p>我们就会相信谎言</p>
<p>谎言在黑夜里生灭</p>
<p>灵魂在光芒中休眠</p>
<p>对挣扎在黑暗中的人</p>
<p>上帝散发出光明</p>
<p>对生活在白昼的人</p>
<p>上帝幻化为人性</p>

<a href="#top">回到诗的标题</a>
<br/>
<a name="down">诗的末尾</a>


</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用锚链接跳转到另一个页面的指定位置</title>
</head>
<body>

<a href="4.1.锚链接.html#down">跳转到天真的语言诗的末尾</a>

</body>
</html>

20210306_155231 00_00_00-00_00_30

注意:

  • 无论是图片还是网页,一定要注意其地址

image-20210306155606603

3)、功能性链接

…待定,还没想好写些什么

四、列表,表格,媒体元素

还在学习中,待定…

五、表单及表单应用

还在学习中,待定…

六、表单初级验证

还在学习中,待定…

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页