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. Llama2-Chinese项目：3.2-LoRA微调和模型量化

      提供LoRA微调和全量参数微调代码,训练数据为data/train_sft.csv,验证数据为data/dev_sft.csv,数据格式为"<s>Human: "+ ...

  2. Python常用模块-20个常用模块总结

    目录 time模块 datetime模块 random 模块 os 模块 sys 模块 json 和 pickle 模块 hashlib和hmac 模块 logging 模块 numpy 模块 pan ...

  3. 低代码助力微信小程序对接，提升开发效率

    摘要:本文由葡萄城技术团队原创并首发.转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 前言 微信小程序相信大家都用过,相较于APP,微信小程序的优势在于其便 ...

  4. 【原型链污染】Python与Js

    [原型链污染]Python与Js 一.背景 最近在TSCTF的比赛题中遇到了Python的原型链污染题目,所以借此机会学习一下.说到原型链,最多的还是在Js中,所以就一并学习一下.(因为是菜鸡所以文章 ...

  5. Util应用框架 UI 开发快速入门

    本文是Util应用框架 Angular UI 开发快速入门教程. Util前端技术概述 Util 应用框架目前仅支持用于开发管理后台的 UI. 本文介绍了 Util UI 的技术特点和功能支持. UI ...

  6. 自然语言处理历史史诗：NLP的范式演变与Python全实现

    本文全面回顾了自然语言处理(NLP)从20世纪50年代至今的历史发展.从初创期的符号学派和随机学派,到理性主义时代的逻辑和规则范式,再到经验主义和深度学习时代的数据驱动方法,以及最近的大模型时代,NL ...

  7. 文心一言 VS 讯飞星火 VS chatgpt （128）-- 算法导论11.1 3题

    三.用go语言,试说明如何实现一个直接寻址表,表中各元素的关键字不必都不相同,且各元素可以有卫星数据.所有三种字典操作(INSERT.DELETE和SEARCH)的运行时间应为O(1)(不要忘记 DE ...

  8. JUC并发编程学习笔记（十二）Stream流式计算

    Stream流式计算 什么是Stream流式计算 大数据:存储+计算 集合.MySql这些的本质都是存储东西的: 计算都应该交给流来操作! 一个案例说明:函数式接口.lambda表达式.链式编程.St ...

  9. 【日常收支账本】【Day01】用PySide6开发一个记账的小软件——初步构思

    软件环境 Python 3.10 超详细Python安装教程 PyCharm Community Edition 2023.2.1 PySide6 6.5.1.1 需求分析 1. 基本要素 个人钱款一 ...

  10. Android 11 后的应用数据和文件

    Android应用数据的保存方式有四种,分别是应用专属存储空间.共享存储.偏好设置.数据库. 应用专属存储空间 应用专属存储空间:存放应用专属文件,主要包括两个空间,卸载后移除 内部存储空间:位于系统 ...