常用HTML标签及属性总结
目录
引言
HTML(HyperText Markup Language),是一种用于创建网页的标准标记语言。它通过将文本、图像、音频、视频等内容结合起来,形成网页的结构,使得网页呈现出风格和排版的样式。HTML不是一种编程语言,而是一种标记语言,用于描述和定义网页的结构和内容。
HTML的语法非常简单,主要是由标签和属性组成。标签是用于定义HTML元素的名称,如<p>表示段落元素。属性则是用于为HTML元素提供更多的信息。例如,<img>标签用于插入图像,可以通过“src”属性来指定图像的URL地址。
HTML还具有一些常用的元素和标签,如表格、列表、链接、表单等。通过这些元素,可以创建出各种各样的网页。
除了基本的HTML语法,还有一些实用的技巧和技术,如CSS(Cascading Style Sheets)、JavaScript和响应式设计等。CSS用于定义网页的样式,JavaScript用于实现网页的交互功能,响应式设计则是一种让网页自适应不同设备尺寸的技术。
总之,HTML是创建网页的基础,学好HTML对于任何一个网站开发者都非常重要。无论是想要自己搭建一个简单的个人网站,还是想要成为一名专业的网站开发者,掌握HTML都是必不可少的一步。
常用标签总结
标题(Heading)标签
标题标签用于定义标题,并根据级别在页面上显示。
常见的标题标签包括`<h1>`、`<h2>`、`<h3>`、`<h4>`、`<h5>`和`<h6>`。
<h1>This is a level 1 heading</h1>
<h2>This is a level 2 heading</h2>
<h3>This is a level 3 heading</h3>
<h4>This is a level 4 heading</h4>
<h5>This is a level 5 heading</h5>
<h6>This is a level 6 heading</h6>
文本(Text)标签
文本标签用于定义文本相关的内容和格式。
常见的文本标签包括`<p>`、`<em>`、`<strong>`、`<a>`和`<span>`、'<div>'。
<p>This is a paragraph of text.</p>
<em>This text is emphasized.</em>
<strong>This text is important.</strong>
<a href="https://www.example.com">This is a link</a>
<span>This is a span element</span>
<div>This is a div element</div>
图像(Image)标签
图像标签用于在页面上展示图像。
`<img>`标签必须包含`src`属性,指定图像的URL
<img src="https://www.example.com/image.jpg" alt="Description of image">
列表(List)标签
列表标签用于定义有序或无序列表。
有序列表使用`<ol>`标签,无序列表使用`<ul>`标签;每个列表项使用`<li>`标签。
<ol>
<li>First item in ordered list</li>
<li>Second item in ordered list</li>
<li>Third item in ordered list</li>
</ol>
<ul>
<li>First item in unordered list</li>
<li>Second item in unordered list</li>
<li>Third item in unordered list</li>
</ul>
表格(Table)标签
表格标签用于展示表格数据。
最常用的表格标签是`<table>`(表格本身),`<thead>`(表头),`<tbody>`(表格体)和`<tr>`(表格行)。
<table>
<thead>
<tr>
<th>First column header</th>
<th>Second column header</th>
</tr>
</thead>
<tbody>
<tr>
<td>First column, first row</td>
<td>Second column, first row</td>
</tr>
<tr>
<td>First column, second row</td>
<td>Second column, second row</td>
</tr>
</tbody>
</table>
表单(Form)标签
表单标签用于创建交互式表单,允许用户输入或选择数据。
最常用的表单标签是`<form>`(表单本身),`<input>`(最常用的表单元素),`<select>`(下拉菜单)和`<textarea>`(文本框)。
<form action="process-form.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<input type="submit" value="Send">
</form>
HTML中常见的标签属性及其描述
class
class属性用于定义一个元素的类名。
<div class="my-class">This div has a class of "my-class".</div>
id
id属性用于定义一个元素的唯一标识符。
<div id="my-id">This div has an ID of "my-id".</div>
href
href属性用于指定链接的URL。
<a href="https://www.example.com">This is a link</a>
src
src属性用于指定图片的URL。
<img src="https://www.example.com/image.jpg" alt="Description of image">
alt
alt属性用于定义图像的文本描述,在图像无法加载或屏幕阅读器上阅读页面时将显示文本。
<img src="https://www.example.com/image.jpg" alt="Description of image">
其他
还有一些HTML标签和属性并不常用,这里不一一列举。需要了解更多HTML标签和属性,可以查阅相关文档。
参考资料
- [HTML标签列表 - MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element)
- [HTML - w3schools](https://www.w3schools.com/html/)