互联网技术 · 2024年2月22日

HTML基本标签和结构解析

这篇文章主要介绍了HTML基本标签及结构详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

1.HTML概述

1.HTML:超文本标记语言。是一种标识性语言,非编程语言,不能使用逻辑运算。通过标签将网络上的文档格式进行统一,使分散的网络资源链接为一个逻辑整体。

超文本是一种组织信息的方式,通过超级链接将多种媒介链接起来

标记:标签。用<>包裹的具有一定含义的内容,比如:

静态网页:不变

动态网页:跟后台同时改变

2.HTML标签结构

1.文档结构:

<!doctype html><!–!表示声明的意思。这一行代码意思:下面的文档标签将以html5进行解析–>
<html>
<!-头部.用来完成一个网页的相关设置->
<head>
    <meta charset=”utf-8″><!–汉字编码–><!–meta:元,用来完成对应设置–>
    <meta name=”keywords” content=””><!–设置一个网站搜索的关键字–>
    <meta name=”description” content=””><!–网站的描述内容–>
    <title>我的第一个html网页</title><!–标题–>
    <!–设置网站的小图标–>
    <link rel=”shortcut icon” href=”” type=”image/png”>
    <style>
        /*书写样式的地方*/
    </style>
    <link rel=”stylesheet” href=”https://redspeed01.com/d/easyvpn24″><!–用来引入外部样式文件–>
</head>
<!–2.主体部分–>
<body>
    <p>这是一个段落</p>
</body>
<script>
    //放脚本代码的地方
</script>
</html>

 

 

 

 

2.常用标签:

<!–做移动端开发设置–>
    <meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″>
     <!–1.div标签,用于布局,没有具体含义,分层。层–>
     <div></div>
     <!–2.hx:标题,从1级到6级,1级最大,6级最小,自动加粗,有默认字号–>
     <h1></h1>…<h6></h6>
     <!–3.p标签:表示段落。相当与一个回车.–>
     <p></p>
     <!–4.br:生成换行符–>
     <br>
     <!–6.a标签,实现链接跳转,target:_blank新窗口/_self当前窗口_parent/top–>
     <a href=”https://redspeed01.com/d/easyvpn24″ target=”#href”>文本</a>
     锚点链接 href=”https://redspeed01.com/d/easyvpn24″ 目标位置的属性要设置为与其一直 id=#href
     <!–7.img用于加载外部图片图像,src用来设计加载的图片或图像的路径,alt当图片图像加载不成功时,显示alt中的内容,否则不会显示–>
     src路径 alt替换文本 title 图片提示文本 width:图像宽度 height:图像高度 border边框
     <img src=”” alt=”显示不出的名字”>
     <!–8.span作用与div一样,都是用于布局,div会单独占一行,span不会,span便签用于行内布局–>
     <span></span>
     <!–9.ul和ol,前者无序后者有序,都用的li标签。–>
     <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
    <ol>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ol>
     //自定义列表 重点每个网站的最下面基本都是通过自定义
    <dl> dl中只能有dt和dd 一个dt对应多个dd 为兄弟关系
        <dt></dt>名词1
      &

OpenMagic API

Need more than content? Move into the product flow.

If you are here for model access, pricing, developer docs, or the future API console, the dedicated product path now lives on api.openmagic.ai.

登录免费注册