掌握HTML与CSS:构建网页的基础

在当今数字化的时代,创建一个吸引人的网页已成为个人和企业展示自我的重要方式。而构建网页的基石,便是HTML(超文本标记语言)和CSS(层叠样式表)。无论你是一个刚刚踏入编程世界的初学者,还是希望巩固基础知识的开发者,理解这两者将帮助你打开网页设计的大门。本文将带你深入探索HTML的元素及结构,以及如何运用CSS为你的网页增添魅力。准备好开始你的网页开发之旅了吗?让我们一起揭开这个神秘的面纱吧!

HTML

HTML,即 HyperText Markup Language(超文本标记语言),是构建网页的基础语言。HTML 的作用是定义网页的内容和结构。

元素

元素:由标签和内容组成。例如,<p>hello</p> 其中:

  • 标签:<p>
  • 内容:hello

属性:元素还可以包含属性,例如 <p id="p1" title="标题1">hello</p>

元素之间可以嵌套,但对应的标签不能交叉。还有一种特殊的元素称为 空元素,例如 <br><hr>,它们没有内容。

HTML 页面结构

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>完整页面</title>
</head>
<body>
    <p>Hello, world!</p>
    <img src="C:\Users\OLDERHARD\Pictures\星空.jpg" width="500" height="500" alt="未找到">
</body>
</html>
  • <html> 元素包含页面中所有其他元素,称为根元素。
  • <head> 元素包含不用于展现内容的元素,如 <title><link><meta> 等。
  • <body> 元素包含对用户展现的内容,例如文本、图片、视频和音频等元素。

常见元素

文本元素

  • <hr>:分割线
  • <br>:换行

标题

<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>

段落

<p>段落</p>

列表

无序列表:

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

有序列表:

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

嵌套列表:

<ul>
    <li>
        北京市
        <ul>
            <li>房山区</li>
        </ul>
    </li>
    <li>
        河北省
        <ul>
            <li>石家庄</li>
        </ul>
    </li>
</ul>

超链接

<a href="https://www.baidu.com/">百度</a>
<a href="#pt">跳转到文末</a>
<p id="pt">文末</p>

多媒体元素

  • 图片
<img src="C:\Users\OLDERHARD\Pictures\星空.jpg" width="500" height="500" alt="未找到">
  • 视频
<video src="D:\Other\Date\信息\其他\自我介绍.mp4" width="500" height="500" controls></video>
  • 音频
<audio src="bgm.mp3" controls></audio>

表单元素

表单的作用是收集用户填入的数据,并将这些数据提交给服务器。

<form action="服务器地址" method="请求方式" enctype="数据格式">
    <!-- 表单项 -->
    <input type="text" name="username">
    <input type="submit" value="提交按钮">
</form>

常见的表单项

  • 文本框
<input type="text" name="username">
  • 密码框
<input type="password" name="password">
  • 隐藏框
<input type="hidden" name="id" value="1">
  • 日期框
<input type="date" name="birthday">
  • 提交框
<input type="submit" value="提交按钮">
  • 单选
<input type="radio" name="sex" value="男" checked>
<input type="radio" name="sex" value="女">
  • 多选
<input type="checkbox" name="fav" value="唱歌">
<input type="checkbox" name="fav" value="逛街">
<input type="checkbox" name="fav" value="游戏">
  • 文件上传
<input type="file" name="avatar">

注:使用文件上传时,需要指定格式 method="post"enctype="multipart/form-data"

  • 完整网页
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>完整页面</title>
</head>
<body>
    <p>Hello,world!</p>
    <hr>
    <img src="C:\Users\OLDERHARD\Pictures\星空.jpg" width="500" height="500" alt="未找到">
    <hr>
    <h1>标题</h1>
    <video src="D:\Other\Date\信息\其他\自我介绍.mp4" width="500" height="500" controls></video>
    <hr>
    <h2>标题</h2>
    <audio src="bgm.mp3" controls></audio>
    <hr>
    <h3>标题</h3>
    <a href="#pt">跳转到文末</a>
    <hr>
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>
    <hr>
    <ol>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ol>
    <hr>
    <ul>
        <li>
            北京市
            <ul>
                <li>房山区</li>
            </ul>
        </li>
        <li>
            河北省
            <ul>
                <li>石家庄</li>
            </ul>
        </li>
    </ul>
    <hr>
    <a href="https://www.baidu.com/">baidu</a>
    <hr>
    <form action="https://www.baidu.com/s" method="请求方式" enctype="数据格式">
        <!-- 表单项 -->
        <input type="text" name="username">
        <br>
        <input type="password" name="password">
        <br>
        <input type="hidden" name="id" value="1">
        <br>
        <input type="date" name="birthday">
        <br>
        <input type="submit" value="提交按钮">
        <br>
        男<input type="radio" name="sex" value="男" checked>
        女<input type="radio" name="sex" value="女">
        <br>
        唱歌<input type="checkbox" name="fav" value="唱歌">
        逛街<input type="checkbox" name="fav" value="逛街">
        游戏<input type="checkbox" name="fav" value="游戏">
        <br>
        <input type="file" name="avatar">
    </form>
    <hr>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <p id="pt">文末</p>
</body>
</html>

网络请求

请求方式

  • GET(默认):提交时,数据跟在 URL 地址之后。
  • POST:提交时,数据在请求体内。

数据格式

客户端发送的编码方式(3种):

  • application/x-www-form-urlencoded:URL 编码。
  • application/json:UTF-8 编码。
  • multipart/form-data:每部分编码可以不同。

表单仅支持以 application/x-www-form-urlencodedmultipart/form-data 格式发送数据,文件上传需要用 multipart/form-data 格式。JavaScript 代码可以支持任意格式发送数据。

服务端接收

  • 对于 application/x-www-form-urlencodedmultipart/form-data 格式的数据,Spring 接收方式是统一的,只需用 Java Bean 的属性名对应请求参数名即可。
  • 对于 application/json 格式的数据,Spring 接收需要使用 @RequestBody 注解与 Java Bean 的方式。

Session 原理

HTTP 是无状态的,但通过会话机制可以暂存数据,实现客户端与服务器之间的数据共享。

Session 实现身份验证流程:

  1. 客户端进行登录请求。

  2. 服务器的 LoginController 控制器检查用户名和密码,验证通过后:

    • 将验证通过的标记存入 Session。
    • 向客户端返回登录成功的响应。
  3. 当客户端进行其他请求访问受限资源时:

    • 经过服务器的 LoginInterceptor 拦截器,拦截器去 Session 检查用户名,若存在则放行,客户端可以继续访问。

JWT 实现身份验证流程:

  1. 客户端进行登录请求。

  2. 服务器的 LoginController 控制器检查用户名和密码,验证通过后:

    • 向客户端返回登录成功和一个 token(令牌)。
  3. 当客户端进行其他请求访问受限资源时:

    • 经过服务器的 LoginInterceptor 拦截器,拦截器校验 token,校验无误则放行,客户端可以继续访问。 当然可以!以下是整理过的 CSS 相关内容,修正了语言的缺失并进行了结构化:

CSS

CSS,Cascading Style Sheets,是用于描述网页表现与展示效果的样式表语言。
通过选择器定位页面上的元素,并为这些元素添加样式。每种样式由属性和对应的值组成。

1. 选择器

选择器用于选中 HTML 元素并应用样式。选择器的优先级从高到低依次为:id > class > type

  • Type 选择器(元素选择器):根据标签名进行匹配。

    p {
        background-color: purple; /* 将所有 <p> 标签的背景颜色设置为紫色 */
    }
    
  • Class 选择器:根据 class 的名称进行匹配。

    .c1 {
        background-color: yellow; /* 将所有 class 为 c1 的元素背景颜色设置为黄色 */
    }
    
  • ID 选择器:根据元素的 id 属性进行匹配。

    #p3 {
        background-color: green; /* 将 id 为 p3 的元素背景颜色设置为绿色 */
    }
    

2. 属性和值

在 CSS 中,可以使用不同的属性为元素设置样式。以下是一些常见的属性和值:

  • 背景颜色

    background-color: red; /* 设置背景颜色为红色 */
    
  • 显示属性

    display: none; /* 将元素设置为不显示 */
    

3. 布局

与布局相关的 HTML 元素包括:

  • <div>:容器标签,用于划分页面的布局。
  • <template>:模板标签,用于定义可重用的 HTML 片段。
#html基础知识##css样式##前端##web开发#
全部评论

相关推荐

1 收藏 评论
分享
牛客网
牛客企业服务