HTML基础（2）

最新推荐文章于 2023-06-20 13:03:07 发布

山i

最新推荐文章于 2023-06-20 13:03:07 发布

阅读量172

点赞数

分类专栏： HTML基础文章标签： html html5 css

本文链接：https://blog.csdn.net/zxcWh/article/details/120251819

版权

这篇博客详细介绍了HTML中<head>和<body>标记内的常见元素，包括<title>、<mate>、<style>、<link>、<script>、<h1>~<h6>、<hr>、<p>、<br>、<img>、<a>、<table>、<ol>、<ul>和<dl>等，并讲解了它们的用途和属性，例如设置标题、导入样式、创建链接、制作表格和列表等。

摘要由CSDN通过智能技术生成

一.html中常见的标记

1.1.<head>中常见的标记:

<title></title>--设置当前网页的标题

<mate>--单标记

例如：

<!DOCTYPE html>
<html>
<!-- <head>标记中常见的标记 -->

<head>
    <!-- 设置当前网页的标题 -->
    <title>mate 标记</title>
    <!-- meta---单标记 -->
    <!-- 设置当前网页的字符编码 -->
    <meta charset="utf-8">
    <!-- 为搜索引擎定义关键词 -->
    <meta name="keywords" content="HTML,CSS">
    <!-- 网页定义描述内容 -->
    <meta name="description" content="这是一个html网页">
    <!-- 设置当前网页自动刷新 -->
    <!-- <meta http-equiv="refresh" content="2"> -->
    <!-- 这只当前在间隔时间以后自动跳转其他页面 -->
    <meta http-equiv="refresh" content="5,https://www.baidu.com/">
    <!-- 设置当前网页的作者 -->
    <meta name="author" content="网星">

</head>

<body>

</body>

</html>

注意：刷新与跳转不能同时存在！

例如：

<!DOCTYPE html>
<HTML>
    <head>
        <title></title>
        <meta charset="utf-8"> 
        <!-- 设置当前网页的CSS的内部样式块 -->
        <style>
             
             p{
                 color: red;
                 font-size: 25px;
                 background-color: yellow;
             }
        </style>
    </head>
    <body>
        <p>测试style标记--设置当前网页的css的内部样式块</p>
    </body>
</HTML>

rel="stylesheet"

href="独立的样式表文件路径"

例如：

创建独立的css文件【test.css】

p{
    color: aqua;
    font-size: 20px;
    background-color: blueviolet;
}

编辑HTML代码

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8"> 
        <link rel="stylesheet" href="css+Jsp/test.css">
    </head>
    <body>
        <p>测试link标记--导入外部样式文件【.css】到当前HTML文件中</p>
    </body>
</html>

例如：

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <script>
        function testscript(){
            window.alert("测试script标记");
        }
    </script>
</head>

<body>
    <input type="button" value="测试script标记" onclick="testscript()">
</body>

</html>