HTML基础

最新推荐文章于 2023-07-28 17:44:43 发布

小小马同学

最新推荐文章于 2023-07-28 17:44:43 发布

阅读量103

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/weixin_42093672/article/details/103571240

版权

前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍了HTML的历史、优势及基本结构，涵盖了从HTML1993年诞生至HTML5的发展历程，解析了W3C标准的重要性，并详细展示了常用HTML标签如标题、段落、图像等的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML基础

1.什么是HTML？

HTML:HyperText Markup Language（超文本标记语言）
文本：文字，有格式的文本
超文本：文字，图片，音频，动画…
标记语言：<>

2.HTML的发展史

HTML 1993年
HTML2.0 1995年
HTML3.2 1996年（W3C推荐标椎）
HTML4.0
HTML4.01 （微小改进）
XHTML1.0 2000年
XHTML2.0 由于改动过大，学习成本高了，胎死腹中！
HTML5 （最新版） 2004 2007正式纳入新成立的HTML工作团队！
2013 HTML 5.1 草案~

3.HTML的优势

所有知名浏览器厂商都支持！
微软
Google
苹果
Opera
Mozilla firefox
很多杂的浏览器，并不支持 HTML5
市场的需求
- 市场需要一个统一的标准：（扩大）技术的本质：赚钱（发展）
- Web兼容性问题。修改bug都需要大量的时间！
跨平台（浏览器） B/S
- 天然存在的，因为是B/S开发 PC、移动站、等等所有的都是天然支持！

4.W3C标准

W3C：万维网联盟

万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。
W3C标准

结构化标准（XHTML、HTML）
表现标准（CSS）
行为标准（Dom、ECMAScript标准==> JavaScript）

5.HTML基本结构

<!--<!DOCTYPE html>DOCTYPE默认声明：表示告诉浏览器网页使用的是什么规范，我们默认是html-->
<!DOCTYPE html>
<!--所有的HTML标签都是以<>开始以</>结束的-->
<!--正常网页的所有内容都需要放在<body>标签中-->
<html lang="en">
<head>
    <!--<meta>描述信息-->
    <meta charset="UTF-8">
    <!--<title>标签表示网站的小标题-->
    <title>我的第一个HTML</title>
</head>
<body>
<!--<body>标签，正常网页的所有信息都放在这里-->
</body>
</html>

6.网站的基本标签

1.标题标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签</title>
</head>
<body>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
</body>
</html>

2.段落标签

<p>这里是需要输入的段落</p>

3.水平线标签

<hr/>

4.换行标签

<br/>

5.字体样式标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式标签</title>
</head>
<body>
    <p>
        <em>斜体</em><br/>
        <strong>加粗</strong>
    </p>


</body>
</html>

6.特殊符号标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特殊符号标签</title>
</head>
<body>
    <p>
        <!--空格-->
        &nbsp;<br>
        <!--大于跟小于号-->
        &gl;大于 <br>
        &lt;小于 <br>
        <!--版权符号-->
        &copy; <br>
        <!--特殊符号以&开始&-->
    </p>
</body>
</html>

7.图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
    <!--
           src:图片的路径
           alt:图片加载失败时对图片的描述信息
           title：鼠标放在图片上时的显示话语
           width:图片的长
           height：图片的宽

    -->

    <img src="../statics/img/tx2.jpg" alt="图像图片"   title="点击一下" width="100" height="100" >
</body>
</html>

8.超链接标签

基本使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接基本使用</title>
</head>
<body>
    <p>
        <!--
        超链接：表示从一个地方跳转到另一个地址
        href:跳转的地址
        target：目标打开的窗口
               _blank在新窗口打开
               _self在自己的窗口打开
        可以与图片一起使用
        -->
        <a href="https://www.baidu.com/"   target="_self">
            <img src="../statics/img/tx.jpg" >
        </a>
    </p>
</body>
</ht

锚链接：

用于页面间指定位置跳转：快速定位目录
可以在同一页页面中跳转
也可以在不同页面中跳转：（需要掌握）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚点</title>
</head>
<body>

<p>
    <!--跳转到标记-->
    <a href="#makerA"> A </a> <br>
    <a href="#makerB"> B </a> <br>
</p>
<p>
    <!--做标记-->
    <a name="makerA"> A </a> <br>
    <a name="makerB"> B</a><br>
</p>
</body>
</html>

功能性标签:

邮件链接：

<a href="mailto:24736743@qq.com">联系我们</a>

借助第三方平台：


<!--QQ推广-->
<!--https://shang.qq.com/v3/widget.html-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=24736743&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:24736743:53" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>