首页 > 其他分享 >html标签语法总结

html标签语法总结

时间:2024-08-02 12:59:14浏览次数:13  
标签:HTML 示例 标签 标题 语法 html 用于 文本

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>


注释


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

标签:HTML,示例,标签,标题,语法,html,用于,文本
From: https://blog.csdn.net/qq_51326715/article/details/140868122

相关文章

  • 08HTML+CSS
    昨天完成了一个小练习,将之前学习的内容都整合到一起了。1<!DOCTYPEhtml>2<htmllang="en">34<head>5<metacharset="UTF-8">6<metaname="viewport"content="width=device-width,initial-scale=1.0......
  • Java基础语法
    关键字和保留字一、概念Java关键字(KeyWord):对Java的编译器有特殊的意义,他们用来表示一种数据类型或者表示程序的结构.保留字(ReserveWord):即它们在Java现有版本中没有特殊含义,以后版本可能会作为有特殊含义的词,或者该词虽然在Java中没有特殊含义,以后版本也不打算使用,但在其......
  • nb python 语法
    在bytesized32的开源代码里面看到了一个玄学内容。whileTrue:try:stream=call_gpt(stream=True,model=model,messages=messages,**kwargs)pbar=tqdm(stream,unit="token",total=kwargs.get("max_tokens",8*1024),leave=......
  • Python 下载 html 中的 图片
    安装requests、beautifulsoup4库#安装requests、beautifulsoup4库pipinstallrequestsbeautifulsoup4-ihttps://pypi.tuna.tsinghua.edu.cn/simple完成代码#pipinstallrequestsbeautifulsoup4-ihttps://pypi.tuna.tsinghua.edu.cn/simpleimportosimportr......
  • HTML基础笔记
    1.HTML语法规范1.1基本语法概述1.HTML标签是由尖括号包围的关键词,例如<html>2.HTML通常是成对出现的,叫做双标签,分别是开始标签,结束标签。<html></html>3。有些特殊的标签必须是单标签。<br/>1.2标签关系双标签关系可以分为两类:包含关系和并列关系。<html><head......
  • 【python的语法特点,如注释规则、代码缩进、编写规范等】
    介绍一下python的语法特点,如注释规则、代码缩进、编写规范等Python是一种广泛使用的高级编程语言,以其简洁易读的语法、丰富的标准库和强大的第三方库而闻名。下面我将详细介绍Python的一些基本语法特点,包括注释规则、代码缩进、以及编写规范等。一、注释规则Python......
  • 易优CMS模板标签switch条件判断支持多条件判断
    【基础用法】标签:switch描述:简单条件判断,比if判断标签少些不等于相同功能,视个人习惯而用。用法:{eyou:switchname='$eyou.field.has_children'}{eyou:casevalue='1'}当前栏目列表的栏目ID有1个下级栏目{/eyou:case}{eyou:casevalue='2'}当前栏目列表的栏目ID有2个下级栏目{/e......
  • 易优CMS模板标签relevarticle相关文档
    [基础用法]标签:relevarticle描述:通过前3个TAG标签或前3个关键词,检索整站文档标题中含有tag标签或者关键词的相关文档,进行关联。在没有tag标签情况下,就以前3个关键词检索文档标题进行关联。这个标签随着数据量的增加可能会比较影响检索性能。提示:使用该标签之前,必须先安装相关文......
  • 14.前端html
    html一、基本介绍1、定义:html是一种超文本标记语言,也是一种标识性语言(不是编程语言)标记:记号(绰号)超文本:就是页面内容可以包含图片、链接,音乐,视频等素材。2、为什么学习html?(1)测试页面元素,了解页面页面元素(页面是html语言编写的)(2)进行ui自动化需用到元素定位3、html有哪些特......
  • 为什么得到的html content.txt是空的?
    该计划的目标很简单,就是获得tageschau.de的头条新闻。一开始很正常,但是运行几次后什么也得不到。importrequestsfrombs4importBeautifulSoupheaders={'User-Agent':'Mozilla/5.0(WindowsNT10.0;Win64;x64)''AppleWe......