首页 前端知识 【HTML】基础用法

【HTML】基础用法

2024-08-16 22:08:39 前端知识 前端哥 828 127 我要收藏

一、HTML简介

HTML(HyperText Markup Language),即超文本标记语言,是用来描述网页的一种标准标记语言。HTML是网页开发的基础,它定义了网页的结构和内容。通过使用各种标签(tags)来标记普通文本,使得文本具有多种含义,如段落、标题、表格和链接等。这些标签不仅描述了页面元素的显示方式,还有助于搜索引擎理解页面内容,提高网页的可访问性。

二、HTML的构成要素

  • 文本:设置字体、颜色、大小、加粗、斜体、下划线等,与Word类似
  • 图片:设置边框、大小、位置
  • 超链接:图片、文本等均可以添加超链接
  • 表格:展示行列构成的结构化数据,可以为表格设置大小、背景等,表格里面可以放所有元素。
  • 表单:文本框、下拉框、单选框、复选框、按钮、文本域等。
  • 多媒体:音频、视频、H5游戏等。

三、HTML元素的基本使用

  1. 标题标签:使用<h1><h6>来定义标题,其中<h1>表示最重要的标题,通常用于页面的主要内容标题,而<h6>则用于最不重要的子标题>

    <h1>这是一级标题</h1> 
    <h2>这是二级标题</h2> 
    <h3>这是三级标题</h3>
  2. 段落和换行标签p>标签用于定义段落,将整页内容划分为若干逻辑段落。浏览器会自动为每个段落的前后添加适当的空行

    <p>这是一个段落。</p> <p>这是另一个段落。<br/>这是新的一行。</p>
  3. 文本格式化标签:加粗文本可以使用<strong><b>标签,其中<strong>表示更强烈的强调意味;倾斜文本则使用<em><i>标签。另外,删除线可以通过<del><s>标签来实现,下划线则可以使用<ins><u>标签

    <strong>加粗文本</strong>
     <em>倾斜文本</em>
     <del>删除线文本</del>
     <ins>下划线文本</ins>
  4. 图像标签:使用<img>标签可以嵌入图像,通过src属性指定图像的路径,alt属性提供图像无法加载时的替代文本,而title属性则用于添加鼠标悬停时显示的文本。还可以通过widthheight属性指定图片的宽和高,以及使用border属性设置图片边框的粗细

    <img src="image.jpg" alt="替代文本" title="鼠标悬停文本" width="200" height="150">
  5. 超链接标签:超链接使用<a>标签定义,其href属性指明链接的目标地址。若要在新窗口中打开链接,可以将target属性设置为_blank。超链接可以包含文本或图像,点击后会跳转到指定的URL地址

    <a href="https://www.example.com">点击访问示例网站</a> 
    <a href="download.pdf" target="_blank">下载PDF文件</a>

  6. 容器标签<div>是一个大的容器标签,常用于布局和样式的应用,相当于一个大盒子。通常一个网页由多个<div>组成,每个<div>可以包含其他标签或元素。而<span>则是一个较小的容器,主要用于对文本的一部分进行样式应用,而不打断文本的结构

    <div style="background-color: lightblue; padding: 10px;"> <span style="color: red;">红色文字</span> <span style="font-weight: bold;">粗体文字</span> </div>
  7. 列表标签:  
    <ul>标签定义了一个无序列表,通常用项目符号(如圆点)表示每个列表项。
    <li>标签定义了列表中的单个项目
    <ol>标签定义了一个有序列表,通常用数字或字母顺序表示每个列表项。
    <li>标签同样用于定义列表中的单个项目。

    <ul>
        <li>项目1</li>
        <li>项目2</li>
        <li>项目3</li>
    </ul>
    
    <ol>
        <li>步骤1</li>
        <li>步骤2</li>
        <li>步骤3</li>
    </ol>
  8. 表格标签:       
    <table>标签定义了一个表格,它是所有表格元素的容器。
    <tr>标签定义了表格中的一行。
    <td>标签定义了表格中的单元格,用于存放数据。   

    <table>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
        </tr>
        <tr>
            <td>数据1</td>
            <td>数据2</td>
        </tr>
    </table>
  9. 表单标签:  
    <form>标签定义了一个表单,它是所有表单元素的容器。
    action属性指定了表单数据提交的目标URL。
    method属性指定了提交数据的HTTP方法,通常是"get"或"post"。

    <form action="submit.php" method="post">
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name">
        <input type="submit" value="提交">
    </form>
  10. 输入标签:
    type="text"表示文本框类型。
    name属性为输入字段指定一个名称,用于在服务器端识别该字段的值。
    placeholder属性提供了输入字段的占位符提示
    type="password"表示密码框类型。
    type="radio"表示单选按钮类型。

    ​​​​​​​<input type="text" placeholder="输入文本"> 
    <input type="password" name="password">
     <input type="checkbox" name="option1">
     <input type="radio" name="gender" value="male"> 
    <input type="submit" value="提交"> 
    <input type="button" value="按钮"> 
    <input type="reset" value="重置"> 
    <input type="file" name="file">

  11. 选择标签
    <select>标签定义了一个下拉选择框。
    <option>标签定义了选择框中的选项。
    value属性指定了选项的实际值,当表单提交时,选中的选项的值将被发送到服务器

    <select name="options">
        <option value="option1">选项1</option>
        <option value="option2">选项2</option>
    </select>
    
  12. 音频和视频标签:  
    <video>标签定义了一个视频播放器。
    width和height属性定义了视频播放器的尺寸。
    controls属性添加了播放、暂停和音量控制等控件。
    <source>标签指定了视频文件的URL和MIME类型。
    当浏览器不支持<video>标签时,会显示标签内的文本内容。

    <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        您的浏览器不支持音频元素。
    </audio>
    <video width="320" height="240" controls>
        <source src="video.mp4" type="video/mp4">
        您的浏览器不支持视频元素。
    </video>
    

​​​​​​​​​​​​​

每篇一言:停下脚步才注意到 世界被染得雪白。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15877.html
标签
评论
发布的文章

XML与JSON的使用

2024-08-23 21:08:27

npm i 常见问题

2024-08-23 20:08:23

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!