前端HTML基础

当使用 HTML 创建网页时，你需要了解以下几个关键概念和常用标签：

  1. 基本的文档结构：
    一个 HTML 文档从 <html> 标签开始，然后分为两个主要部分：

    • <head> 标签：用于放置与网页相关的元数据和引用的外部资源，如标题、样式表和脚本文件链接等。
    • <body> 标签：用于放置网页的实际内容，包括文本、图像、链接等。

  2. 标题和段落：
    使用标题标签 <h1> 到 <h6> 来定义不同级别的标题，例如：

    <h1>这是一级标题</h1>
<h2>这是二级标题</h2>

    使用段落标签 <p> 来定义段落：

    <p>这是一个段落。</p>

  3. 链接和图像：

    • 使用锚点标签 <a> 来创建链接。href 属性指定链接的目标，可以是其他网页、文件或位置，而显示的文字内容放置在标签之间，例如：
    <a href="http://www.example.com">这是一个链接</a>
    • 使用图像标签 <img> 插入图像。src 属性指定图像文件的路径，alt 属性用于提供图像的替代文本（在图像无法显示时显示），例如：
    <img src="image.jpg" alt="这是一个图像">

  4. 列表：

    • 无序列表使用 <ul> 标签，列表项使用 <li> 标签，例如：
    <ul>
  <li>第一项</li>
  <li>第二项</li>
</ul>
    • 有序列表使用 <ol> 标签，列表项同样使用 <li> 标签，例如：
    <ol>
  <li>第一项</li>
  <li>第二项</li>
</ol>

  5. 表格：
    使用 <table> 标签创建表格，其中 <tr> 表示表格的行，<td> 表示单元格，例如：

    <table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>

  6. 表单：
    使用 <form> 标签创建表单，包含用于输入数据的不同表单元素，如文本框、复选框、下拉列表等。表单提交时，数据会被发送到服务器进行处理，例如：

    <form action="/submit" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email">
  <br>
  <input type="submit" value="提交">
</form>

    1. 文本格式化：

      • 使用 <strong> 标签来强调文本，并使其加粗显示，例如：
      <p>This is <strong>important</strong> text.</p>
      • 使用 <em> 标签来强调文本，并使其斜体显示，例如：
      <p>This is <em>emphasized</em> text.</p>
      • 使用 <b> 标签来标记文本为粗体，例如：
      <p>This is <b>bold</b> text.</p>
      • 使用 <i> 标签来标记文本为斜体，例如：
      <p>This is <i>italic</i> text.</p>

    2. 分区和布局：

      • 使用 <div> 标签来创建用于分区和组织网页内容的容器，例如：
      <div>
  <h2>Section 1</h2>
  <p>This is the content of section 1.</p>
</div>
<div>
  <h2>Section 2</h2>
  <p>This is the content of section 2.</p>
</div>
      • 使用 <span> 标签来对文本的一部分进行分组或样式化，例如：
      <p>This is <span style="color: red;">red</span> text.</p>

    3. 注释：

      • 使用 <!-- 注释内容 --> 来添加注释。注释可以帮助你在代码中添加说明或临时禁用部分内容，例如：
      <!--<p>This paragraph is temporarily removed.</p>-->

    4. 多媒体元素：

      • 使用 <video> 标签嵌入视频，并使用 src 属性指定视频文件的路径，例如：
      <video src="video.mp4" width="320" height="240" controls></video>
      • 使用 <audio> 标签嵌入音频，并使用 src 属性指定音频文件的路径，例如：
      <audio src="audio.mp3" controls></audio>

      1. 链接：
      • 使用 <a> 标签创建链接，通过 href 属性指定要链接到的目标URL，例如：
      <a href="https://www.example.com">Visit Example Website</a>
      • 使用 target 属性指定链接的打开方式，例如：
      <a href="https://www.example.com" target="_blank">Visit Example Website in a new tab</a>
      • 使用锚点可以在同一页面内部实现跳转，例如：
      <a href="#section2">Go to Section 2</a>
...
<h2 id="section2">Section 2</h2>
      1. 列表：
      • 使用 <ul> 标签创建无序列表，例如：
      <ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
      • 使用 <ol> 标签创建有序列表，例如：
      <ol>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ol>
      • 使用 <dl> 标签创建定义列表，例如：
      <dl>
  <dt>Term 1</dt>
  <dd>Definition 1</dd>
  <dt>Term 2</dt>
  <dd>Definition 2</dd>
</dl>
      1. 表格：
      • 使用 <table> 标签创建表格，例如：
      <table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>
      • 使用 <th> 标签创建表头单元格，使用 <td> 标签创建数据单元格。
      • 使用 <caption> 标签添加表格标题。
      1. 表单：
      • 使用 <form> 标签创建表单，例如：
      <form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <input type="submit" value="Submit">
</form>
      • 使用 <label> 标签为表单元素添加标签，使用 for 属性将标签与相应的表单元素关联。
      • 使用 <input> 标签创建各种类型的输入字段，例如文本输入、密码输入、复选框等。

       

      1. 图像：
      • 使用 <img> 标签插入图像，例如：
      <img src="image.jpg" alt="Description of the image">
      • src 属性指定图像的URL，alt 属性提供对图像的描述。这使得当图像无法加载时，可以显示替代文本。
      1. 多媒体：
      • 使用 <audio> 和 <video> 标签嵌入音频和视频内容，例如：
      <audio src="audio.mp3" controls></audio>
<video src="video.mp4" controls></video>
      • controls 属性为音频和视频提供了播放器控件，使用户可以播放、暂停和控制媒体。
      1. 框架：
      • 使用 <iframe> 标签在当前页面中嵌入其他页面，例如：
      <iframe src="https://www.example.com"></iframe>
      • src 属性指定要嵌入的页面的URL。
      1. 元数据：
      • 使用 <meta> 标签提供关于页面的元数据，例如：
      <meta charset="UTF-8">
<meta name="description" content="Description of the page">
      • charset 属性定义页面的字符编码，name 和 content 属性定义其他元数据，如描述、关键词等。
      1. 注释：
      • 使用 <!-- 注释内容 --> 语法在 HTML 中添加注释，例如：
      <!-- This is a comment -->
      

      

      

      5. 

    

    

    7. 







            

            
posted @ 
 
STDU_DREAM 
阅读(51) 
评论(0) 
编辑 
收藏 
举报


        

	    
	    
    









    
    

    
    



    

        
    

        

            
                
                
            
        

    



    相关博文：

    

            

                ·
                HTML的基本标签
            

            

                ·
                HTML段落与文字
            

            

                ·
                前端基础之HTML
            

            

                ·
                前端（一）
            

            

                ·
                前端之HTML
            

    





    

    阅读排行：
    

 ·          DeepSeek 开源周回顾「GitHub 热点速览」
        

 ·          物流快递公司核心技术能力-地址解析分单基础技术分享
        

 ·          .NET 10首个预览版发布：重大改进与新特性概览！
        

 ·          AI与.NET技术实操系列（二）：开始使用ML.NET
        

 ·          .NET10 - 预览版1新功能体验（一）
        



    

历史上的今天：



2022-07-30    学习记录java
    



    



	

	

	
	

	

	

	





    

    
    








  

  
点击右上角即可分享

  微信分享提示

   
    
AI FOR CODE 大赛