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

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
      &