html无序列表横向排列_想学web前端啊?初学者必看,HTML入门指南
![95f80881112b3158de8881a7b8e0211f.png](https://i-blog.csdnimg.cn/blog_migrate/5d32074da55997e7d256b8d6f6b2bf58.jpeg)
什么是HTML?
HTML是Web上用于开发网页的最广泛使用的语言之一。
HTML代表ħ yper Ť分机中号arkup大号anguage。它用于使用标记语言设计网页。HTML是超文本和标记语言的组合。超文本定义了网页之间的链接。标记语言用于定义标记内的文本文档,标记定义网页的结构。
HTML是一种标记语言,即,它是计算机彼此通信,控制如何处理和呈现文本的一种方式。网站将在具有不同浏览器的各种系统上打开,并且标记语言可通过其各种标签来确保该网站在所有系统中的外观相同。
HTML的历史
HTML是一种标记语言,浏览器使用它来操纵文本,图像和其他内容,以所需的格式显示它。HTML由Tim Berners-Lee于1991年创建。
![4e6291fe5f8fcc3dcc273883a5b9f7c3.png](https://i-blog.csdnimg.cn/blog_migrate/1d990fc06c9b57d2d099eb4fb41dba6a.png)
HTML结构
HTML标签有两种主要类型:块级标签和内联标签。
- 块级元素会占用全部可用空间,并且始终在文档中开始新行。
标题和段落是块级元素的示例。 - 内联元素仅占用所需的空间,并且不会从页面上的新行开始。它们通常用于格式化块级元素的内部内容。
图像和链接是内联元素的示例。
你需要为你的HTML文档的三个块级标签<html>
,<head>
和<body>
。
- 该
<html></html>
标签是包含所有代码的最高级别的元素。 - 该
<head></head>
标签持有元信息,如页面的标题,字符集,元数据等所有可以在元素中使用的HTML元素是:<style>
,<title>
,<base>
,<noscript>
,<script>
和<meta>
。 - 该
<body></body>
标签包含所有的页面上显示的内容。它用于封装网页从文本到链接的所有数据。您在浏览器中看到的所有内容都包含在此元素中。
HTML如何工作?
HTML文档以.html
或.htm
扩展名结尾。您可以使用任何网络浏览器查看它。浏览器读取HTML文件并呈现内容以供用户查看。
每个HTML页面都包含一组标记或元素,这些标记或元素被称为网页的构建块。他们创建了一个层次结构,将内容结构化为部分,段落,标题和其他内容块。
HTML基础
要使用HTML构建网页,您需要了解HTML的一些基本知识,例如:
元素与标签
HTML使用预定义的标记和元素,这些标记和元素向浏览器告知内容显示属性。如果未关闭标签,则浏览器将应用该效果直至页面结束。
元素具有开始标签,一些内容和结束标签。
在这种情况下,我们使用p个开始和结束标记创建一个段落元素。
<p>A paragraph of text</p>
属性
元素的开始标记可以包含我们可以附加的特殊信息片段,称为属性。
属性具有以下key="value"
语法:
<p class="a-class">Some Text</p>
我们可以有多个:
<p class="a-class" id="an-id">Some More Text</p>
本类和ID属性是两个,你会发现最常用的。
标题
HTML标题是使用<h1>
to<h6>
标记定义的。
<h1>
定义最重要的标题,而<h6>
定义最不重要的标题:
<h1>First Heading</h1>
<h2>Second Headng</h2>
<h3>Third Heading</h3>
<h4>Fourth Heading</h4>
<h5>Fifth Heading</h5>
<h6>Sixth Heading</h6>
段落
HTML段落使用<p>
标签定义。您可以使用此标记添加任意数量的段落。
<p>First Paragraph</p>
链接
HTML链接是超链接。您可以单击链接,然后重定向到另一个文档或网页。链接使用<a>
标签定义:
<a href="https://jatinrao.dev/">Jatin's Blog</a>
图片
需要图像以简单的方式在网页上美化或描绘复杂的概念。HTML图像使用<img>
标签定义。
提供源文件(src),替代文本(alt),宽度和高度作为属性:
<img src="girl_image.jpg" alt="Girl in a Jacket">
清单
HTML提供了三种指定信息列表的方式。所有列表必须包含一个或多个列表元素。
<ul>
:无序列表使用普通项目符号对项目进行排序。<ol>
:订购列表使用不同的数字方案来列出您的商品。<dl>
:定义列表以与字典中相同的方式排列项目。
无序列表
此列表是使用HTML<ul>
标记创建的:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
订购清单
该列表是使用<ol>
标签创建的:
<ol>
<li>Coffee</li>
<li>Juice</li>
<li>Tea</li>
</ol>
定义清单
定义列表是呈现词汇表,术语列表或其他名称/值列表的理想方法。它是通过创建<dl>
,<dt>
并且<dd>
标签:
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
桌子
HTML表是用<table>
标记定义的。
- 行用
<tr>
标签定义。 - 标头用
<th>
标签定义 - 表单元格用
<td>
标签定义。
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jatin</td>
<td>15</td>
</tr>
<tr>
<td>James</td>
<td>25</td>
</tr>
</table>
空格
在HTML中,即使您在一行中添加了多个空格,浏览器的CSS引擎也会将其折叠。
<p>Some Text</p>
与此相同:
<p> Some Text</p>
![d81712226a241ae5873c2c45a8b521e6.png](https://i-blog.csdnimg.cn/blog_migrate/80f60c8198aab12e98d3d753dfb9f1b5.jpeg)
作者:Jatin Rao
译者:花灯姑娘
链接:Beginners Guide to HTML
来源:hashnode