您当前的位置：首页 > 建站教程 > WordPress 建站

HTML基本标签及结构详解

时间：2023-12-30 08:43:27 来源：[db:出处] 作者：[db:作者] 阅读：

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="style.css"><!--用来引入外部样式文件-->
</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="url地址/链接" title="B站">文本</a>
     <a href="url地址" target="_blank">文本</a>
     <a href="url地址" target="_self">文本</a>
     <a href="'#href" target="#href">文本</a>
     锚点链接 href='#href' 目标位置的属性要设置为与其一直 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
        <dd></dd>名词1解释1
        <dd></dd>名词1解释2
    </dl>自定义列表

4.标签属性:

<!--标签属性:
            1.通常由属性名="属性值"组成
            2.起附加信息的作用。
            3.不是所有标签都有属性，比如br标签-->
            下面的title class就是属性名，而后面的就是属性值
    <p title="段落" class="content" id="content">这是一个测试段落</p>

5.部分其他标签:

<!--文本格式化标签：就是通过标签来美化文本外观->
   <!--1.b和strong:都有加粗作用，且都是行级标签(不会自动换行)，
   但strong还有强调作用。注:强调主要是用于SEO时，便于提前关键字-->
   <b>加粗</b>
   <strong>加粗且强调</strong>
   <!--2 i和em：使文字倾斜,em具有强调作用。且都是行级标签(不会自动换行)，
   如果只是简单倾斜效果，用i标签就可以了，比如添加图标等-->
   <i>倾斜</i>
   <em>倾斜且强调</em>
   <!--3.pre预格式化文本,保留换行和空格及宽度。
   文字的字号会小一号,块级标签（在浏览器中会独占一行）-->
   <pre>
       pre预格式化
       文本,保留换行和空
       格及宽度
   </pre>
   
   <!--samll和big，将文字缩小或放大一号（行级标签，不会独占一行，且不识别宽高）-->
   <!--浏览器支持的最小字号是12px，显示比12px还小的文字的话，需要进行处理-->
   <p>我是正常的</p>
   <small>我是小一号的文字</small>
   
   <!--sub和sup：设置文本为下标和上标,用来调整文本正常显示的基线，且文字会自动小一号-->
   <p>正常显示:X1+X2=Y</p>
   <p>下标:X<sub>1</sub>+X<sub>2</sub>=Y</p>
   <p>下标:X<sup>1</sup>+X<sup>2</sup>=Y</p>
   
   删除线 <del></del> <s></s>
   下划线 <ins></ins> <u></u>
   转义字符：&nbsp; 空格 &lt; 小于号  &gt;大于号                     1/2    1 2 下一页 尾页
                    
                    
                        本文配套模板、静态源码可前往艾立兹素材库alisucai.com下载