HTML（Hyper Text Markup Language超文本标记语言）用特殊的一种标签把需要特殊展示出来的内容圈起来。
这就是标记语言
语法规则

<标记>被标记的内容</标记>

<标记/>

巨大的坑。在以前2000年左右。那个时候语法规则不够规范。有些人写HTML的时候习惯性的漏掉括回
文本：文字，字符串，符号。超文本：图片，音乐，小视频.
超文本标记语言：通过标记的形式来展示一段超文本内容（包含文本，字符串，视频，音频，图片〕
今天的浏览器端你们看到的所有的网站都离不开HTML语言(查看网页源代码)

HTML的语法规则：

<大>被标记的内容</大>

<大><紅>周杰伦</紅></大>結婚生子

周杰伦的下一张专辑明天上线.<图片 图片的地址/>

xjhfjkladsjklfasd kflksadhjkldf

fadslfjdlsa jfas

dfhjkadsh fads

网页架构介绍

<!DOCTYPE html>     <!--文档类型-基于HTML5的标准    老的是xxxxxxxxx 4.01标准 -->

<html lang="en">    <!--html开始 标签属性lang="en"-->

    <head>      <!--头-->

        <meta charset="UTF-8">      <!--字符集-->

        <title>标签页的标题</title>        <!--标签页的标题-->

    </head>     <!--头结束-->

    <body>      <!--网页上给用户展示的内容。爬虫内容99%都从这里获取-->

    </body>     <!--内容结束-->

</html>         <!--html结束-->

标题和段落介绍

标题标签<h1>——<h6>：一级标签——六级标签

标题效果：变大了、变粗了、独占一行了

标签号越小，标签字越大

<h6>以后的都不生效<h7><h8>和没加一样

换行可以用<br></br>

段落可以用<p></p>

浏览器会特殊对待p标签

自动的给p标签换行，还会添加外边距（段间距）

案例代码

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>古诗词鉴赏</title>    <!--标签页显示的文字-->

    </head>

    <body>

    <h1>咏柳</h1>

    <p>碧玉妆成一树高，</p>

    <p>万条垂下绿丝绦。</p>

    <p>不知细叶谁裁出，</p>

    <br>二月春风似剪刀。</br>

    </body>

</html>

网页效果展示

文字处理

字体变大、变颜色：  <font size="7" color="red">万条</font>  #已经被css架构替代

字体变大、变颜色：  <span style="font-size: 1cm;color: blue">不知</span>  #css架构的字体调整方法

加粗：        <b>二月</b>

斜体：        <i>碧玉</i>

下划线：       <u>一树高</u>

多标签相互嵌套：   <p><font size="7" color="red"><u><i><s>咏柳</s></i></u></font></p>

其他的标签可以通过word去查询了解

案例代码

<body>

    <p><font size="7" color="red"><u><i><s>咏柳</s></i></u></font></p>

    <p><i>碧玉</i>妆成<u>一树高</u>，</p>

    <p><font size="7" color="red">万条</font>垂下绿丝绦。</p>

    <p><span style="font-size: 1cm;color: blue">不知</span>细叶谁裁出，</p>

    <br><b>二月</b>春风似剪刀。</br>

</body>

网页效果展示

关于列表

有标签序号的列表

    <ol>

        <li>第1句话</li>

        <li>第2句话</li>

    </ol>

没有标签序号的列表

<ul>

    <li>第1句话</li>

    <li>第2句话</li>

</ul>

自定义列表

<dl>

    <dt>国内明星</dt>

    <dd>XXX</dd>

    <dt>国际明星</dt>

    <dd>XXX</dd>

</dl>

案例代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <!--正常情况下.ol和ul里面放的是li,爬虫要找li-->

    <!--ol是有序列表-->

    <ol>

        <li>第1句话</li>

        <li>第2句话</li>

        <li>第3句话</li>

        <li>第4句话</li>

        <li>第5句话</li>

    </ol>

    <!--ul是有序列表-->

    <ul>

        <li>第1句话</li>

        <li>第2句话</li>

        <li>第3句话</li>

        <li>第4句话</li>

        <li>第5句话</li>

    </ul>

    <!--正常情况下.dl里面放的是dt和dd,爬虫要找dt和dd-->

    <!--dl是自定义列表-->

    <dl>

        <dt>国内明星</dt>

        <dd>于根伟</dd>

        <dd>范志毅</dd>

        <dd>姚明</dd>

        <dt>国际明星</dt>

        <dd>梅西</dd>

        <dd>C罗</dd>

        <dd>内马尔</dd>

    </dl>

</body>

</html>

网页效果展示

注意：不论列表本来的样子是什么样，未来我们从网页上看到的样子都是被css框架魔改过的，很可能是动态展示的页面。

路径

  1. 相对路径

    • ./ 当前或者不写

    • ../ 上一级

  2. 绝对路径

    • 一个固定得链接地址(如域名)

    • 从根磁盘一直到你的文件得路径

超链接

超链接:<a></a>

<a>给用户展示的文字或者图片</a>

target：链接展示的方式

    _blank，在新窗口展示

    _self，在当前窗口展示

    如果不写,默认是当前窗口

href：链接被触发时，浏览器跳转的url地址(必须要记住！！！)

href中给的不一定是完整的url地址,可以是相对地址(本地路径),可以是绝对地址(互联网地址)

<a href="../../第一个网页.html">可以跳转到自己的网页</a>

案例代码

<a href="目标URL地址，点击后跳转">给用户展示的文字或者图片</a>

<a href="www.baidu.com" target="_blank">点击我啊,点我访问百度</a>

<a href="第一个网页.html">可以跳转到自己的网页</a>

图片

图片

    <img src="路径/文件名" alt="替代文本">

    <img src="路径/文件名" alt="替代文本" />

    这种写法是为了符合XML的语法，同时也是HTML5规范的一部分。在HTML5中，这样的自闭合标签是有效的，并且更加清晰地表达了元素的结束。然而，需要注意的是，并非所有的HTML元素都可以使用自闭合的形式，只有空元素才可以。<img> 就是一个空元素，因为它没有内容。

    总的来说，是否使用自闭合的形式取决于个人偏好和代码风格，两种写法都是有效的。

    路径地址:src="图片路径"

    src: 这是指定图像文件的路径的属性。可以是相对路径（相对于当前HTML文件的位置）或绝对路径（完整的文件路径或URL）。

    替代文本:<img src="路径/文件名" alt="替代文本">

    alt: 这是替代文本的属性，用于在图像无法加载时显示。替代文本也对可访问性很重要，因为屏幕阅读器会朗读替代文本，使得使用辅助技术的用户能够理解图像的内容。

    alt只有图片加载中的时候才显示的.

    想给图片加一些显示名称,就直接在后面跟上文字信息,并使用css框架的知识进行调整

    <img src="tututu/a.jpg" >图片描述文字

    高度设置:height="600"   单位是px(像素),可不写    设置完高度后,宽度会按照比例自适应调节

    宽度设置:width="300"    单位是px(像素),可不写    设置完宽度后,高度会按照比例自适应调节

    高度和宽度一起设置        会严格按照设定缩放,图片会被拉伸或收缩,走形

案例代码

<img src="tututu/a.jpg" height="600" >图片描述文字

<img src="tututu/a.gif" width="600" alt="依然范特西封面图">

<img src="tututu/a.png" height="600" width="300" alt="加载不出来图片的时候可以看我">

视频

视频:<video src="视频路径">展示文字</video>

    一般情况下,视频不会被整个存储到网站上.因为这样加载太困难了.

    视频会被特殊处理,把视频做切片.切割成很多份,并需要专业的播放工具去播放,因此比较麻烦.

案例代码

<video src="shipin/xxx.mp4">点我看视频!</video>

<video src="http://mediaplay.kksmg.com/2022/07/25/h264_720p_600k_39038-DFTVHD-20220725175000-4800-310117-600k_mp4.mp4">点我看视频!</video>

Python——Html（语法、格式、段落、文字处理、路径、超链接、图片、视频）的更多相关文章

  1. Python基础语法和数据类型最全总结

    摘要:总结了Python最全基础语法和数据类型总结,一文带你学会Python. 本文分享自华为云社区<Python最全基础语法和数据类型总结>,原文作者:北山啦 . 人生苦短,我用Pyth ...

  2. python打印表格式数据，留出正确的空格和段落星号或注释

    python打印表格式数据,留出正确的空格,格式化打出 代码如下: def printPicnic(itemsDict,leftWidth,rightWidth): print('PICNIC ITE ...

  3. mac学习Python第二天：开发工具安装、编程方式、中文编码、syntaxError语法错误、注释、语法格式

    一.python集成开发工具Visual Studio Code安装配置 1.官网下载安装VSCode 官网地址 https://code.visualstudio.com/下载软件包 VSCode ...

  4. 【转】Python基础语法

    [转]Python基础语法 学习一门编程语言,通常是学习该语言的以下几个部分的内容: 基础语法:如,变量的声明与调用.基本输出语句.代码块语法.注释等: 数据类型:通常都为 数字.字符串.布尔值.数组 ...

  5. python基础语法及知识点总结

    本文转载于星过无痕的博客http://www.cnblogs.com/linxiangpeng/p/6403991.html 在此表达对原创作者的感激之情,多谢星过无痕的分享!谢谢! Python学习 ...

  6. python接口测试自动化之python基础语法

    一.pycharm的使用和python基本语法 (一).pycharm的使用和python环境 1.python以及pycharm的安装 python 的版本选择:3.x 版本,不要安装2.x 版本, ...

  7. Python基础语法复习笔记（一）：字符串

    python基础复习笔记 个人主页:JoJo的数据分析历险记 个人介绍:小编大四统计在读,目前保研到统计学top3高校继续攻读统计研究生 如果文章对你有帮助,欢迎关注.点赞.收藏.订阅专栏 本专栏主要 ...

  8. Python基本语法初试

    编程环境: win7旗舰版 Python 3.2.2(default, Sep  4 2011,09:51:08) 代码来源:(Python菜鸟) 代码内容: Python基本的输出语句print(& ...

  9. python 基础语法学习

    .注释 python单行注释以#开头 如:#!/usr/bin/env python3 #查找运行环境 多行注释有' ' '和" " " .python最具有特色的是使用 ...

  10. 实现段落文字两端对齐的css样式

    有时候网站中的文字比较多,虽然为父元素设置了宽度,但是总是会出现两端参差不齐的情况,看起来不整齐.其实实现段落的两端对齐,只需要设置两个css 样式即可. .demo{ text-align: jus ...

随机推荐

  1. AK、SK实现（双方API交互：签名及验证）

    参考:https://blog.csdn.net/yqwang75457/article/details/117815474 1.原理 AK/SK: AK:Access Key Id,用于标示用户. ...

  2. PYQT5学习（13）：QMidArea同时显示多个窗口，创建多个独立的窗口

    QMidArea  参考文章:https://blog.csdn.net/jia666666/article/details/81670569 一种同时显示多个窗口的方法,创建多个独立的窗口,这些独立 ...

  3. c++ 常用的 STL

    c++ 中常用的 STL vector //vector 变长数组 倍增的思想(倍增:系统为每一个程序分配空间的时候,所需要的时间和空间大小无关,与请求次数相关)尽量减少请求的次数 /* 返回元素的个 ...

  4. 前端三件套系例之JS——JavaScript内置方法

    文章目录 1.Number 1-1 属性 1-2 方法 2.String 2-1 属性 2-2 方法 2-3 代码 3Array 3-1 创建数组 3-2 数组特点 3-3 数组的遍历(迭代) 34 ...

  5. Xshell链接不上解决问题

    #5.远程连接工具排错? #一.测试网络是否通畅 1.测试网络连通性:ping 服务端ip地址 2.关闭防火墙 systemctl stop firewalld #关闭防火墙 systemctl di ...

  6. 0 基础晋级 Serverless 高手课 — 初识 Serverless（上）

    应用 - 无服务器 2017- 2006 函数即服务 类似 云计算 (Serverless) faas 函数服务 + 后端数据库 账号服务 弹性,按量 服务器,客户端的终结 - 弹性 - 按量 优点 ...

  7. umich cv-4-2 经典卷积网络架构

    这节课中主要讨论了卷积神经网络的发展历史以及几种经典结构是如何构建的 卷积网络经典结构 AlexNet VGG GoogleNet Residual Network AlexNet 在2012年的时候 ...

  8. Unity - UIWidgets 3. 页面跳转

    Flutter的Route概念, 移动开发常指Page, 在android中指activity, ios中指viewcontroller, UGUI中常称为Panel\Form\View? 大概说的就 ...

  9. Kubernetes 迁移节点 Kubelet 数据存储目录

    1.概述 默认Kubernetes节点Kubelet数据目录在/var/lib/kubelet,如果在部署前没有做好规划,其实默认就存储在系统盘/分区下了,这可能会引发一些问题: 磁盘空间限制: 系统 ...

  10. MVC开发

    我们通过前面的章节可以看到:https://www.liaoxuefeng.com/wiki/1252599548343744/1266264917931808 Servlet适合编写Java代码,实 ...