HTML、CSS

news2024/9/24 11:20:42

初识web前端

web标准

  • Web标准也称为网页标准，由一系列的标准组成，大部分由W3C (World Wide Web Consortium，万维网联盟) 负责制定。
  • 三个组成部分:
    • HTML: 负责网页的结构(页面元素和内容)。
    • CSS: 负责网页的表现(页面元素的外观、位置等页面样式，如: 颜色、大小等)。
    • Javascript: 负责网页的行为(交互效果)。

什么是HTML、CSS？

HTML

HTML (HyperTextMarkupLanguage): 超文本标记语言。

  • 超文本: 超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。

  • 标记语言: 由标签构成的语言

    • HTML标签都是预定义好的。例如: 使用<a>展示超链接，使用<img>展示图片，<video>展示视频。
    • HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

    标签搜索地址

标题标签

  • 标签：<h1>...</h1> (h1-> h6 重要程度依次降低)
  • 注意：HTML 标签都是预定义好的，不能自己随意定义。

水平线标签

<hr>

图片标签

<img src="..." width="..." height="...">

  • 绝对路径：绝对磁盘路径 D:/xxxx,绝对网络路径 https://xxxx
  • 相对路径：从当前文件开始查找。./：当前目录，../：上级目录

<span> 标签

  • 是一个在开发网页时大量会用到的没有语义的布局标签
  • 特点: 一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开

视频标签

<video>

  • src : 规定视频的 url
  • controls : 显示播放控件
  • width : 播放器的宽度
  • height : 播放器的高度

音频标签

<audio>

  • src : 规定音频的 url
  • controls : 显示播放控件

段落标签

<p>

文本加粗标签

<b> / <strong>

表格标签

  • 场景：在网页中以表格(行、列)形式整齐展示数据，如: 班级表。

  • 标签：
    在这里插入图片描述

表单标签

  • 场景：在网页中主要负责数据采集功能，如 注册、登录等数据采集。

  • 标签：<form>

    表单项

    不同类型的 input 元素、下拉列表、文本域等。

    <input>: 定义表单项，通过type属性控制输入形式。

    在这里插入图片描述

    <select>: 定义下拉列表。

    <textarea>: 定义文本域。

    在这里插入图片描述

  • 属性：
    <action>: 当提交表单时向何处发送表单数据，表单数据提交的URL地址。

    <method>: 发送表单数据的方式。

    • GET: 表单数据拼接在url后面，?username=java，大小有限制。

    • POST：表单数据在请求体中携带，大小没有限制。

  • 注意：表单项必须有name属性才可以提交。

  • HTML结构标签

    <html>
	<head>
		<title>标题</title>
	</head>
	<body>
	
	</body>
</html>

  • 特点

    • HTML标签不区分大小写
    • HTML标签属性值单双引号都可以
    • HTML语法松散

  • 注意

    • 在HTML中无论输入多少个空格，只会显示一个。可以使用空格占位符：&nbsp

例子：

01.新浪新闻-标题-排版.html :

<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 字符集为UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置浏览器的兼容性 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈</title>
</head>
<body>
    <!-- 
    img标签：
        src: 图片资源路径
        width: 宽度 (px,像素；%，相对于父元素的百分比)
        height: 高度 (px,像素；%，相对于父元素的百分比)
     路径书写方式：
        绝对路径：
            1.绝对磁盘路径：D:\Users\liuxu\HTML\img\news_logo.png
                <img src="D:\Users\liuxu\HTML\img\news_logo.png">
            2.绝对网络路径：https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png
                <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">
        相对路径：
            ./：当前目录，./可以省略
                <img src="./img/news_logo.png">或 <img src="img/news_logo.png">
            ../：上一级目录
        -->
    <img src="img/news_logo.png" width="160px"> 新浪 > 正文
    <h1>焦点访谈</h1>
    <hr>
    2023年03月02日 21:50 新浪网
    <hr>
</body>
</html>

超链接

  • 标签：<a href="..." target="...">新浪网</a>
  • 属性：
    • href : 指定资源访问的 url
    • target : 指定在何处打开资源链接
    • _self : 默认值，在当前页面打开
    • blank : 在新的空白页面打开

例子：

04.新浪新闻-标题-超链接.html ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈</title>
     <style>
        h1 {
                color: #4e4f53;
        }
        #time {
                color: #8a8a8a;
        }
        a {
                color:black;  
                text-decoration: none;  /* 设置文本为一个标准的文本 */
        }
     </style>
</head>
<body>
    <img src="img/news_logo.png" width="160px"> <a href="https://gov.sina.com.cn/" target="_self">新浪</a> > 正文
    <h1>焦点访谈</h1>
    <hr>
    <span class="cls" id="time">2023年03月02日</span>    
    <span class="cls">21:50 <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">新浪网</a></span>       
    <hr>
</body>
</html>

CSS

CSS (Cascading Style Sheet): 层叠样式表，用于控制页面的样式(表现)。

CSS 引入方式

  • 行内样式: 写在标签的style属性中(不推荐)
  • 内嵌样式: 写在style标签中(可以写在页面任何位置，但通常约定写在head标签中)
  • 外联样式: 写在一个单独的.css文件中(需要通过 link标签在网页中引入)

颜色表示方式

在这里插入图片描述

例子：

02.新浪新闻-标题-样式1.html :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈</title>
    <!-- 方式二：内嵌样式 -->
     <style>
        h1 {
                color: #4e4f53;
        }
     </style>
     <!-- 方式三：外联样式 -->
    <!-- <link rel="stylesheet" href="./css/news.css" -->
</head>
<body>
    <img src="img/news_logo.png" width="160px"> 新浪 > 正文
    <!-- 方式一：行内样式 -->
    <!-- <h1 style="color:rgb(77, 79, 83);">焦点访谈</h1> -->
    <h1>焦点访谈</h1>
    <hr>
    2023年03月02日 21:50 新浪网
    <hr>
</body>
</html>

new.css:

h1 {
    color: #4e4f53;
}

CSS 选择器：用来选取需要设置样式的元素（标签）

三种选择器的优先级：id 选择器 > 类选择器 > 元素选择器

  • 元素选择器

    在这里插入图片描述

  • id 选择器

    在这里插入图片描述

  • 类选择器

    在这里插入图片描述

CSS 属性

  • color : 设置文本的颜色
  • font-size : 字体大小 （注意：记得加 px）
  • text-decoration : 规定添加到文本的修饰，none表示定义标准的文本。

CSS 样式

  • line-height : 设置行高
  • text-indent : 定义第一个行内容的缩进
  • text-align : 规定元素中的文本的水平对齐方式

例子：

03.新浪新闻-标题-样式2.html ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈</title>
     <style>
        h1 {
                color: #4e4f53;
        }
        /* 元素选择器 */
        /* span {
                color: #8a8a8a;
        } */
        /* 类选择器 */
        /* .cls {
                color: #8a8a8a;
        } */
        /* id 选择器 */
        #time {
                color: #8a8a8a;
                font-size: 13px; /* 设置字体大小 */
        }
     </style>
</head>
<body>
    <img src="img/news_logo.png" width="160px"> 新浪 > 正文
    <h1>焦点访谈</h1>
    <hr>
    <span class="cls" id="time">2023年03月02日</span>    
    <span class="cls">21:50 新浪网</span>       
    <hr>
</body>
</html>

页面布局

  • 盒子 : 页面中所有的元素(标签)，都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局。

  • 盒子模型组成 : 内容区域(content)，内边距区域(padding)，边框区域(border)，外边距区域(margin)。

    在这里插入图片描述

  • 标签 : <div> <span>

  • 特点 :

    • div 标签 :

      • 一行只显示一个(独占一行)
      • 宽度默认是父元素的宽度，高度默认由内容撑开
      • 可以设置宽高(width、height)

    • span 标签 :

      • 一行可以显示多个
      • 宽度和高度默认由内容撑开
      • 不可以设置宽高(width、height)

      注意 : 如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上 - 位置，如: padding-top、padding-left、padding-right .

例子：

06.新浪新闻-正文-布局.html ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈</title>
     <style>
        h1 {
                color: #4e4f53;
        }
        #time {
                color: #8a8a8a;
        }
        a {
                color:black;  
                text-decoration: none; 
        }
        p {
                text-indent: 35px; /* 设置首行缩进 */
                line-height: 40px; /* 设置行高 */
        }
        #plast{
                color: #8a8a8a;
                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" width="160px"> <a href="https://gov.sina.com.cn/" target="_self">新浪</a> > 正文
    <h1>焦点访谈</h1>
    <hr>
    <span class="cls" id="time">2023年03月02日</span>    
    <span class="cls">21:50 <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">新浪网</a></span>       
    <hr>
    <!-- 正文 -->
     <!-- 视频 -->
    <video src="video/news.mp4" controls width="950px"></video>
     <!-- 音频 -->
        <!-- <audio src="audio/news.m4a" controls ></audio> -->
    <p>
        <b>新浪网消息</b>（焦点访谈）：我们把饭碗牢牢端在自己手中，连续八年1.3万亿斤，这个沉甸甸的数据是如何取得的呢？
    </p>
    <p>
        人勤春来早，春耕农事忙。立春之后，由南到北，春天的田野处处生机盎然。
    </p>
    <img src="img/1.jpg" width="950px">
    <p>
        今年，人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤，粮食产量提高了1500亿斤。
    </p>
    <img src="img/2.jpg" width="950px">
    <p>
       在极端天气事件多发、频发的情况下取得的，是在从事农业生产的人口减少的条件下取得的。
    </p>
    <img src="img/3.jpg" width="680px">
    <p>
        叶兴庆：“要实现这样一个目标，确保产能，适度进口，科技支撑。”
    </p>
    <p id="plast">
        责任编辑：王树淼 SN242
    </p>
    </div>
</body>
</html>

07.HTML-表单项标签.html :

<!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="" method="post">
        姓名：<input type="text" name="name"><br><br>
        密码：<input type="password" name="password"><br><br>
        性别：<label><input type="radio" name="gender" value="1">男</label>
              <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="datetime-local" name="datetime"><br><br>
        邮箱：<input type="email" name="email"><br><br>
        年龄：<input type="text" 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>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Tableau|一入门

Tableau|一入门

一 什么是BI工具 BI 工具即商业智能&#xff08;Business Intelligence&#xff09;工具&#xff0c;是一种用于收集、整理、分析和展示企业数据的软件系统&#xff0c;其主要目的是帮助企业用户更好地理解和利用数据&#xff0c;以支持决策制定。 主要功能&#xff1a; 1.数据…
阅读更多...
Vue3使用通信组件库mitt作为事件总线实现跨组件通信

Vue3使用通信组件库mitt作为事件总线实现跨组件通信

mitt 介绍: Mitt 是一个在 Vue.js 应用程序中使用的小型事件总线库。该库允许组件进行通信&#xff0c;而不必过度依赖父级或子级组件之间的 props。 先看项目用例&#xff1a; 【 以下转载自&#xff1a;https://blog.csdn.net/yuanlong12178/article/details/139579299 】…
阅读更多...
虚拟机安装xubuntu

虚拟机安装xubuntu

新建一个新的虚拟机&#xff0c;选择自定义安装 默认下一步 选择稍后安装操作系统 选择所要创建的系统及版本 填写虚拟机的名称及创建的虚拟机保存的位置 选择处理器和内核的数量 处理器数量指的是&#xff1a;虚拟的CPU数量。 每个处理器的内核数量指的是&#xff1a;虚拟CPU…
阅读更多...
Ubuntu 24.04.1 LTS 安装 node 16.20.2环境

Ubuntu 24.04.1 LTS 安装 node 16.20.2环境

目录 step1&#xff1a;确认版本 step2&#xff1a;选择方式 step3&#xff1a;二进制文件安装 step1&#xff1a;确认版本 不同的版本情况可能有稍许不同&#xff0c;尽可能环境安装前版本保持一致&#xff1b; lsb_release -a 或者 cat /etc/os-release 可以查看版本信…
阅读更多...
【机器学习】---元强化学习

【机器学习】---元强化学习

目录 1. 元学习简介1.1 什么是元学习&#xff1f;1.2 元学习的应用 2. 强化学习基础2.1 什么是强化学习&#xff1f;2.2 强化学习的基本框架2.3 深度强化学习 3. 元强化学习的概念与工作原理3.1 元强化学习是什么&#xff1f;3.2 元强化学习与普通强化学习的区别 4. 元强化学习…
阅读更多...
Arthas ognl（执行ognl表达式）

Arthas ognl（执行ognl表达式）

文章目录 二、命令列表2.1 jvm相关命令2.1.12 ognl&#xff08;执行ognl表达式&#xff09;举例1&#xff1a;获取静态属性举例2&#xff1a;调用静态方法 二、命令列表 2.1 jvm相关命令 2.1.12 ognl&#xff08;执行ognl表达式&#xff09; 使用场景&#xff1a; Arthas 的 …
阅读更多...
【Vue系列五】—Vue学习历程的知识分享！

【Vue系列五】—Vue学习历程的知识分享！

前言 本篇文章讲述前端工程化从模块化到如今的脚手架的发展&#xff0c;以及Webpack、Vue脚手架的详解&#xff01; 一、模块化 模块化就是把单独的功能封装到模块&#xff08;文件&#xff09;中&#xff0c;模块之间相互隔离&#xff0c;但可以通过特定的接口公开内部成员…
阅读更多...
黑马智数Day2

黑马智数Day2

表单基础校验实现 基础双向绑定 v-model <el-input v-model"formData.username" /> <script> export default {name: Login,data() {return {formData: {username: ,password: ,remember: }}} } </script> 表单校验配置 按照业务要求编写校验规…
阅读更多...
231. 2 的幂 简单递归 python除法的类型

231. 2 的幂 简单递归 python除法的类型

已解答 简单 相关标签 相关企业 给你一个整数 n&#xff0c;请你判断该整数是否是 2 的幂次方。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 如果存在一个整数 x 使得 n 2x &#xff0c;则认为 n 是 2 的幂次方。 示例 1&#xff1a; 输入&…
阅读更多...
【ollama 在linux 上离线部署 本地大模型】

【ollama 在linux 上离线部署 本地大模型】

本文继续来讲如何在linux上部署离线本地智能大模型&#xff0c;前篇如下&#xff1a;window上部署离线大模型 首先还是安装ollama linux版本&#xff0c;如果完全离线的话&#xff0c;可以从github上下载一个linux 版本的压缩包传上去 git hub上搜索ollama 找到右下角 找到li…
阅读更多...
Centos/fedora/openEuler 终端中文显示配置

Centos/fedora/openEuler 终端中文显示配置

注意&#xff1a;这里主要解决的是图形界面、远程登录界面的中文乱码问题 系统原生的终端&#xff08;如虚拟机系统显示的终端&#xff09;&#xff0c;由于使用的是十分原始的 TTY 终端&#xff0c;使用点阵字体进行显示&#xff0c;点阵字体不支持中文&#xff0c;因此无法显…
阅读更多...
用友与万里汇达成战略合作，共创出海企业司库管理新篇章

用友与万里汇达成战略合作，共创出海企业司库管理新篇章

新加坡 2024年9月23日 在全球数字化浪潮的推动下&#xff0c;中国企业正加速融入全球贸易体系&#xff0c;面对复杂多变的国际市场环境&#xff0c;寻求更高效、便捷的跨境贸易解决方案成为众多出口企业的迫切需求。 9月23日&#xff0c;用友网络科技股份有限公司&#xff08…
阅读更多...
KDD2024 时序论文

KDD2024 时序论文

1、Generative Pretrained Hierarchical Transformer for Time Series Forecasting paper: https://dl.acm.org/doi/abs/10.1145/3637528.3671855 code&#xff1a;GitHub - SiriZhang45/FRNet: Code Implementation of FRNet 2、Fredformer: Frequency Debiased Transforme…
阅读更多...
[Redis][持久化][上][RDB]详细讲解

[Redis][持久化][上][RDB]详细讲解

目录 0.前言1.RDB0.是什么&#xff1f;1.触发机制2.流程说明3.RDB文件的处理4.RDB的优缺点 0.前言 Redis ⽀持 RDB 和 AOF 两种持久化机制&#xff0c;持久化功能有效地避免因进程退出造成数据丢失问题&#xff0c;当下次重启时利⽤之前持久化的⽂件即可实现数据恢复 RDB ->…
阅读更多...
展锐平台的手机camera 系统isptool 架构

展锐平台的手机camera 系统isptool 架构

展锐平台的isptool 主要用于支持展锐各代芯片isp的各效果模块快速tuning和参数生成打包。 具体需要&#xff1a; 一、工具段能在线实时预览到调试sensor经过isp 处理后的图像&#xff0c;也就是各模块的参数在当下实时生效&#xff0c;通过工具能在PC 上在线观看到修改的效果。…
阅读更多...
[笔记]2024大厂变频器，电机参数一览

[笔记]2024大厂变频器，电机参数一览

注意中心高&#xff0c;在用铁心规格&#xff0c;功率换算表 温升曲线在预防性维护过程能用到 注意各类电流参数,上面双极对&#xff0c;下面3极对。 另一种极对数 4极对的电机参数可参考&#xff0c;不常用。 emc滤波&#xff0c; Sto,通讯接口 颜色区分的接口设计 一组新强…
阅读更多...
基于MaxScale搭建MariaDB读写分离集群的方法【2024年最新版】

基于MaxScale搭建MariaDB读写分离集群的方法【2024年最新版】

1、什么是MaxScale MaxScale是MariaDB数据库的一个中间件&#xff0c;为MariaDB提供代理服务&#xff0c;主要可以实现读写分离和一定的负载均衡功能&#xff0c;其中读写分离可将读操作和写操作分离到不同的数据库服务器上&#xff0c;以提高系统的整体性能和扩展性&#xff…
阅读更多...
Pandas的入门操作-DataFrame对象

Pandas的入门操作-DataFrame对象

目录 类型 通过 pd.read_csv(xxx)返回df 将Series对象通过to_frame()转成df 使用列表 加元组返回df 使用字典返回df DataFrame对象的常用属性和方法 常用属性 常用方法 实例 DataFrame对象的运算 加载数据 字符串的运算 字符串和数字(会报错) 根据下表获取数据 类…
阅读更多...
第 1 章：Vue 核心

第 1 章：Vue 核心

1. Vue 简介 1.1. 官网 英文官网: https://vuejs.org/中文官网: https://cn.vuejs.org/&#xff1a;中文官网里面【教程】和【API】是比较重要的。用到api就去查询&#xff0c;实践当中记忆更牢靠。 风格指南&#xff1a;官方推荐写的一个代码风格cookbook&#xff1a;编写v…
阅读更多...
浙江省计算机三级网络及安全技术资料(最后有我考完后的想法）

浙江省计算机三级网络及安全技术资料(最后有我考完后的想法）

还有一周就要考试了&#xff0c;网上几乎找不到浙江省的计算机三级网络及安全技术的复习资料&#xff0c;大部分都是全国计算机三级的复习资料&#xff0c;气得我直接对着大纲一部分一部分找过去。以后的友友们需要的自取&#xff0c;为了能够顺利通过浙江省计算机三级考试&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023