首页 > 其他分享 >(1)初识HTML

(1)初识HTML

时间:2022-12-22 23:22:19浏览次数:45  
标签:... 标记 标签 初识 HTML 文档 heading

 

1、介绍

HTML代表H yper t ext M arkup L anguage,它是编写网页时使用最广泛的语言。

  • Hypertext指的是网页(HTML文档)链接在一起的方式。 因此,网页上可用的链接称为超文本。

  • 顾名思义,HTML是一种Markup Language ,这意味着您可以使用HTML简单地“标记”文本文档,并使用标记告诉Web浏览器如何构建它以进行显示。

  • 在最简单的形式中,以下是HTML文档的示例 -

    <!DOCTYPE html>
    <html>
       <head>
          <title>This is document title</title>
       </head>
       <body>
          <h1>This is a heading</h1>
          <p>Document content goes here.....</p>
       </body>
    </html>

2、HTML标签(也称元素)

  • 绝大多数标签“成双成对”。即为“一对标签”。

    在上面的示例中有

    <head>...</head>、<body>...</body>、<h1>...</h1>、<p>...</p>

    当然也有单个出现的标签,但是常用的屈指可数。如下例中的标签。(换行作用)br

    <!DOCTYPE html>
    <html>
       <head>
          <title>Line Break  Example</title>
       </head>
       <body>
          
          <h1>This is heading 1</h1>
          <h2>This is heading 2</h2>
          <h3>This is heading 3</h3>
          <h4>This is heading 4</h4>
          <h5>This is heading 5</h5>
          <h6>This is heading 6</h6>
          <p>
             Hello<br>
             You delivered your assignment ontime.<br>
             Thanks<br>
             Mahnaz
           </p>
       </body>
    </html>
  • 上面的HTML文档示例使用以下标签。

    Sr.No 标签和说明
    1 <!DOCTYPE...>此标记定义文档类型和HTML版本。
    2 <html>此标记包含完整的HTML文档,主要包括由 ... head>表示的文档标题和由 ... body>标记表示的文档正文。
    3 <head>此标记表示文档的标题,可以保留其他HTML标记,如
    4 <title>在标记内使用
    5 <body>此标记表示文档的主体,它保留其他HTML标记,如 <h1gt;,<divgt;,<pgt;等。
    6 <h1>此标记表示标题。
    7 <p>此标记代表一个段落。
  • 一个完整的标签应该有以下组成部分:img

图中的a标签是超链接。href=“网址” ,点击跳转任意网址。

  • 元素的层次结构:

    称html骨架,是因为它有一定的结构组织,这些结构不是必须的,但是规范写法。

    一个元素的内容中可以包含其他元素,形成嵌套的层次结构;但两个元素之间不能相互嵌套。

    img

     


    3、总结

    到此应该要知道:

    • 网页上显示的所有内容都来自HTML。

      (其实最早的时候html是用来看电子报纸的)

    • HTML是一种标记语言,它使用各种标签来格式化内容。内容放在不同标签中有不同效果。这种不同效果也就是该标签的语义。

      应该有的疑惑:

      • 有哪些标签,各个标签的具体作用。

      • 网页这么复杂得需要多少标签才能表达出来。

    下一篇 (2)HTML 基本标签 将介绍各种常用标签。

标签:...,标记,标签,初识,HTML,文档,heading
From: https://www.cnblogs.com/5-2023/p/16999801.html

相关文章

  • 解决RockyLinux和Centos Stream 9中firefox无法播放HTML视频问题
    如题在测试两种centos后续系统时,发现firefox无法播放HTML视频问题。经过一番折腾找到了解决的办法,具体解决如下:首先下载VLC$sudoyuminstallvlc而后重启浏览器就可......
  • HTML-学习表单-2022-12-22
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>登录注册</title></head><body><h1>注册</h1><!--表单formaction提交的位置,可以是网站,......
  • 前端html
    socket服务端:importsocketdefmain():sock=socket.socket(socket.AF_INET,socket.SOCK_STREAM)sock.bind(('localhost',8089))sock.listen(5)whileTru......
  • VUE html2canvas+jsPdf 下载PDF文件并且以文件流的形式传给后端 + 分页处理截断文字问
    安装:npminstall html2canvas--savenpminstalljsPDF--save配置:  //转化PDF组件importhtmlToPdffrom'@/utils/contract/htmlToPdf'Vue.use(htmlToPdf)......
  • HTML-表单-2022-12-22
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>登录注册</title></head><body><h1>注册</h1><!--表单formaction提交的位置,可以是网站,......
  • 初识 Linux Shell
    初识LinuxShell本书学习的第一步,就是要找到Linux终端的所在位置。目前较常见的图形化终端有Konsole、Gnometerminal、xterm等几种。一般安装后在各个发行版的菜单......
  • Linux 利用wkhtmltopdf动态生成pdf
    yumlocalinstallwkhtmltox-0.12.6-1.centos8.x86_64.rpmwkhtmltopdf--version;yuminstalllibpng15*yumlistlibpng15*wkhtmltopdf--disable-smart-shrinki......
  • HTML-内联框架-2022-12-22
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>内联框架</title></head><body><iframesrc=""name="hello"frameborder="0"width=&qu......
  • HTML-网页结构-2022-12-22
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>页面结构分析</title></head><body><header><h2>网页头部<h2></header><section><h2>网页......
  • HTML-表格-2022-12-22
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>表格学习</title></head><body><!--表格tabletr行td列--><tableborder="1px"><tr><!......