从零开始学习前端之HTML

小罗要暴富 2024-10-12 13:03:01 阅读 56

HTML基础

1.<code><html> 元素定义了整个 HTML 文档。

2.<body> 元素定义了 HTML 文档的主体。

3. <h1><h6>为1到6级标签

4.<p>:定义段落,<p> 元素定义了 HTML 文档中的一个段落。

5.<a>:定义HTML链接,链接的地址在 href 属性中指定:

`<a href="https://www.runoob.com">这是一个链接</a>`code>

具体效果如下:

这是一个链接

<img>:定义HTML图像

`<img src="/images/logo.png" width="258" height="39" />`code>

不要忘记结束标签

HTML元素

HTML元素是以开始标签起始,以结束标签终止;某些 HTML 元素具有空内容;空元素在开始标签中关闭

HTML属性

HTML 元素可以设置属性,属性可以在元素中添加附加信息,属性一般描述于开始标签

2.属性总是以名称/值对的形式出现,比如:name=“value”,属性值应该始终被包括在引号内。

3.查看完整的HTML属性列表: HTML 标签参考手册。

4.常用属性:

id: 给元素一个唯一标识符,可以用于 CSS 选择器或 JavaScript 操作。

<div id="header">This is a header</div>code>

class: 给元素指定一个或多个类名,方便通过 CSS 或 JavaScript 操作。

<p class="text-muted">This is a paragraph.</p>code>

style: 直接为元素定义 CSS 样式

<span style="color: red;">This text is red.</span>code>

href: 用于 <a> 标签,指定链接目标

<a href="https://www.example.com">Visit Example</a>code>

src: 用于 <img><script> 标签,指定资源的路径

<img src="image.jpg" alt="Description">code>

alt: 用于 <img> 标签,提供图片的替代文本

<img src="logo.png" alt="Company Logo">code>

title: 提供关于元素的额外信息,通常在鼠标悬停时显示

<button title="Click me">Submit</button>code>

name: 在 <input>, <form>, <select> 等表单元素中使用,定义元素的名称

<input type="text" name="username">code>

value: 定义表单元素的

<input type="text" value="Default text">code>

target: 用于 <a> 标签,指定链接的打开方式(如 _blank 在新窗口中打开)。

<a href="https://www.example.com" target="_blank" rel="noopener">Open in new tab</a>code>

type: 指定表单元素的类型(如 text, password, submit)。

<input type="password" name="password">code>

placeholder: 为 <input><textarea> 提供一个占位符文本

<input type="text" placeholder="Enter your name">code>

5.HTML水平线:<hr> 标签在 HTML 页面中创建水平线

hr 元素可用于分隔内容。

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

<hr/>

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

6.HTML注释:可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。

开始括号之后(左边的括号)需要紧跟一个叹号 ! (英文标点符号),结束括号之前(右边的括号)不需要

<!-- 这是一个注释 -->

7.HTML换行:如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br> 标签:

<p>这个<br>段落<br>演示了分行的效果</p>

注意:<br /> 元素是一个的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签

HTML格式化标签

通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。

然而,这些标签的含义是不同的:

<b><i> 定义粗体斜体文本

<strong> 或者 <em>意味着你要呈现的文本是重要的,所以要突出显示。

一些常用标签如下:

1.HTML 文本格式化标签:


<b> 定义粗体文本

<em> 定义着重文字

<i> 定义斜体字

<small> 定义小号字

<strong> 定义加重语气

<sub> 定义下标字

<sup> 定义上标字

<ins> 定义插入字

<del> 定义删除字


2.HTML “计算机输出” 标签:


<code> 定义计算机代码

<kbd> 定义键盘码

<samp> 定义计算机代码样本

<var> 定义变量

<pre>:定义预格式文本,效果如下:

爱你 一万年

背着书包上学堂


3.HTML 引文, 引用, 及标签定义


<abbr> 定义缩写

<address>

定义地址

<bdo> 定义文字方向

<blockquote>

定义长的引用

<q> 定义短的引用语

<cite> 定义引用、引证

<dfn> 定义一个定义项目。


HTML链接

HTML使用标签 <a> 来设置超文本链接

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

以下是 HTML 中创建链接的基本语法和属性:<a> 元素:创建链接的主要HTML元素是<a>(锚)元素。<a>元素具有以下属性:

href:指定链接目标的URL,这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。

target(可选):指定链接如何在浏览器中打开。常见的值包括 _blank(在新标签或窗口中打开链接)和 _self(在当前标签或窗口中打开链接)。

<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>code>

title(可选):提供链接额外信息,通常在鼠标悬停在链接上时显示为工具提示。

rel(可选):指定与链接目标关系,如 nofollow、noopener 等。

1.文本链接:最常见的链接类型是文本链接,它使用 <a> 元素将一段文本转化为可点击的链接,例如:

<a href="https://www.baidu.com/">访问百度</a>code>

2.图像链接:您还可以使用图像作为链接。在这种情况下,<a> 元素包围着 <img> 元素。例如:

<a href="https://www.example.com">code>

<img src="example.jpg" alt="示例图片">code>

</a>

3.锚点链接:除了链接到其他网页外,您还可以在同一页面内创建内部链接,这称为锚点链接。要创建锚点链接,需要在目标位置使用 元素定义一个标记,并使用#符号引用该标记。例如:

<a href="#section2">跳转到第二部分</a>code>

<!-- 在页面中的某个位置 -->

<a name="section2"></a>code>

4.下载链接:如果您希望链接用于下载文件而不是导航到另一个网页,可以使用 download 属性。例如:

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

5.id属性:id 属性可用于创建一个 HTML 文档书签,以便于识别链接到该部分。

在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>code>

在HTML文档中创建一个链接到"有用的提示部分(id="tips")":code>

<a href="#tips">访问有用的提示部分</a>code>

或者,从另一个页面创建一个链接到"有用的提示部分(id="tips")":code>

<a href="https://www.runoob.com/html/html-links.html#tips">code>

访问有用的提示部分</a>

本期内容到此结束,我们下一期再见。



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。