网络安全小白学习第二天_HTML简单页面的编写 2024.8.3

素质嘤嘤

已于 2024-08-03 22:05:24 修改

阅读量316

点赞数 19

文章标签：学习 html 前端 web安全安全

于 2024-08-03 22:03:23 首次发布

本文链接：https://blog.csdn.net/m0_75179423/article/details/140893598

版权

从解决问题的过程中学习才是最快的，照抄代码过两天就忘得七七八八了。

编写一个简单页面

开始自己尝试写<!DOCTYPE html>

<!DOCTYPE HTML>
<html>
   <head>
       <meta charset="UTF-8">
       <title>login页面</title>
   </head>
   <body>
       <h1>登录</h1> <br />
       用户名<input type="text" name="username" placeholder="请输入用户名/邮箱"><br />
       密码<input type="text" name="password" placeholder="请输入密码">
       <button type="submit"ti title="点击登录^^">登录</button>
   </body>
</html>

自己没学只能写到这一步（效果如下图）

页面背景默认白色，内容也不居中，导航栏也不会写，然后开始查找资料解决问题。

三种CSS加载样式

1.内联样式（行内样式）

你需要在相关标签内使用样式（style）属性。STYLE属性可以包含任何CSS属性

<p style="background:aqua ; font-size:24px">CSS<p>

注意：内联样式缺乏整体性和规划性，不易维护，维护成本高

2.内部样式

单个文档内同时给多个元素进行统一规划

当单个文档需要特殊的样式时，就应该使用内部样式表，你可以使用<style>标签在文档头部定义内部样式表

<head>

        <style>

h1{

background:orange;

                }

        </style>

</head>

注意：单个页面内的CSS代码具有统一性和规划性，便于维护，但在多个页面之间容易混乱

3.外部样式（推荐）

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。乜咯页面使用<link>标签连接到样式表。<link>标签在文档的头部head里包含着。

<link rel="stylesheet" type="text/css" href="xxx.css">

由于我写的单个页面，并不是很复杂，所以我用了第二种内部样式

   <head>
       <meta charset="UTF-8">
       <title>login页面</title>
       <style>
           body{
               background-color: aqua;
           }
       </style>
   </head>

效果如图：

颜色水蓝不太好康，换个图片吧

<!DOCTYPE HTML>
<html>
   <head>
       <meta charset="UTF-8">
       <title>login页面</title>
       <style>

           h1{
               color: green;
           }
           p{
               color: blue;
           }
           body{
               background-image:url(naCi2.jpeg)
           }
       </style>
   </head>
   <body>
       <h1>登录</h1> <br />
       <p>用户名</p><input type="text" name="username" placeholder="请输入用户名/邮箱"><br />
       <p>密码</p><input type="text" name="password" placeholder="请输入密码"><br />
       <br /><br />
       <button type="submit"ti title="点击登录^^">登录</button>
   </body>
</html>