从零开始学习前端之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>
本期内容到此结束,我们下一期再见。
上一篇: Nginx反向代理子域名(配置子域名代理)(最新版宝塔配置反向代理)
下一篇: 谷歌浏览器解决跨域问题及本地环境循环跳转登录页问题 --disable-web-security --user-data-dir
本文标签
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。