HTML的初次学习

最新推荐文章于 2024-07-22 17:32:31 发布

小叶开心心

最新推荐文章于 2024-07-22 17:32:31 发布

阅读量256

点赞数 6

文章标签：学习

本文链接：https://blog.csdn.net/weixin_57350343/article/details/139399210

版权

HTML的介绍

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等

HTML基础结构

一个基本的HTML文档结构通常包含以下几个部分：

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <title>我的第一个HTML页面</title>  
</head>  
<body>  
    <h1>欢迎来到我的网页</h1>  
    <p>这是一个简单的HTML页面示例。</p>  
</body>  
</html>

<!DOCTYPE html>：文档类型声明，告诉浏览器这是一个HTML5文档。
<html>：HTML文档的根元素。
<head>：包含了所有的元数据元素，比如<title>、<style>（通常用于链接外部CSS文件）、<meta>（提供关于HTML文档的元数据）等。
<body>：包含了所有可见的页面内容，如标题、段落、图片、链接、列表等。

HTML常用元素

标题

使用<h1>到<h6>标签来定义标题，<h1>定义最大的标题，<h6>定义最小的标题。

<h1>一级标题</h1>  
<h2>二级标题</h2>  
<!-- ... -->  
<h6>六级标题</h6>

段落

使用<p>标签来定义段落。

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

超链接

使用<a>标签来定义超链接。

<a href="https://www.baidu.com">访问示例网站</a>

图片

使用<img>标签来插入图片。

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

src属性指定了图片的URL，alt`属性提供了图片的替代文本，当图片无法显示时，浏览器会显示这个替代文本。

列表

HTML支持有序列表（<ol>）和无序列表（<ul>）。列表项使用<li>标签。

<!-- 无序列表 -->  
<ul>  
    <li>苹果</li>  
    <li>香蕉</li>  
    <li>橙子</li>  
</ul>  
  
<!-- 有序列表 -->  
<ol>  
    <li>第一步</li>  
    <li>第二步</li>  
    <li>第三步</li>  
</ol>

表格

使用<table>、<tr>（表格行）、<th>（表头单元格）和<td>（表格数据单元格）来创建表格。

<table>  
    <tr>  
        <th>姓名</th>  
        <th>年龄</th>  
    </tr>  
    <tr>  
        <td>张三</td>  
        <td>25</td>  
    </tr>  
    <tr>  
        <td>李四</td>  
        <td>30</td>  
    </tr>  
</table>

总结

通过这篇博客笔记，我们介绍了HTML的基础知识，包括HTML文档的基本结构、常用元素（如标题、段落、链接、图片、列表和表格）等。通过代码案例，我们加深了对HTML语法的理解。希望这篇笔记对你学习HTML前端有所帮助！

小叶开心心

关注

6
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML的初次学习

通过这篇博客笔记，我们介绍了HTML的基础知识，包括HTML文档的基本结构、常用元素（如标题、段落、链接、图片、列表和表格）等。通过代码案例，我们加深了对HTML语法的理解。希望这篇笔记对你学习HTML前端有所帮助！
复制链接

扫一扫