HTML学习总结_<html>不编译-CSDN博客

本文链接：https://blog.csdn.net/Accenerat/article/details/124067148

1、什么是HTML ？

HTML（超文本标记语言）是一种用于创建网页的标准标记语言。 HTML 不需要编译，可以直接由浏览器执行，它的解析依赖于浏览器的内核。它不是一种编程语言，而是一种标记语言。

2、基本框架

<!DOCTYPE html>
<html lang="en">
<head>

    <!-- 网页头部元素 -->

    <meta charset="UTF-8">

    <!-- 对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。-->

    <title>HTML简明教程</title>

    <!-- 网页标题 -->

</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

<!-- h1,h2,h3 表示各级标题 -->

<p>我的第一个段落。</p>

<!-- 将文段分成单个段落 -->

</body>

<! -- body 之间部分是页面可视部分 -->

</html>

效果预览

3、html常用标签

（1）双标签

双标记也称体标记，是指由开始和结束两个标记符组成的标记。其基本语法格式如下：

<标记名></标记名>

常见双标签有：

<html></html>
<head></head>
<title></title>
<body></body>
<h1></h1>
<p></p>
<div></div>
<span></span>
<a></a>
<ul></ul>

例子：

<a href = "https://www.runoob.com/html/html-basic.html">HTML基础</a>

<!-- 对"HTML基础"超链接 -->

(2) 单标签

单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下：

<标记名/>

常见单标签有：

<br />
<!--换行-->
<hr />
<!--水平分隔线-->
<meta />
<img />

（3）容器标签（div和span)

标签 <div> 可将网页页面分割成不同的独立部分，通常用于定义文档中的区域或节。该标签是一个块级元素，浏览器会自动在 <div> 和 </div> 所标记的区域前后自动放置一个换行符。

标签 <span> 通常作为文本的容器，它没有特定的含义和样式，只有与 CSS 同时使用才可以为指定文本设置样式属性。该标签是一个内联元素，他与块级元素相反，内联元素不会自动在前后自动放置换行符，因此内联元素会默认显示在同一行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <style>
      #box {
        width: 200px;
        height: 200px;
        background: red;
      }
    </style>
</head>
<body>
<div id="box">这是div标签，自动换行</div>
<input type="text" /><span>这是span标签，不自动换行</span>
</body>
</html>

(4)无序列表与有序列表

<ul> </ul> 无序列表 type默认值为disc(实心圆)

<ol> </ol>有序列表 type默认值为数字1，2，3...

<p>无序列表</p>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
    </ul>
<p>有序列表</p>
    <ol>
        <li>列表1</li>
        <li>列表2</li>
    </ol>

4、创建表格

格式：

<table>
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

5、插入图像

语法：

<img src="url" alt="" /> 其中url表示路径, alt 规定图像的替代文本即当图片未成功显示的时候显示的文本信息。

例子：

<img
  src="https://labfile.oss.aliyuncs.com/courses/1236/coder.jpg"
  alt="程序员"
  title="你好啊"
  width="700px"
  height="600px"
/>

相对路径：

这种路径是以引用文件的网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。

绝对路径：

这种路径是以引用文件的网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。

将本地图片插入网页：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p><img src=images\preview.jpg width="400" height="400"></p>
<p><img src="images\123.jpg" width="400" height="400"></p>
</body>
</html>

注意：本地图片只能调用HTML同一文件下的目录（即src文件里)，其他位置的图片将无法显示