初识HTML

目录

 

1.  什么是HTML

2.  W3C标准

3.  网页基本信息

4. 基本标签

5.  图像标签

 6.  连接标签

超链接

 

1.  什么是HTML

HTML

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

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

2.  W3C标准

W3C

        World Wide Web Consortium (万维网联盟)

成立于1994年，Web技术领域最权威和最具影响力的国际中立性技术标准机构

W3C标准包括

机构化标准语言（HTML、XML）

        表现标准语言（CSS）

行为标准（DOM,ECMAScript(Java)）

创建HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">-------->网页头部
    <title>Title</title>
</head>

<body>
    我的第一个网页     ------>主体部分
</body>

</html>

         <body>、</body>等成对的标签，分别叫开放标签和闭合标签

        单独呈现的标签（空元素），如<hr/> ; 意为用  /  来关闭元素

 

3.  网页基本信息

<!--DOCTYPE 告诉浏览器，我们要使用的规范 -->
<!--head标签代表网页头部-->
<!-- meta描述性标签，它用来描述网站的一些信息-->
<!-- meta一般用来做SEO-->
<!--title网页标题-->
<!--body  标签代表网页主体-->

SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。

<meta name="keywords" content="狂神说Java，西部开源">    keyword为关键字
<meta name="description" content="用来学java">      description为描述声明   content为内容

6f38d31546e343709645af08e17148ce.png

效果，我的第一个网页为标题，helloword是内容

 

94c49970bb674eef928e70faa97da85e.png

页面源码

4. 基本标签

  • 标题标签
  • 段落标签
  • 换行标签
  • 水平线标签
  • 字体样式标签
  • 注释和特殊符号
<!--标题标签-->
<hr>
<h1>一级标签</h1>
<h2>二级</h2>
<h3>三级</h3>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级</h6>
<hr>
<!--段落标签-->
<p>基地基地啊</p>
<p>是底层技术VS嫩绿</p>
<p>南开精神的那份你是</p>
<!--水平线-->
<hr>
<!--换行标签-->
虽说大多数人工作都是为了钱<br/>，但钱确实不是工作的全部。<br/>高薪但996的工作未必比得上薪资低但轻松的工作<br/>。此外，<br/>工作意义、个人爱好、团队氛围、领导魅力、人际关系、晋升渠道等等，<br/>都是影响一份工作的重要因素。<br/><hr>
<!--粗体，斜体-->
粗体：<strong>i love abcderf</strong>
斜体：<em>i love abcderf</em>
<hr><br>
<!--特殊符号-->
空格：<br>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br>
大于符号：&gt;
小于符号：&lt;
<br/>
版权符号：&copy;版权所有

 

22f7cab6e3414976b163943104dee9e1.png

效果

 

5.  图像标签

常见图像标签

  • JPG
  • GIF
  • PNG
  • BMP
  1. 新建一个目录命名为resources为资源包；
  2. 在resources目录下新建一个image目录；
  3. 把要写入的图片复制到此目录；
  4. <img src="../resources（上级目录）/image（图片所在目录）/1.jpg（图片）" alt="图片加载失败返回的提示"title="悬停内容"width="500"height="800">（长宽之类的属性可以自行添加）

a797807f732740c3a07e6d46983d5bae.png

效果

 6.  连接标签

c3d999149d9f489a8b07d1ce5416e104.png

  •  超文本链接
  • 图像超链接
<!--a标签
href:必填，表示要跳转到的那个页面
target:表示窗口在哪里打开
        _blank  在新标签中打开
        _self   在自己的网页打开
-->
<a href="1.我的第一个网页.html" target="_blank">
  点我跳转到页面 <br>
</a><br>
<a href="https://www.baidu.com">
  <img src="../resources/image/2.jpg" alt="狗跑了。。。"title="小柯基"width="300"height="200">
<br>
  点我跳转到百度</a><br>

251f801f1cbe4e6b8ac17f438b99b9ed.png

效果

 

超链接

  • 页面间链接（从一个页面连接到另一个页面）
  • 锚链接
  • 功能链接
<!--锚链接
1.需要一个锚标记
2.跳转到标记
通过#跳到标记
-->
<a href="#top">回到顶部</a>
<a name="down">底部</a>

1723d9801493466c84b6c711633de31d.png

效果

 点击回到顶部就会返回顶部，也可以页面间的跳转，需要在要跳转的页面做标记。

<!--功能性标签
邮件链接：mailto:
QQ链接：
-->
<a href="mailto:3339332352@qq.com">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=3339332352&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:3339332352:51" alt="加我聊天" title="加我聊天"/></a></body>

32105cea591241c490820ef7802b4a8b.png

 点击“点击联系我或”或图片即可打开QQ。

 

 

posted @ 2022-05-02 20:00  Fiercezm  阅读(54)  评论(0)    收藏  举报  来源