【二】前端基础之HTML引入

【二】前端基础之HTML引入

  • Hyper Text Markup Language ，译作超文本标记语言，是一门标记语言，不是编程语言。所以它没有变量，也没有任何语句结构。

  • 所谓的超文本，就是超越了文本范畴的文档格式，普通文本只能显示文字，而超文本可以显示各种的媒体资源，例如：html网页，doc文档，xls文档等等。

  • 同时，HTML发展至今，一共经历6个版本：HTML1.0，HTML2.0，HTML3.0，HTML4.0，XHTML1.0，HTML5.0（现行）。

HTML在4.0版本（1999）时，W3C组织与浏览器厂商发生过一次分歧，W3C组织认为HTML作为标记语言，本身的语法不够严谨（就是乱写HTML代码也不会报错），所以发布了新的一门语法更加严谨的标记语言-XML，但是这门语言比HTML更加的复杂和难以使用，所以浏览器厂商要使用XML替代HTML，实际上需要耗费大量成本的，而且在当时全球有上百万的网站使用的都是HTML，所以如果直接从HTML转变到XML，很多公司是无法接受。

因此，在2000年时W3C推出了HTML转换成XML的过渡版本，就是XHTML1.0版本。这个版本既有HTML的语法，也兼顾了XML的部分语法，但是在XHTML2.0版本退出的时候，浏览器厂商与W3C闹翻了，浏览器厂商不跟W3C玩了，而是自己组织了一个新的HTML标准团队-WHATWG，发展HTML5.0版本。

在随后几年（2004）年，正式推出了HTML5.0试验版本，随后在2014年W3C迷途知返，重新与浏览器厂商的团队合并，在2014年重新发布了HTML5.0版本，同时也宣告了XML替代HTML计划失败，最终XML就慢慢变成了软件的配置文档，数据转换格式的结构，类似json的作用。

python3在出来的时候，实际上也会很多不愿意使用新版本，很多人停留在python2，因为python的开发离不开各种第三方模块，而如果升级到了python3，意味着很多的项目都需要把原来的语法改成python3，因为python2存在的时间跨度太大的历史原因，很多python2的模块已经没有人维护，项目要升级，必须模块也要升级，导致很多人不愿意去升级项目到python3，后续就推出了一个过渡版本python2.7，这个版本既兼容了python2的语法，也兼容了python3的语法。

  • html的代码必须编写到.html文档中。以.html或者.htm结尾的文件中。

.htm的出现是基于计算机发展的历史遗留问题，早期计算机的存储能力不强，所以针对文件名的命名存在了8.3规范：要求文件名必须在8个字符以内，文件后缀必须是3个字符以内。因为.html是4个字符，所以不符合8.3规范，因此改成了.htm，类似的情况，还有图片格式里面jpeg，在早期是jpg格式的。

  • 因为HTML网页属于浏览器端代码，所以不存在操作系统兼容问题，因此一套HTML代码可以任何操作系统下的浏览器下正常运行。

1.1 HTML网页基本结构

  • 1-html-第一个网页.html ，代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的网页标题</title>
</head>
<body>
    <h1>内容的标题</h1>
    <p>文章内容等</p>
</body>
</html>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的网页标题</title>
</head>
<body>
    <h1>大冷门！中国男排以3比0战胜世界排名第一的巴西男排</h1>
    <p>相信没有多少人能预料到这样一个结果，就在北京时间6月12日晚，在2022年世界男排联赛巴西利亚站最后一轮比赛中，没有任何心理压力的中国男排表现出不畏强敌的顽强作风和出众的技战术水平，近30年来国际赛场上第一次以3比0掀翻世界排名第一的东道主巴西男排，爆出本年度世界男排联赛一大冷门，得到全场最高的25分的主攻手张景胤更是成为中国最强攻击点。</p>
</body>
</html>

  • 代码说明：

    标签名 类型 描述
    <!DOCTYPE html> 单标签 告诉浏览器接下来所有的内容是HTML代码， 需要使用HTML解析器来识别。
    <html></html> 双标签 告诉浏览器，这对html标签里面的内容就是网页内容。
    <head></head> 双标签 告诉浏览器，这是html网页的头部信息，例如：网页标题，编码类型，网页关键字等....
    <body></body> 双标签 告诉浏览器，这是html网页的正文内容。
    <title></title> 双标签 属于head的子标签，告诉浏览器，这是html网页的网页标题。
    <meta charset="UTF-8" /> 单标签 告诉浏览器，这是一个utf-8编码的网页。

1.2 语法

  • HTML中的语法有2种：

    • 标签

    • 注释

1.2.1 注释

  • 不会被用户所看到，但是可以在浏览器中，通过鼠标右键->查看网页源代码，让开发人员查看。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- HTML的注释 -->
    <!-- h1表示大标题，一般 一个网页中只会出现1次，往往用于展示网站的标题，或者网络的logo -->
    <h1>h1标题</h1>
    <!-- p标签代表的就是一个文本段落，每一个段落就使用1个p标签，一篇文章可以有多个段落-->
    <p>内容段落</p>
</body>
</html>

1.2.2 HTML和XML语言的区别

1.2.2.1html的语法是不严格的

  • 在页面可以正常显示且不报错

  • 代码：

    <h1>内容标题</h1>
<p>内容</p>

  • 效果

  • 显示的是乱码，所以加入新的语句声明编码格式

  • 代码：

    <meta charset="utf-8">
<h1>内容标题</h1>
<p>内容</p>

  • 效果

  • 加入网页标题声明网页标题

    • 代码

      <title>网页标题</title>
<meta charset="utf-8">
<h1>内容标题</h1>
<p>内容</p>

    • 效果

  • 总结：即使代码有所缺少，有所改变，网页的显示也并没有改变。

1.2.2.2xml是一门比html语法更加严格的标记语言

  • <xml version="1.0" encoding="utf-8" >
    <goods>
        <title>一本书的标题</title>
        <price>79.5</price>
        <description>书的介绍</description>
        <comment>注意：除了上面第一行的xml标签以外，其他的标签都是开发人员自定义的，只需要标签成对闭合，如果不闭合就报错</comment>
    </goods>
    <goods price="79.5" description="书的介绍"> 一本书的标题 </goods>
</xml>

  • 如果代码没有闭合就会报错

1.2.3 标签

  • 标签[Tag]，表示HTML网页内容的一个最基本的组织单元，类似语文里面的标点符号，

    • 标签的作用就是告诉浏览器当前标签中的内容是有什么作用，要以什么格式进行展示的。

    • 标签从书写结构上分2种：

      • 单标签，格式：<标签名> 或者 <标签名 />。

      • 双标签。格式：<标签名>标签内容</标签名>。

    • 标签从组织结构上分2种：内容标签和结构标签。

      • 内容标签：主要包含和展示内容的，部分标签可以包含其他的内容标签。

      • 结构标签：主要用于包含其他标签，一般结构标签内部不会直接包含网页内容[文本、图片、视频、音频等]。

1.2.3.1 标签之单标签

  • 只有1个标签名的标签，就是单标签。

    • 书写格式：
        <标签名>
    <标签名 />
    <标签名 属性名="属性值"/>  
<!---
标签的属性有两种：
    + 普通属性：
          属性与属性值使用 = 号关联 ，属性值使用单引号或双引号圈住，建议使用双引号。
    + 布尔属性：
          只有属性名，没有属性值。当标签里面写上这个属性名，则其值就是True，标签没有属性名，则为False
----->

  • 常见的单标签

    标签名 描述
    <meta> 元信息标签
    <link> css外观样式的外链引入标签，类似python中的import，可以导入css代码到html文档中
    <img> 图片标签
    <input> 输入框标签
    <br /> 换行标签，浏览器默认是不识别HTML源码文件中的换行与空格的，所以需要使用br标签告诉浏览器在什么位置需要换行。
    <hr> 分割线标签，代表分割内容的一条横线，代表前面的内容已经结束了，横线下方的内容与上方内容没有关联。

1.2.3.2 标签之双标签

  • 成对标签名出现，有开始标签与结束标签的，就是双标签。

    • 书写格式：
    <标签名></标签名>
<标签名 属性名="属性值" 属性名></标签名>

  • 常见的双标签

    标签名 描述
    <h1></h1> 网页的一级标题
    <h2></h2> 网页的二级标题
    ...
    <h6></h6> 网页的六级标题
    <p></p> 网页的段落
    <a></a> 网页超链接
    <div></div> 块级结构标签
    <span></span> 行级结构标签
    <form></form> 表单标签，表示网页的一个提供给用户输入数据的表单
    <ul></ul> 无序列表结构标签，表示网页的一个内容列表
    <li></li> 列表项目标签
    <table></table> 表格标签，表示网页的一个表格

1.3 常见标签使用

1.3.1 标题和段落

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- HTML中的标签是HTML语法提供的，所以每一个标签都是固定标签名 -->
    <h1>h1标题:常用于网站的logo，网站标题</h1>
    <h2>h2标题:常用于网站的板块标题、栏目标题</h2>
    <h3>h3标题:常用于网站的板块标题、栏目标题</h3>
    <h4>h4标题:常用于网站的附加板块标题，或者文章的标题</h4>
    <h5>h5标题:更小级别的标题，基本用不到</h5>
    <h6>h6标题:更小级别的标题，基本用不到</h6>
    <p>p->段落：Hyper Text Markup Language</p>
</body>
</html>

1.3.2 标签的属性

  • 标签的作用就是用于展示内容，但是内容有时候并非文本，而且文本的展示需要附加一些额外效果时，就需要使用标签的属性来声明。

  • 不管是什么标签，都有属性[Attribute]。

  • 标签的属性有两种：

    • 普通属性：

      属性与属性值使用 = 号关联 ，属性值使用单引号或双引号圈住，建议使用双引号。

    • 布尔属性：

      只有属性名，没有属性值。当标签里面写上这个属性名，则其值就是True，标签没有属性名，则为False

<!DOCTYPE html>
<html lang="en"> <!-- lang 就是HTML标签的属性，代表当前网页的默认语言language：en表示 english -->
<head>
    <meta charset="UTF-8"> <!-- charset，是meta元信息标签的属性，表示当前网页的编码是utf-8 -->
    <title>Title_python学习网页</title>
</head>
<body>
    <!-- 双标签的属性 -->
    <!--
    align：文本的水平对齐方式：left左[默认值],center中,right右
    title：表示当前标签的补充提示，当用户把鼠标放在当前标签上方则自动title属性的值
    -->
    <h1 align="left" title="提示文本">h1标题:常用于网站的logo，网站标题</h1>
    <h2 align="center" title="用于提示而已">h2标题:常用于网站的板块标题</h2>
    <h3 align="right">h3标题:常用于网站的板块标题</h3>
    <h4>h4标题</h4>
    <h5>h5标题</h5>
    <h6>h6标题</h6>
    <p align="center" title="用于提示而已">p->段落：Hyper Text Markup Language</p>

    <!-- 单标签的属性：单标签是没有内容的，所以需要依赖于属性来展示对应的内容 -->
    <img src="./goods.png"> <!-- src就是用于展示图片的内容 -->
    <input type="number">   <!-- 输入框标签[数值输入框]，number表示只允许当前输入框中只能输入数值 -->
    <input type="password"> <!-- 输入框标签[密码输入框]，password表示当前输入任何内容都是密码，所以不会展示出来  -->
    <input type="text">     <!-- 输入框标签[单行文本输入框]，text表示只允许用于输入一行内容内容，不能回车换行 -->
    <input type="datetime-local"> <!-- 时间输入框，只需要用户输入时间日期 -->
</body>
</html>

1.3.3 换行、分割与超链接

  • 换行：<br />
    • 换行标签，浏览器默认是不识别HTML源码文件中的换行与空格的，所以需要使用br标签告诉浏览器在什么位置需要换行。
  • 分割：<hr>
    • 分割线标签，代表分割内容的一条横线，代表前面的内容已经结束了，横线下方的内容与上方内容没有关联。
  • 超链接：
    • 超链接标签：页面跳转、下载文件、调用或唤醒系统程序（少见）
<!DOCTYPE html>
<html lang="en"> <!-- lang 就是HTML标签的属性，代表当前网页的默认语言language：en表示 english -->
<head>
    <meta charset="UTF-8"> <!-- charset，是meta元信息标签的属性，表示当前网页的编码是utf-8 -->
    <title>Title_python学习网页</title>
</head>
<body>
    <h1>将进酒</h1>
    <a href="https://baike.baidu.com/item/将进酒">李白</a>
    <p>君不见黄河之水天上来，奔流到海不复回。<br>
    君不见高堂明镜悲白发，朝如青丝暮成雪。<br><br>
    人生得意须尽欢，莫使金樽空对月。<br>
    天生我材必有用，千金散尽还复来。<br>
    烹羊宰牛且为乐，会须一饮三百杯。<br>
    岑夫子，丹丘生，将进酒，杯莫停。<br>
    与君歌一曲，请君为我倾耳听。<br><br>
    钟鼓馔玉不足贵，但愿长醉不愿醒。<br>
    古来圣贤皆寂寞，惟有饮者留其名。<br>
    陈王昔时宴平乐，斗酒十千恣欢谑。<br>
    主人何为言少钱，径须沽取对君酌。<br><br>
    五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。</p>
    <hr>
    <h2>译文</h2>
    <p>你难道没有看见吗？那黄河之水犹如从天上倾泻而来，波涛翻滚直奔大海从来不会再往回流。<br>
    你难道没有看见，在高堂上面对明镜，深沉悲叹那一头白发？早晨还是黑发到了傍晚却变得如雪一般。<br>
    人生得意之时就要尽情的享受欢乐，不要让金杯无酒空对皎洁的明月。<br>
    上天造就了我的才干就必然是有用处的，千两黄金花完了也能够再次获得。<br>
    且把烹煮羔羊和宰牛当成一件快乐的事情，如果需要也应当痛快地喝三百杯。<br>
    岑勋，元丹丘，快点喝酒，不要停下来。<br>
    我给你们唱一首歌，请你们为我倾耳细听。<br>
    山珍海味的豪华生活算不上什么珍贵，只希望能醉生梦死而不愿清醒。<br>
    自古以来圣贤都是被世人冷落的，只有会喝酒的人才能够留传美名。<br>
    陈王曹植当年设宴平乐观，喝着名贵的酒纵情地欢乐。<br>
    你为何说我的钱不多？只管把这些钱用来买酒一起喝。<br>
    名贵的五花良马，昂贵的千金皮衣，叫侍儿拿去统统换美酒，让我们一起来消除这无尽的长愁！
    </p>
</body>
</html>
  • 超链接有2种常用用法：
    • 页面跳转
    • 下载文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--页面跳转: 如果href的值是网络地址，可以跳转到跳转到指定的网页-->
    <a href="http://www.baidu.com">跳转到百度</a>
    <!--页面跳转: 如果href的值是本地地址，则可以跳转到本地的内部网页 -->
    <a href="11-超链接页面.html">跳转到本地页面</a>
    <!-- 下载资源：当href的值是一个浏览器无法直接展示的内容格式时，浏览器会自动下载当前路径对应的内容 -->
    <a href="./html.chm">点击下载手册</a>
    <!-- 下载资源：当href的值是一个浏览器可以直接识别并展示的内容格式时，用户可以鼠标右键，对当前href的数值的内容进行另存为下载 -->
    <a href="./goods.png">点击下载图片[鼠标右键,另存为]</a>
</body>
</html>

实际上页面跳转也是属于下载文件。因为用户能在浏览器里面看到的所有内容，实际上都是经过浏览器下载到本地，用户才能看到的。我们可以通过 F12 -> 打开开发者工具 -> network（网络）

1.3.4 列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
    无序列表, unordered list，简写: ul
    列表的单项  list item 简写：li
    -->
    <ul type="circle">
        <li>列表的第一项</li>
        <li>列表的第二项</li>
        <li>列表的第三项</li>
    </ul>

    <!--
    有序列表, ordered list，简写：ol
    列表的单项  list item   li
    -->
    <ol>
        <li>列表的第一项</li>
        <li>列表的第二项</li>
        <li>列表的第三项</li>
    </ol>

    <!--
    和任何一个双标签一样，标签内部可以嵌套的标签来使用。
    -->
    <ul>
        <li>
            <p>第一章：开端</p>
            <ul>
                <li>第一节：下山</li>
                <li>第二节：命案</li>
                <li>第三节：奇遇</li>
                <li></li>
                <li></li>
            </ul>
        </li>
    </ul>

    <dl>
       <dt>赵本山</dt>
       <dd>春晚常驻选手，国内一线大品牌</dd>
       <dd>乡村爱情故事，二人转，小品</dd>
       <dt>小明</dt>
       <dd>国内所有小朋友的同学，每次都从教室里面滚出去的哪一个。</dd>
    </dl>

    <menu>
        <li>首页</li>
        <li>商品分类</li>
        <li>购物狂欢节</li>
        <li>会员中心</li>
    </menu>
</body>
</html>

1.3.5 表单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <!-- 表单/
    <form>    表单标签，告诉浏览器，form内部的所有输入标签都是表单的内容，后面一并提交。
         action  表单数据提交的服务器地址

    <input>   输入标签/输入框/输入按钮
         type 设置输入框的类型
              text      告诉浏览器，当前input属于单行文本框
              password  告诉浏览器，当前input属于密码框
              file      告诉浏览器，当前input属于上传文件框
              submit    告诉浏览器，当前input输入提交表单的提交按钮
              radio     告诉浏览器，当前input属于单选框
              checkbox  告诉浏览器，当前input属于多选框
              reset     告诉浏览器，重置当前表单的数据
    <select>  下拉列表
          option    告诉浏览器，这是下拉列表中的其中一个选项
    textarea  多行文本框
          cols  设置框的列数[宽度]
          rows  设置框的行数[高度]

    -->
    <h2>登录表单</h2>
    <form action="">
        登录帐号：<input type="text"><br><br>
        登录密码：<input type="password"><br><br>
        <input type="submit" value="登录">
    </form>

    <h2>百度搜索</h2>
    <form action="http://www.baidu.com/s">
        <input type="text" name="wd">
        <input type="submit" value="百度一下">
    </form>

    <h2>注册表单</h2>
    <form action="">
        账户：<input type="text" name="username"><br><br>
        密码：<input type="password" name="password"><br><br>
        邮箱：<input type="emai" name="email"><br><br>
        姓别：<label><input type="radio" name="sex" value="1">男</label>
             <label><input type="radio" name="sex" value="0">女</label> <br><br>
        爱好：
             <label><input type="checkbox" name="lve" value="swimming">游泳</label>
             <label><input type="checkbox" name="lve" value="pc_game">电脑游戏</label>
             <label><input type="checkbox" name="lve" value="card">卡牌游戏</label>
             <label><input type="checkbox" name="lve" value="wark">爬山</label>
        <br><br>
        所在城市：
            <select name="province">
                <option value="">广东</option>
                <option value="">广西</option>
                <option value="">湖南</option>
                <option value="">湖北</option>
                <option value="">河南</option>
                <option value="">河北</option>
                <option value="">北京</option>
                <option value="">天津</option>
                <option value="">重庆</option>
                <option value="">上海</option>
            </select>
            <select name="city">
                <option value="">广州</option>
                <option value="">佛山</option>
                <option value="">深圳</option>
            </select>
        <br><br>
        备注：<br>
        <textarea name="remark" cols="60" rows="10"></textarea><br><br>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>
</body>
</html>

1.3.6 表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--基础单元格-->
    <table border="1">
        <tr>
            <td>1行1列</td>
        </tr>
    </table>

    <!-- 第二个：多行的表格 -->
    <table border="">
        <tr>
            <td>1行1列</td>
            <td>1行2列</td>
        </tr>
        <tr>
            <td>2行1列</td>
            <td>2行2列</td>
        </tr>
    </table>
    <!-- 第三个：有表头的表格 -->
    <table border="0" align="center" width="300px;">
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>001</td>
            <td>小龟龟</td>
            <td rowspan="2">13</td>
            <td>男</td>
        </tr>
        <tr>
            <td>002</td>
            <td>小红红</td>
            <td>女</td>
        </tr>
        <tr>
            <td>003</td>
            <td colspan="3">17的小男孩</td>
        </tr>
    </table>
</body>
</html>

1.3.7 媒体标签

  • img 图片
  • audio 音频
  • video 视频
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的网页标题</title>
    </head>
    <body>
        <!-- 图片 -->
        <img src="../素材/1.png" width="400px" height="400px">

        <!-- 音频-->
        <audio controls>
            <source src="../素材/horse.ogv" type="audio/ogg">
        </audio>
        <!-- 视频 -->
        <video width="600px" controls autoplay src="../素材/movie.ogv"></video>
    
    </body>
</html>

1.3.8 实体字符

实体符号 实体编码
< <
> >
空格
& &
" "
× ×
÷ ÷
© ©
® ®

w3c中文网:


__EOF__

本文作者：Chimengmeng
本文链接：https://www.cnblogs.com/dream-ze/p/17524689.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   Chimengmeng  阅读(42)  评论(0)  编辑  收藏  举报
相关博文：
·  Day01 1.2、HTML基础
·  day 05 5.1 前端基础之HTML
·  web前端基础
·  第一篇 html - 基础 - 【 发展史 + 概述 】
·  前端学习之html(一）
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~
点击右上角即可分享
微信分享提示
SQL AI 助手