首页 前端知识 html标签语法总结

html标签语法总结

2024-08-27 09:08:19 前端知识 前端哥 689 726 我要收藏

HTML(超文本标记语言)是用于创建网页的标准标记语言。以下是 HTML 的基本语法格式:

文档声明


位于 HTML 文件的开头,告知浏览器使用的 HTML 版本,常见的有:
<!DOCTYPE html> 表示 HTML5 文档类型。

<html> 标签


这是 HTML 文档的根标签,所有其他的 HTML 元素都必须嵌套在 <html> 标签内。

<head> 标签


包含文档的元数据和相关的配置信息


<title> 

定义网页的标题,显示在浏览器的标题栏或标签页上。<title>网页名称</title>


<meta>

用于提供关于文档的元数据,常见的属性如 charset 用于指定字符编码,name 和 content 用于定义各种描述信息,如页面描述、关键词等,以利于搜索引擎优化。
字符编码:<meta charset="UTF-8">
页面描述:<meta name="description" content="这是一个关于网页内容的简短描述">
关键词:<meta name="keywords" content="html, 网页开发, 示例">


<link>

用于链接外部资源,如 CSS 样式表、图标等。
链接 CSS 样式表:<link rel="stylesheet" type="text/css" href="styles.css">


<script>

可以嵌入或链接 JavaScript 脚本。
嵌入脚本:<script>console.log('Hello World!');</script>
引用外部脚本:<script src="script.js"></script>
<style> :用于在 HTML 文档中直接编写 CSS 样式。
<style>h1 { color: red; }</style>

<body> 标签


分区标签


<div>:用于划分页面区域,进行布局。

div class="header">
       <h1>网页标题</h1>
   </div>
   <div class="main-content">
       <p>这是主要内容区域。</p>
   </div>
   <div class="sidebar">
       <ul>
           <li>侧边栏项目 1</li>
           <li>侧边栏项目 2</li>
       </ul>
   </div>
   <div class="footer">
       <p>版权信息</p>
   </div>
文本相关标签

1. <p> 标签(段落标签):用于定义一个段落。
示例:<p>这是一个段落的文本。</p>

2. <h1> 到 <h6> 标签(标题标签):用于定义不同级别的标题,<h1> 是最大的标题,<h6> 是最小的标题。
示例:<h1>一级标题</h1> <h2>二级标题</h2>

3. <span> 标签:用于对行内的文本进行样式设置或操作。
示例:<p>这是一段文本 <span style="color:red;">其中这部分是红色的</span></p>

4. <b> 标签(加粗标签):使文本加粗显示。
示例:<b>这部分文本加粗</b>

5. <i> 标签(斜体标签):使文本以斜体显示。
示例:<i>这部分文本是斜体</i>

6. <u> 标签(下划线标签):为文本添加下划线。
示例:<u>这部分文本有下划线</u>

7. <strong> 标签(强调标签):通常表示文本的重要性,效果类似于 <b> 但语义更强调重要性。
示例:<strong>这是重要的文本</strong>

8. <em> 标签(强调标签):用于强调文本,效果类似于 <i> 但语义更强调语气。
示例:<em>这是需要强调的文本</em>

9. <blockquote> 标签(引用块标签):用于引用大块的文本。
示例:<blockquote>这是一段引用的大段文本。</blockquote>

10. <pre> 标签(预格式化文本标签):保留文本中的空格、换行等格式。
示例:<pre> 这是 预格式化 的文本 </pre>

<p>这是一个段落的文本。</p>
<h1>一级标题</h1> 
<h2>二级标题</h2>
<p>这是一段文本 <span style="color:red;">其中这部分是红色的</span></p>
<b>这部分文本加粗</b>
<i>这部分文本是斜体</i>
<u>这部分文本有下划线</u>
<strong>这是重要的文本</strong><p>
<em>这是需要强调的文本</em>
<blockquote>这是一段引用的大段文本。</blockquote>
<pre> 这是 预格式化 的文本 </pre>

列表标签


<ul>(无序列表)和 <li>(列表项)。

<ul>
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>


<ol>(有序列表)和 <li>(列表项)。

<ol>
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ol>
图像标签


<img>:用于插入图片。

  • src :指定图像的路径,可以是相对路径或绝对路径,也可以是网络 URL 。
    例如:<img src="image.jpg">
  • alt :当图像无法显示时,显示的替代文本,对于可访问性很重要。
    例如:<img src="image.jpg" alt="图片无法显示">
  • width 和 height :设置图像的宽度和高度,可以是像素值或百分比。
    例如:<img src="image.jpg" width="300" height="200"> 或 <img src="image.jpg" width="50%" height="50%">
超链接标签


<a>:创建链接到其他页面或资源的超链接。

  • href :指定链接的目标地址,可以是网页、文件、电子邮件地址等。
    例如:<a href="https://www.example.com">访问示例网站</a>
  • target :指定链接打开的方式,常见的值有 _self (在当前窗口或标签页中打开,默认值)、 _blank (在新的窗口或标签页中打开)。
    例如:<a href="https://www.example.com" target="_blank">在新窗口打开示例网站</a>
表格标签
  • <table> :定义表格。
  • <tr> :定义表格的行。
  • <td> :定义表格的数据单元格。
  • <th> :定义表格的表头单元格,通常表头单元格中的内容会加粗并居中显示。
<!DOCTYPE html>
<html>

<body>

  <table border="1">
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>上海</td>
    </tr>
  </table>

</body>

</html>
表单标签


<form>:用于定义表单区域。

  • action 属性:指定表单数据提交的目标 URL。
  • method 属性:指定提交表单数据的方法,常见的值有 GET 和 POST

<input>:用于创建输入字段,类型多样。

  • type 属性:决定输入字段的类型,如 text (文本输入)、 password (密码输入)、 radio (单选按钮)、 checkbox (复选框)、 submit (提交按钮)、 reset (重置按钮)等。
<input type="text" name="username">
    <input type="password" name="password">
    <input type="radio" name="gender" value="male"> 男
    <input type="radio" name="gender" value="female"> 女
    <input type="checkbox" name="hobby" value="reading"> 阅读
    <input type="submit" value="提交">

<textarea>:用于创建多行文本输入区域。

  • rows 和 cols 属性:分别指定行数和列数。
 <textarea name="description" rows="5" cols="30"></textarea>

<select> 和 <option>:下拉列表。

    <select name="country">
      <option value="china">中国</option>
      <option value="usa">美国</option>
      <option value="uk">英国</option>
    </select>

<label> :为表单元素添加标签,提高可访问性。

<label for="username">用户名:</label>
<input type="text" id="username">
标题标签


<h1> 到 <h6>:不同级别的标题。

<body>

  <h1>一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <h4>四级标题</h4>
  <h5>五级标题</h5>
  <h6>六级标题</h6>

</body>


注释


注释以 <!-- 开头,以 --> 结束。
例如:<!-- 这是一段注释 -->

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

安装Nodejs后,npm无法使用

2024-11-30 11:11:38

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