HTML与CSS(基础知识)-----2：

HTML基础知识

HTML 文档由 HTML 元素定义。

HTML语法规范及特点

标签（Tag）：HTML 元素由开始标签（Opening Tag）和结束标签（Closing Tag）组成，它们用于界定元素的起始和结束位置。开始标签和结束标签之间是元素的内容。

示例：
```
<tagname>内容</tagname>
```
嵌套关系（Nesting）：HTML 元素可以嵌套在其他元素内部，形成父子关系。但要确保标签的层次结构正确闭合，子元素必须完全包含在父元素内。

示例：
```
<parent>
  <child>内容</child>
</parent>
```
属性（Attributes）：HTML 元素可以拥有属性，属性提供了元素的额外信息或配置。属性通常包含在开始标签中，并具有名称和值的形式。

示例：
```
<tagname attribute="value">内容</tagname>
```
空元素（Void Elements）：某些 HTML 元素不需要内容，并且没有结束标签，这些元素被称为空元素。它们以自闭合的方式出现，直接在开始标签后面用斜杠结束。

示例：
```
<input type="text" />
```
注释（Comments）：HTML 中的注释不会在浏览器中显示，只是用于开发者添加注释或临时禁用一些代码。

示例：
```

```
大小写敏感：HTML 标签、属性和属性值通常对大小写不敏感。虽然推荐使用小写字母，但大多数浏览器会正常解析使用大写字母的标签和属性。

示例：
```
<TAGNAME attribute="VALUE">内容</TAGNAME>
```

HTML元素属性

HTML 元素可以拥有属性，属性为元素提供了一些额外信息。属性通常包含在开始标签中，并以名称和值的形式表示。

HTML 标准属性参考手册.

HTML常用元素

标题元素

<h1>到<h6>：标题元素，用于定义标题的级别，从最高级别（h1）到最低级别（h6）。例如：

<h1>这是最重要的标题</h1>
<h2>这是次级标题</h2>
<h3>这是更小的标题</h3>
...

标题元素用于给文章或内容添加结构和层次感，通常用于表示文档的主要部分和子部分。

段落元素

<p>：段落元素，用于定义段落文本。例如：

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

段落元素用于组织和呈现文本内容，将一段文字作为一个独立的段落显示。

在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签。

链接元素

<a>：链接元素，用于创建超链接到其他页面、文档或位置。例如：

<a href="https://www.example.com">点击这里</a>访问示例网站。

通过设置href属性的值为目标链接的URL，可以创建点击链接跳转至其他页面或位置。

图像链接：在这种情况下，<a> 元素包围着 <img> 元素。例如：

<a href="https://www.baidu.com/">
  <img decoding="async" src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE4wwuV?ver=c3f7" alt="示例图片">
</a>

锚点链接：除了链接到其他网页外，您还可以在同一页面内创建内部链接，这称为锚点链接。要创建锚点链接，需要在目标位置使用 <a> 元素定义一个标记，并使用#符号引用该标记。例如：
```
<a href="#section2">跳转到第二部分</a>

<a name="section2"></a>
```
下载链接：如果您希望链接用于下载文件而不是导航到另一个网页，可以使用 download 属性。例如：

<a href="document.pdf" download>下载文档</a>

target 属性：

在 <form> 标签中，target 属性可以指定表单提交后的目标窗口或帧。常用的值有：

_self：默认值，将表单提交的结果显示在当前窗口。

_blank：将表单提交的结果显示在新窗口或新标签页中。

_parent：将表单提交的结果显示在父框架中。

_top：将表单提交的结果显示在顶级窗口中。

id 属性：

<a id="tips">有用的提示部分</a>
<a href="#tips">访问有用的提示部分</a>
<a href="https://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>

图像元素

<img>：图像元素，用于插入图像到页面中。例如：

<img src="path/to/image.jpg" alt="图片描述">

通过设置src属性的值为图像文件的路径，可以在页面上插入图像。alt属性指定了图像的替代文本，当图像无法加载时将显示该替代文本。

列表元素

<ul>和<ol>：无序列表和有序列表元素，用于创建项目列表。例如：

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

<ol>
  <li>第一项</li>
  <li>第二项</li>
</ol>

无序列表使用<ul>元素，有序列表使用<ol>元素。每个列表项使用<li>元素定义。

块级容器元素

<div>：通用的块级容器元素，用于分组其他元素或应用样式。例如：

<div class="container">
  <h3>这是一个块级容器</h3>
  <p>包含其他元素</p>
</div>

<div>元素常用于将其他相关元素组织在一起，并可以使用CSS样式表中的类名来为整个容器应用样式。

内联容器元素

<span>：通用的内联容器元素，用于将文本或其他元素包裹在一起。例如：

<span style="color: red;">这是红色的文本。</span>

<span>元素通常用于对一小段文本应用样式，也可以用于将多个内联元素（如文本、链接等）组合在一起。

表格元素

<table>：表格元素，用于创建表格结构。例如：

<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</table>

<table>元素用于定义表格，通过<tr>元素定义每一行，通过<th>和<td>元素定义表头和数据单元格。

表单元素

<form>：表单元素，用于创建用户输入表单。例如：

<form action="/submit" method="POST">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  <input type="submit" value="提交">
</form>

<form>元素用于创建表单，通过设置action属性指定表单提交的目标URL，通过设置method属性指定表单提交的HTTP方法。<label>元素用于描述输入字段，<input>元素用于创建各种不同类型的输入控件。

文本格式化标签

<b>加粗文本</b><br>
<i>斜体文本</i><br>
<code>电脑自动输出</code><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>

加粗文本
斜体文本
电脑自动输出
这是 _下标和 ^上标

标签	描述
`<b>`	定义粗体文本
`<em>`	定义着重文字
`<i>`	定义斜体字
`<small>`	定义小号字
`<strong>`	定义加重语气
`<sub>`	定义下标字
`<sup>`	定义上标字
`<ins>`	定义插入字
`<del>`	定义删除字

标签	描述
<`abbr>`	定义缩写
`<address>`	定义地址
`<bdo>`	定义文字方向
`<blockquote>`	定义长的引用
`<q>`	定义短的引用语
`<cite>`	定义引用、引证
`<dfn>`	定义一个定义项目。

posted @ 2022-08-07 21:35 猪无名阅读(60) 评论(0) 编辑收藏举报

刷新页面返回顶部

史前蓝熊