Web开发——HTMLCSS

1、概述

Web开发分前端开发和后端开发，前端开发负责展示数据，后端开发负责处理数据。
HTML&CSS是浏览器数据展示相关的内容。

1）网页的组成部分
文字、图片、音频、视频、超链接、表格等等
2）网页背后的本质
程序员写的前端代码
3）前端代码如何转换成用户眼中的网页
通过浏览器转化（解析和渲染）成用户看到的网页，浏览器中对代码进行解析和渲染的部分，称为 浏览器内核。浏览器多种多样，相同的网页如何让浏览器展示一致的观感，这依赖于Web标准：

  • HTML：负责网页的结构（页面元素和内容）
  • CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）
  • JavaScript：负责网页的行为（交互效果）

2 HTML & CSS

2.1 HTML和CSS概述

HTML：HyperText Markup Language，超文本标记语言

  • 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、
    视频等内容。
  • 标记语言：由标签构成的语言，HTML标签都是预定义好的。HTML代码直接在浏览器中运行，HTML标签由浏览器解析。
    CSS：Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。
    以下就是html代码以及css样式搭配之后的显示效果
    在这里插入图片描述

2.2 快速入门

在这里插入图片描述
创建hello.html文件，并写入以下html代码

<html>
    <head>
        <title>HTML 快速入门</title>
    </head>
    <body>
        <h1>Hello HTML</h1>
        <img src="1.jpg"/>
    </body>
</html>

head用于定义浏览器头部，body用于定义主题部分
title标签用于定义标题，h1是1号标题，img用于引入一张图片，采用相对地址
浏览器展示效果如下：
在这里插入图片描述
HTML中标签的特点：

  • 不区分大小写
  • 标签中的属性值，采用单引号和双引号都可以
  • 语法松散（即使不写闭合也能运行），建议语义严谨

2.3 CSS引入方式

在这里插入图片描述

2.4 颜色表示

在这里插入图片描述

2.5 CSS选择器

选择器是选取需设置样式的元素（标签）
语法如下：

选择器名 {
	css样式名：css样式值;
	css样式名：css样式值;
}

2.5.1 元素（标签）选择器

元素名称 {
	css样式名:css样式值；
}

示例：

div{
	color: red;
}

2.5.2 id选择器

#id属性值 {
	css样式名:css样式值；
}

示例：

#did {
	color: blue;
}

2.5.3 类选择器

.class属性值 {
	css样式名:css样式值；
}

示例：

.cls{
	color: green;
}

2.6 盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            box-sizing: border-box; /* 指定width height为盒子的高宽 */
            background-color: aquamarine; /* 背景色 */
            
            padding: 20px; /* 内边距, 上 右 下 左 */
            border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */
            margin: 30px; /* 外边距, 上 右 下 左 */
        }
    </style>
</head>

<body>
    
    <div>
        A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A 
    </div>

</body>
</html>

根据padding、border和margin来设置盒子相关属性

2.7 新浪新闻页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
    <style>
        h1 {
            color: #4D4F53;
        }
        
        #time {
            color: #968D92;
            font-size: 13px; /* 设置字体大小 */
        }

        a {
            color: black;
            text-decoration: none; /* 设置文本为一个标准的文本 */
        }

        /* 元素选择器 */
        p {
            text-indent: 35px; /* 设置首行缩进 */
            line-height: 40px; /* 设置行高 */
        }

        /* id选择器 */
        #plast {
            text-align: right; /* 对齐方式 */
        }

        #center {
            width: 65%;
            /* margin: 0% 17.5% 0% 17.5% ; */ /* 外边距, 上 右 下 左 */
            margin: 0 auto;
        }
    </style>
</head>
<body>
    
    <div id="center">
        <!-- 标题 -->
        <img src="img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a>  > 正文

        <h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>

        <hr>
        <span id="time">2023年03月02日 21:50</span>
        <span><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a></span>
        <hr>

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

        <!-- 音频 -->
        <!-- <audio src="audio/1.mp3" controls></audio> -->

        <p>
        <strong>央视网消息</strong> （焦点访谈）：*******************************************************
        </p>

        <p>
        人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。
        </p>

        <img src="img/1.jpg">

        <p>
            今年，我国启动了新一轮千亿斤粮食产能提升行动，这是一个新的起点。2015年以来，我国粮食产量连续8年稳定在1.3万亿斤以上，人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤，粮食产量提高了1500亿斤。
        </p>

        <img src="img/2.jpg">

        <p>
            ****************************************************************************
        </p>

        <p id="plast">
            责任编辑：王树淼 SN242
        </p>  
    </div>
</body>
</html>

2.8 表格标签

  • <table> : 用于定义整个表格, 可以包裹多个 ， 常用属性如下：
    • border：规定表格边框的宽度
    • width：规定表格的宽度
    • cellspacing: 规定单元之间的空间
  • <tr> : 表格的行，可以包裹多个
  • <td> : 表格单元格(普通)，可以包裹内容 , 如果是表头单元格，可以替换为 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-表格</title>
    <style>
        td {
            text-align: center; /* 单元格内容居中展示 */
        }
    </style>
</head>
<body>
    
    <table border="1px" cellspacing="0"  width="600px">
        <tr>
            <th>序号</th>
            <th>品牌Logo</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>
        <tr>
            <td>1</td>
            <td> <img src="img/huawei.jpg" width="100px"> </td>
            <td>华为</td>
            <td>华为技术有限公司</td>
        </tr>
        <tr>
            <td>2</td>
            <td> <img src="img/alibaba.jpg"  width="100px"> </td>
            <td>阿里</td>
            <td>阿里巴巴集团控股有限公司</td>
        </tr>
    </table>

</body>
</html>

展示效果如下
在这里插入图片描述

2.9 表单标签

2.9.1 表单

  • 表单场景: 表单就是在网页中负责数据采集功能的，如：注册、登录的表单。
  • 表单标签:
  • 表单属性:
    • action: 规定表单提交时，向何处发送表单数据，表单提交的URL。
    • method: 规定用于发送表单数据的方式，常见为： GET、POST。
      • GET：表单数据是拼接在url后面的， 如： xxxxxxxxxxx?
        username=Tom&age=12，url中能携带的表单数据大小是有限制的。
      • POST： 表单数据是在请求体（消息体）中携带的，大小没有限制。
  • 表单项标签: 不同类型的input元素、下拉列表、文本域等。
    • input: 定义表单项，通过type属性控制输入形式
    • select: 定义下拉列表
    • textarea: 定义文本域
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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="get">
        用户名: <input type="text" name="username">
        年龄: <input type="text" name="age">

        <input type="submit" value="提交">
    </form>

</body>
</html>

页面展示效果
在这里插入图片描述
get方式提交
在这里插入图片描述
参数直接拼接在url后面
post方式提交
在这里插入图片描述
并未直接拼接在后面

用户名: <input type="text" name="username">

表单项必须指定name属性才能够提交到服务端，否则无法提交该表单。

2.9.2 表单项

在这里插入图片描述
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-表单项标签</title>
</head>
<body>

<!-- value: 表单项提交的值 -->
<form action="" method="post">
     姓名: <input type="text" name="name"> <br><br>
     密码: <input type="password" name="password"> <br><br> 
     性别: <input type="radio" name="gender" value="1"> 男
          <label><input type="radio" name="gender" value="2"> 女 </label> <br><br>
     爱好: <label><input type="checkbox" name="hobby" value="java"> java </label>
          <label><input type="checkbox" name="hobby" value="game"> game </label>
          <label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>
     图像: <input type="file" name="image">  <br><br>
     生日: <input type="date" name="birthday"> <br><br>
     时间: <input type="time" name="time"> <br><br>
     日期时间: <input type="datetime-local" name="datetime"> <br><br>
     邮箱: <input type="email" name="email"> <br><br>
     年龄: <input type="number" name="age"> <br><br>
     学历: <select name="degree">
               <option value="">----------- 请选择 -----------</option>
               <option value="1">大专</option>
               <option value="2">本科</option>
               <option value="3">硕士</option>
               <option value="4">博士</option>
          </select>  <br><br>
     描述: <textarea name="description" cols="30" rows="10"></textarea>  <br><br>
     <input type="hidden" name="id" value="1">

     <!-- 表单常见按钮 -->
     <input type="button" value="按钮">
     <input type="reset" value="重置"> 
     <input type="submit" value="提交">   
     <br>
</form>

</body>
</html>

展示效果
在这里插入图片描述

3 文档查阅

文档地址：https://www.w3school.com.cn/index.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/636471.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

神经网络基础结构

神经网络基础结构

1. 神经网络 在神经网络中&#xff0c;每个神经元都有一个与之关联的权重和偏置&#xff0c;它们用于计算神经元的输出值。神经元接收来自上一层神经元的输入&#xff0c;并将这些输入与权重相乘并加上偏置&#xff0c;然后通过激活函数进行非线性处理&#xff0c;最终产生输出…
阅读更多...
Qt案例练习（有源码）

Qt案例练习（有源码）

项目源码和资源&#xff1a;Qt案例练习: qt各种小案例练习,有完整资源和完整代码 1.案例1 项目需求&#xff1a;中间为文本框&#xff0c;当点击上面的复选框和单选按钮时&#xff0c;文本框内的文本会进行相应的变化。 代码如下&#xff1a; #include "dialog.h" …
阅读更多...
【全开源】智能名片系统源码（Fastadmin+ThinkPHP和Uniapp）

【全开源】智能名片系统源码（Fastadmin+ThinkPHP和Uniapp）

数字时代的新名片&#xff0c;连接未来的桥梁 引言 在数字化浪潮的推动下&#xff0c;传统名片已经逐渐淡出人们的视线。取而代之的是智能名片系统&#xff0c;它以其高效、便捷和智能化的特点&#xff0c;成为了商务交流的新宠。而智能名片系统源码&#xff0c;作为其核心驱…
阅读更多...
nextcloud 安装部署

nextcloud 安装部署

php版本不对 ubuntu nginx 配置php 网站-CSDN博客 抄自chatgpt ubuntu完全卸载干净某个包-CSDN博客 以及设置基本的php nginx环境参照上面两篇博文 然后参照官方文档 Example installation on Ubuntu 22.04 LTS — Nextcloud latest Administration Manual latest document…
阅读更多...
datasheet芯片数据手册—新手入门学习（二）【8-18】

datasheet芯片数据手册—新手入门学习（二）【8-18】

参考芯片手册已经上传&#xff0c;可自行下载 因为芯片参考手册内容比较多&#xff0c;故再一次介绍本文内容主要讲解章节。 目录 8、内容介绍 命令真值表 9、Command Definitions 10、READ Operations &#xff08;1&#xff09;页面读取操作 &#xff08;2&#xff…
阅读更多...
Docker 开启 SSL 验证

Docker 开启 SSL 验证

最近看 OJ 项目的远程开发阶段&#xff0c;然后踩坑踩了 2 天&#x1f602; Docker 版本&#xff1a;在 CentOS 安装 sudo yum install docker-ce-20.10.9 docker-ce-cli-20.10.9 containerd.io Client: Docker Engine - CommunityVersion: 20.10.9API version: …
阅读更多...
1673. 找出最具竞争力的子序列

1673. 找出最具竞争力的子序列

题目 给定一个整数数组 nums 和一个正整数 k&#xff0c;返回长度为 k 且最具竞争力的 nums 子序列。 数组的子序列是从数组中删除一些元素&#xff08;可能不删除元素&#xff09;得到的序列。 在子序列 a 和子序列 b 第一个不相同的位置上&#xff0c;如果 a 中的数字小于…
阅读更多...
Redis系统架构中各个处理模块是干什么的？no.19

Redis系统架构中各个处理模块是干什么的？no.19

Redis 系统架构 通过前面的学习&#xff0c;相信你已经掌握了 Redis 的原理、数据类型及访问协议等内容。本课时&#xff0c;我将进一步分析 Redis 的系统架构&#xff0c;重点讲解 Redis 系统架构的事件处理机制、数据管理、功能扩展、系统扩展等内容。 事件处理机制 Redis…
阅读更多...
[论文精读]Variational Bayesian Last Layers

[论文精读]Variational Bayesian Last Layers

论文网址&#xff1a;Variational Bayesian Last Layers (arxiv.org) 论文代码&#xff1a;GitHub - VectorInstitute/vbll: Simple (and cheap!) neural network uncertainty estimation 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以…
阅读更多...
leetcode437 路径总和III-哈希表+前缀和

leetcode437 路径总和III-哈希表+前缀和

题目 给定一个二叉树的根节点 root &#xff0c;和一个整数 targetSum &#xff0c;求该二叉树里节点值之和等于 targetSum 的 路径 的数目。 路径 不需要从根节点开始&#xff0c;也不需要在叶子节点结束&#xff0c;但是路径方向必须是向下的&#xff08;只能从父节点到子节…
阅读更多...
服务器数据恢复—EVA存储多块硬盘离线导致部分LUN丢失的数据恢复案例

服务器数据恢复—EVA存储多块硬盘离线导致部分LUN丢失的数据恢复案例

服务器数据恢复环境&#xff1a; 1台某品牌EVA4400控制器3台EVA4400扩展柜28块FC硬盘。 服务器故障&#xff1a; 由于两块磁盘掉线导致存储中某些LUN不可用&#xff0c;某些LUN丢失&#xff0c;导致存储崩溃。 服务器数据恢复过程&#xff1a; 1、由于EVA4400存储故障是某些磁…
阅读更多...
Web API——获取DOM元素

Web API——获取DOM元素

目录 1、根据选择器来获取DOM元素 2.、根据选择器来获取DOM元素伪数组 3、根据id获取一个元素 4、通过标签类型名获取所有该标签的元素 5、通过类名获取元素 目标&#xff1a;能查找/获取DOM对象 1、根据选择器来获取DOM元素 语法&#xff1a; document.querySelector(css选择…
阅读更多...
python从0开始学习（十二）

python从0开始学习（十二）

目录 前言 1、字符串的常用操作 2、字符串的格式化 2.1 格式化字符串的详细格式&#xff08;针对format形式&#xff09; ​编辑 总结 前言 上一篇文章我们讲解了两道关于组合数据类型的题目&#xff0c;本篇文章我们将学习新的章节&#xff0c;学习字符串及正则表达式。 …
阅读更多...
C++|红黑树(分析+模拟实现插入)

C++|红黑树(分析+模拟实现插入)

目录 一、概念 二、红黑树插入的实现 2.1红黑树节点的定义 2.2红黑树基础架构 2.3红黑树的插入 2.3.1按照二叉搜索树的规则插入新结点 2.3.2检测新插入节点&#xff0c;是否破坏红黑树性质来进行调整 2.3.2.1cur为红&#xff0c;p为红&#xff0c;g为黑&#xff0c;u存…
阅读更多...
好用的桌面备忘录是哪个？备忘录软件哪个更好用？

好用的桌面备忘录是哪个？备忘录软件哪个更好用？

备忘录软件已成为我们日常生活和工作中不可或缺的工具&#xff0c;它能帮助我们记录重要事项、安排日程&#xff0c;从而提高工作效率&#xff0c;减少遗忘。在繁忙的工作和生活中&#xff0c;一款好用的备忘录软件往往能让我们事半功倍。 在众多的备忘录软件中&#xff0c;敬…
阅读更多...
Jenkins 构建 Web 项目：构建服务器和部署服务器分离的情况

Jenkins 构建 Web 项目：构建服务器和部署服务器分离的情况

构建命令 #!/bin/bash node -v pnpm -v pnpm install pnpm build:prod # 将dist打包成dist.zip zip -r dist.zip dist
阅读更多...
2024年艺术鉴赏与文化传播国际会议（AACC 2024）

2024年艺术鉴赏与文化传播国际会议（AACC 2024）

2024年艺术鉴赏与文化传播国际会议&#xff08;AACC 2024&#xff09; 2024 International Conference on Art Appreciation and Cultural Communication 【重要信息】 大会地点&#xff1a;贵阳 大会官网&#xff1a;http://www.icaacc.com 投稿邮箱&#xff1a;icaaccsub-co…
阅读更多...
VS QT 里头文件的＜＞和““的区别

VS QT 里头文件的＜＞和““的区别

今天在跑项目的时候遇到这么个问题&#xff0c;在添加api宏定义的时候&#xff0c;不加显示无法识别的外部错误&#xff0c;加了显示找不到文件。反正就是怎么都是错的&#xff0c;但是我检查了CmakeLists、模块所在文件夹、项目路径都是没有问题的。非常奇怪。 然后就开始尝试…
阅读更多...
一阶数字高通滤波器

一阶数字高通滤波器

本文的主要内容包含一阶高通滤波器公式的推导和数字算法的实现以及编程和仿真 1 计算公式推导 1.1.2 算法实现及仿真 利用python实现的代码如下&#xff1a; import numpy as np # from scipy.signal import butter, lfilter, freqz import matplotlib.pyplot as plt #2pifW…
阅读更多...
【LeetCode 随笔】面试经典 150 题【中等＋困难】持续更新中。。。

【LeetCode 随笔】面试经典 150 题【中等＋困难】持续更新中。。。

文章目录 380.【中等】O(1) 时间插入、删除和获取随机元素238.【中等】除自身以外数组的乘积134.【中等】 加油站135.【困难】分发糖果42.【困难】接雨水 &#x1f308;你好呀&#xff01;我是 山顶风景独好 &#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面…
阅读更多...
最新文章

Copyright @ 2022~2023