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="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>
    下标:Xsub>
    1/sub>
    +Xsub>
    2/sub>
    =Y/p>
       p>
    下标:Xsup>
    1/sup>
    +Xsup>
    2/sup>
    =Y/p>
          删除线 del>
    /del>
     s>
    /s>
       下划线 ins>
    /ins>
     u>
    /u>
       转义字符：&
    nbsp;
     空格 &
    lt;
     小于号  &
    gt;
    大于号

6.表格标签以及表单标签

表格标签结构: 作用:显示 展示数据    table>
     !--表格标签-->
            th>
    /th>
     表头单元格        tr>
                td>
    /td>
    单元格        /tr>
    行    /table>
        属性    align left center right 对齐    border边框 cellpadding 文字和单元格的距离 cellspacing 单元之间的距离 width     表格结构标签    thead>
    /thead>
     表头区域    tbody>
    /tbody>
     主体区域        合并单元格:跨行合并:rowspan行和行 跨列合并:colspan列和列    合并代码:跨行:在最上侧单元格为目标单元格，写合并代码    跨列:在最左侧单元格为目标单元格，写合并代码    跨行或跨列步骤:    	1.确定跨行还是跨列 2.找到目标单元格 3.删除多余单元格

7.表单标签:

表单标签:主要用途:收集用户信息    表单由表单域 表单控件（元素） 提示信息组成    表单域 实现用户信息传递form action="" method="">
    /form>
        action跟着的为地址 method提交方式 name名称        input输入表单元素:     input type="text">
    	   type属性值:text文本 password密码 button ridio单选框() checkbox(多选按钮).....	   	 submit(提交按钮，将表单值提交给服务器) reset 清除表单的所有数据	   	 button 普通按钮 结合js使用 file 上传文件	   	 	   name属性:表单元素的名字，单选按钮必须有相同的名字才可以多选1 	    			单选按钮和复选框都要有相同的name	   value属性 定义值	    	每个元素都应该有的，主要给后台人员来使用的			checked 针对单选和多选 当页面打开的时候默认选择			maxlength 最大长度	select下拉表单元素    使用场景:有多个选项，想节约空间select name="" id="">
    							    	option value="">
    /option>
    							   	 /select>
         select至少包含一个option 在option中的属性selected = selected进行默认选择	label for="">
    /label>
    使用场景 for 和表单元素的id属性相同就对应上	textarea文本域表单元素 输入文本较多时	textarea>
    textarea>
    一般规定长度通过css

到此这篇关于HTML基本标签及结构详解的文章就介绍到这了,更多相关HTML基本标签及结构内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！