码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • HTML入门基础标签(结构标签,文本标签,特殊字符转义标签,多媒体标签)


    目录

    HTML(HyperText Markup Language):超文本标记语言:

    超文本:

    标记语言:

    W3C标准:

    结构标签

    基础标签

    特殊字符

    图片,音频,视频

    img:定义图片

    audio:定义音频

    video:定义视频

    路径问题

    尺寸单位:


    HTML(HyperText Markup Language):超文本标记语言:

    超文本:

    超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频等内容 如上图看到的页面,我们除了能看到一些文字,同时也有大量的图片展示;有些网页也有视频,音频等。这种展示效果 超越了文本展示的限制。

    标记语言:

    由标签构成的语言

    W3C标准:

    W3C是万维网联盟,这个组成是用来定义标准的。他们规定了一个网页是由三部分组成,分别是:

    结构:对应的是 HTML 语言

    表现:对应的是 CSS 语言

    行为:对应的是 JavaScript 语言

    HTML定义页面的整体结构;CSS是用来美化页面,让页面看起来更加美观;JavaScript可以使网页动起来,比如轮播图也就 是多张图片自动的进行切换等效果。

    结构标签

    基础标签

    1. html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>入门title>
    6. head>
    7. <body>
    8. <h1>我是h1标签h1>
    9. <h2>我是h2标签h2>
    10. <h3>我是h3标签h3>
    11. <h4>我是h4标签h4>
    12. <h5>我是h5标签h5>
    13. <h6>我是h6标签h6>
    14. <hr>
    15. <P > 新的段落 P>
    16. <font face="楷体" size="10" color="red"> 简单字体格式优化font>
    17. <center> 水平居中center>
    18. <i> 倾斜 并换行i> <br>
    19. <b> 加粗 并换行b> <br>
    20. <u> 下划线并换行u><br>
    21. body>
    22. html>

    显示效果

    特殊字符

    图片,音频,视频

    测试代码

    1. html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>图片音频视频标签应用title>
    6. head>
    7. <body>
    8. <img src="pi.jpg" width="355" height="632" >
    9. <audio src="mu.mp3" controls>audio>
    10. <video src="vi.mp4" width="300" height="300" controls>video>
    11. body>
    12. html>

     效果

    img:定义图片

    src:规定显示图像的 URL(统一资源定位符)  height:定义图像的高度   width:定义图像的宽度

    audio:定义音频

    支持的音频格式:MP3、WAV、OGG      src:规定音频的 URL      controls:显示播放控件

    video:定义视频

    支持的音频格式:MP4, WebM、OGG     src:规定视频的 URL controls:显示播放控件

    路径问题

            1:绝对路径:完成路径  具体到盘符,或者网页连接
            2:相对路径:相对位置关系
            在同级目录下可以直接写  ./文件名,或者省略 直接写文件名
            在同级目录的文件夹   ./文件夹名/文件名
            在上一级目录下, ../退一级/文件夹名/文件名

         

    尺寸单位:

    height属性和width属性有两种设置方式:

    像素:单位是px

    百分比占父标签的百分比:例如宽度设置为 50%,意思就是占它的父标签宽度的一般(50%)

  • 相关阅读:
    处理普通用户安装启动mysql报Can‘t find error-message file‘usrsharemysqlerrmsg.sys‘ 问题
    阿里P8MySQL,基础/索引/锁/日志/调优都不误,一锅深扒端给你
    多功能透明屏,在智能家居领域中,有哪些功能特点?显示、连接
    js Ajax函数封装及使用
    2022 反编译dll文件
    Facebook的数字社交使命:连接世界的下一步
    我的十年编程路 2022年篇
    WPF .NET 7.0学习整理(一)
    Nodejs基于Vue.js编程语言在线学习平台的设计与实现5y4p2
    深度学习系列48:DeepFaker
  • 原文地址:https://blog.csdn.net/m0_64365315/article/details/126247125
  • 最新文章
  • 沪漂五周年了:我越来越迷茫了
    Agentic Skill Routing 实战:别再把所有 Skill 塞进 AI Agent 上下文
    MySQL-Seconds_behind_master的精度误差
    [MAF预定义ChatClient中间件-03]CachingChatClient——利用缓存省钱省时间
    AI的至暗历史:从万众期待到被政府撤资,AI的两次死亡徘徊
    Agent OS :五种驯服不确定性的范式
    PortSwigger SQL注入LAB11
    数据库即时编译JIT
    [Begin]AI Learn Data Day 0
    深度学习进阶(二十七)现代 LLM 的核心架构设计其二:SwiGLU
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
小工具 小游戏
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1

京公网安备 11010502049817号