JavaWeb学习笔记，关于HTML的入门标签及属性

ybybyb111

已于 2024-09-08 21:27:08 修改

阅读量635

点赞数 11

文章标签：学习笔记

于 2024-09-08 21:22:21 首次发布

本文链接：https://blog.csdn.net/2301_80021118/article/details/142032486

版权

一.HTML入门结构标签以及特点

以上标签即为HTML 的入门标签，包括了HTML的基本框架结构标签以及部分常用标签，需要注意的是，HTML的语法松散，但我们更要严格要求自己，使用正常符合要求的代码格式，以免后期出现错误而无法及时发现问题，值得提起的还有，<h1>到<h6>是HTML中预定义好的，并没有<h7>一说，不要自己创造标签。

二.HTML中的CSS技术

CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML文档外观的样式表语言。它与HTML一起工作，使得网页设计更加灵活和美观。

1. 基本概念

样式：CSS定义了HTML元素的样式，包括字体、颜色、间距、布局等。
选择器：CSS使用选择器来指定哪些HTML元素将应用特定的样式。例如，可以通过类名、ID或标签名称选择元素。
2. CSS的结构

CSS规则由两个主要部分组成：
选择器：指示要应用样式的HTML元素。
声明块：包含一个或多个声明，每个声明由属性和属性值组成。例如：
```
p {
    color: blue;
    font-size: 16px;
}
```

2.CSS的三种引入方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1111</title>
     方式二:内嵌样式
      <style>
        h1{
            /* color: red; */
            /* color: rgb(255,0,0); */
            color: #4d4f53;
        }
      </style>
      方式三：外联样式
      <link rel="stylesheet" href="css/news.css">
</head>
<body>
    <img src="./HTML快速入门/1.jpg" width="300px" height="80%" >新浪政务>正文
    方式一：行内样式
    -- <h1 style="color: red;">111</h1>
    <h1>111</h1>
    <hr>
    2023年03月02日 21:50 111
    <hr>
</body>
</html>

3.CSS中的颜色表示形式：

      <style>
        h1{
            /* color: red; */
            /* color: rgb(255,0,0); */
            color: #4d4f53;
        }
      </style>

    <h1 style="color: red;">111</h1>

4.CSS中的选择器以及<span>标签的含义：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>111</title>
      <style>
        h1{
            color: #4d4f53;
        }

        /* 元素选择器<类选择器<ID选择器  选择器优先级 */

        /* 元素选择器
        span{
            color: #968D92;
        } */
         /* 类选择器 */
        /* .cls{
            color: #968D92;
        } */
         /* ID选择器 */
         #time{
            font-size: 13px;
            color: #968D92;
         }
      </style>
</head>
<body>
    <img src="./HTML快速入门/1.jpg" width="300px" height="80%" >新浪政务>正文
    <h1>111</h1>
    <hr>
    <span class="cls" id="time">2023年03月02日 21:50 </span> <span>央视网</span>
    <hr>
</body>
</html>

以上便是CSS选择器的用法以及选择器优先级， <span>标签没有任何语义含义，充当一个容器，特点是可以一行显示多个元素

5.CSS中的超链接：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>111</title>
      <style>
        h1{
            color: #4d4f53;
        }

         #time{
            font-size: 13px;
            color: #968D92;
         }
         a{
            color: black;
            text-decoration: none;
         }
      </style>
</head>
<body>
    <img src="./HTML快速入门/1.jpg" width="300px" height="80%" ><a href="https://gov.sina.com.cn/" target="_self">新浪政务</a>>正文
    <h1>111</h1>
    <hr>
    <span id="time">2023年03月02日 21:50 </span> <span><a href="https://www.cctv.com/" target="_blank">央视网</a></span>
    <hr>
</body>
</html>

这里需要注意的是<a>超链接标签的用法，以及属性的含义

6.CSS中的视频标签和音频标签以及部分常用标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>111</title>
      <style>
        h1{
            color: #4d4f53;
        }

         #time{
            font-size: 13px;
            color: #968D92;
         }
         a{
            color: black;
            text-decoration: none;
         }
         p{
            text-indent: 30px;  /*设置首行缩进 */
             line-height: 40px; /*设置行高 */
            font-size: 40px;
         }
         #plast{
            text-align: right;
         }
         #center{
            width: 65%;
            margin: 0% 17.5% 0% 17.5%;/*外边距 上右下左*/
         }
      </style>
</head>
<body>
   <div id="center">
    <img src="./HTML快速入门/1.jpg" width="300px" height="80%" ><a href="https://gov.sina.com.cn/" target="_self">新浪政务</a>>正文
    <h1>111</h1>
    <hr>
    <span id="time">2023年03月02日 21:50 </span> <span><a href="https://www.cctv.com/" target="_blank"111</a></span>
    <hr>

    <!-- 正文 -->
     <!-- 视频 -->
    <video src="video/1.mp4" controls width="950"></video>
    <!-- 音频 -->
     <audio src="audio/1.mp3" controls></audio>

     <p><b>111</b>111</p>
      <p>111</p>

         <img src="HTML快速入门/1.jpg" width="500px" >
         <p>111</p>
            <img src="HTML快速入门/1.jpg"width="500px">
            <p>111</p>
         <p id="plast">（总台记者 111）</p>
      </div>
</body>
</html>

7.CSS中的盒子模型以及<div>标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>111</title>
      <style>
        h1{
            color: #4d4f53;
        }

         #time{
            font-size: 13px;
            color: #968D92;
         }
         a{
            color: black;
            text-decoration: none;
         }
         p{
            text-indent: 30px;  /*设置首行缩进 */
             line-height: 40px; /*设置行高 */
            font-size: 40px;
         }
         #plast{
            text-align: right;
         }
         #center{
            width: 65%;
            margin: 0% 17.5% 0% 17.5%;/*外边距 上右下左*/
         }
      </style>
</head>
<body>
   <div id="center">
    <img src="./HTML快速入门/1.jpg" width="300px" height="80%" ><a href="https://gov.sina.com.cn/" target="_self">新浪政务</a>>正文
    <h1>111</h1>
    <hr>
    <span id="time">2023年03月02日 21:50 </span> <span><a href="https://www.cctv.com/" target="_blank">111</a></span>
    <hr>

    <!-- 正文 -->
     <!-- 视频 -->
    <video src="video/1.mp4" controls width="950"></video>
    <!-- 音频 -->
     <audio src="audio/1.mp3" controls></audio>

     <p><b>111</b>111 </p>
      <p>111</p>
         <img src="HTML快速入门/1.jpg" width="500px" >
         <p>球迷欢呼沸腾！</p>
            <img src="HTML快速入门/1.jpg"width="500px">
            <p>心服口服了吗？</p>
         <p id="plast">（总台记者 111）</p>
      </div>
</body>
</html>

8.CSS中的表格标签以及表单标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-表单</title>
</head>
<body>
    <!-- form表单属性：
    action：表单提交的url，往何处提交数据，如果不指定，默认提交到当前页面
    method：表单的提交方式
        get：在url后面拼接表单数据，比如？username=Tom&age=12，url长度有限制
        post:在消息体（请求体）中传递的，参数大小无限制
     -->

    <form action="" method="post">
        用户名：<input type="text" name="username">
        年龄： <input type="text" name="age">
 
        <input type="submit" value="提交">
    </form>
</body>
</html>

以上笔记均基于黑马程序员JavaWeb开发课程，仅于自用，无任何商业营用用途