2. 技术
    3. HTML入门（二）-常用标签使用

    HTML入门（二）-常用标签使用

    技术2024-12-29  26

    在HTML入门(一)阐述了HTML的基本结构，此处针对body内的HTML元素做简要概述

    <body> 元素包含了可见的页面内容

    一、是什么

    用于描述HTML文档，“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思。但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签

    二、HTML元素属性介绍

    1.如何通过元素描述文档信息？

    一是 通过元素内容二是 通过元素属性为HTML元素添加额外的附加信息，例如图像标签需要使用src指向图像地址

    2.什么是元素属性

    属性是 用于为HTML 元素提供附加信息存在的。

    2.1特点

    属性一般描述于开始标签属性总是以名称/值对的形式出现，比如：name=“value”。 <a href="http://www.runoob.com">这是一个链接</a>

    三、HTML元素分类

    HTML元素分类可以从多个角度划分，此处采取的是从元素是否具有内容进行划分

    3.1 划分角度

    元素是否具有内容块级元素和行级元素

    3.2 元素是否具有内容

    概述：我们都知道，HTML 文档是由 HTML 元素定义的，对于大部分HTML元素其是由开始标签和结束标签定义的。然而在HTML文档中，有一类特殊的HTML元素，其并不拥有开始标签和结束标签成对存在，而是在开始标签中进行关闭（以开始标签的结束而结束），称为空元素。

    HTML元素分类：

    内容元素-可以包含内容的元素空元素-不具有任何内容的元素

    3.2.1 内容元素

    对于具有开始标签和结束标签的HTML元素从网页结构角度可以划分为以下几类。

    （1）文字段落标签-其拥有共同的属性值algin 标题标签 <h1></h1> 段落标签 <p> 换行标签 <br/> <p align="center"> 中心内容 </p> 属性Value描述信息alginleft左对齐内容alginright右对齐algincenter中心对齐alginjustify对行进行伸展，每行元素有相等的长度类比word

    （2）HTML 超链接（链接）

    <a href = "https://editor.csdn.net/md?articleId=107119192" target="_blank" title="超链接演示" name="href01" /> href链接指向的位置可以是内部链接或者外部链接链接地址路径可以划分为两类 相对路径和绝对路径当只想要链接效果，还未设计好链接地址时，可以使用空链接<a href = "#"> 代替 属性Valuehref链接地址target链接的目标窗口，常用_self当前窗口打开新的链接地址，_blank 在新窗口打开title链接提示文字name链接的名字，和title区别在于title可以显示在前端展示，name只是作为一个属性存在

    （3）链接标签衍生-图像标签

    <img src="table_demo.html" alt="这是一个页面" height="100px" width="50px"/>

    src绝对路径和相对路径概述 绝对路径：在电脑上的任意位置输入该路径都可以查找到该文件，通常以磁盘文件开头 相对路径：相对于当前文件所在的路径

    alt属性 用户无法查看图像时，alt属性可以代替图像显示在浏览器中的内容

    使用场景

    当网速过慢，图像无法显示时src属性出现错误浏览器禁用图象时

    **case01：**index.html文件和1.jpg不在同一个目录下时

    **case02：**index.html文件和1.jpg在同一个目录下时

    （4）列表

    无序列表<ul></ul>有序列表<ol></ol>自定义列表<dl></dl>

    Tips:对于列表可以使用属性type指定其序号形式，举例：<ol type = "A"></ol> 序号以ABC形式展示 对于自定义列表，使用<dt></dt>用于定义列表项 <dd></dd>用于描述列表项内容

    （5）表格 表格的应用场景 页面布局都可以使用表格代替，后续使用<div></div>标签代替

    为什么使用thead和tbody以及tfoot标签？直接使用tr标签不行吗？ 答：直接使用tr标签也可以。浏览器解析表格时是作为整体去解析，整个表格被完全解析之后才会显示当表格既复杂又长，表格加载时间长，用户体验不好 解决使用表格结构标签优化显示，按照结构进行加载。

    thead和th有区别 th：定义表头，等同于tr，可以替换tr thead：优化显示效果的，不能替换tr，其用于包裹tr

    对于表格的嵌套和表格的跨行需根据案例解析，此处不再赘述

    <table width="800px" border="1"> <caption>表格描述信息</caption> <thead> <tr> <th> 单元格一 </th> <th> 单元格二 </th> <th> 单元格三 </th> </tr> </thead> <tbody> <tr> <td> 单元格一 </td> <td> 单元格二 </td> <td> 单元格三 </td> </tr> </tbody> <tfoot> <tr> <td> 单元格一 </td> <td> 单元格二 </td> <td> 单元格三 </td> </tr> </tfoot> </table>

    （6）表单 form 标签属性

    语法格式 表单元素有哪些形式？

    input标签属性值 单行文本框 type = "text"形式 注意事项：value和placeholder区别 value是，默认值提交到服务器表单的值 placeholder值，用于提示信息展示

    input标签按钮的形式存在 三者区别 button 配合js脚本触发一系列动作 submit 和reset 配合form表单 tips：对于默认的submit的值 可以使用value更改按钮显示值

    图像域 作用：用于美化提交的方式

    下拉菜单和列表的形式 **作用：**相对单选框 更加美观的设置，节约空间

    多行文本域

    1.2 空元素

    <br/>

    网页结构的基本搭建

    之前使用table表格进行设置结构 **缺点：**表格代码不利于维护，不灵活 此处使用div和span标签用于修饰

    Processed: 0.009, SQL: 9