HTML基础

lilshork

已于 2022-09-26 15:30:41 修改

阅读量417

点赞数 1

分类专栏：前端文章标签： html html5 前端

于 2022-09-26 15:29:53 首次发布

本文链接：https://blog.csdn.net/lilshork/article/details/127053918

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML简介

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言，HTML 运行在浏览器上，由浏览器来解析。HTML不是一种编程语言，而是一种标记语言。

网页基本结构

<!--声明为html文档-->
<!DOCTYPE html>
<!--当前文档使用的是html实现 lang="en"-->
<html lang="en">
<!--页面头部区域-->
<head>
    <!--字符集编码格式设置-->
    <meta charset="UTF-8">
    <!--IE浏览器兼容处理-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--移动端视口适配设置-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--页面标题-->
    <title>页面标题</title>
</head>
<!--页面显示区域-->
<body>
    
</body>
</html>

HTML标签

特点

①HTML标签是由尖括号包围的关键词，比如<html>;

②HTML标签通常成对出现的，比如<b>和</b>;

③标签对中的第一个标签是开始标签，第二个标签是结束标签。

常用标签

标题标签 h

（1）双标签

（2）大小------随着数字的增大，字体变小

（3）加粗效果

（4）单独成行------行元素（块元素）标签

<h1>这是一个标题。</h1>
<h2>这是一个标题。</h2>
<h3>这是一个标题。</h3>

效果：

段落标签 p

（1）段落之间存在间隙

（2）每个段落独占一行

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

效果：

图片标签 img

（1）src-----图片路径

（2）alt-----图片无法显示时的文本提示

（3）title------图片悬停提示

（4）单标签，可以设置宽、高

路径分类:

（1）绝对路径:相对于根盘符的路径

（2）相对路径:相对于当前页面的路径

设置图片的大小，一般只是设置width或者height，不建议同时设置width和height

    <!-- 绝对路径 很少使用-->
    <img src="E:\FS\前端\代码\day01\img\img01.jpg" width="1200" alt="风景1" title="风景">
    <!-- 相对路径 推荐使用-->
    <img src="img/img01.jpg" alt="风景2">

超链接 a

（1）双标签

（2）不可以设置宽、高

<!-- 本项目之间的页面跳转 -->

    <a href="基本结构.html">打开基本结构页面</a>

<br>

<!-- 不同项目之间的页面跳转 页面在新窗口打开，需要添加target="_blank-->
    <a href="http://www.baidu.com" target="_blank">百度</a>

列表标签

有序列表：ol 无序列表ul

<ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
        <li>无序列表4</li>
        <li>无序列表5</li>
    </ul>
    <ol>
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
        <li>有序列表4</li>
        <li>有序列表5</li>
    </ol>

表格标签table

<!-- 表格 后台管理中心数据表格 -->
    <table border="1" style="border-collapse: collapse;">
        <tr>
            <th>标题1</th>
            <th>标题2</th>
            <th>标题3</th>
        </tr>
        <tr>
            <td rowspan="3">单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td colspan="2">单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>