JavaWeb——HTML和CSS

news2024/9/21 15:39:25

HTML和CSS定义

标记语言

:比如XML:可扩展的标记语言，标签可以自己定义，解析时需要按照定义的规则去解析。

学习目的:掌握常见标签和常见样式的使用

HTML

结构:

 特点:

1.不区分大小写，不管是<html>还是<HTML>都是一样的作用

2.属性可以使用双引号或者单引号都是可以的

<img src="1.jpg"/>

<img src=’1.jpg‘/>

3.语法结构松散

像下面少个括号都没问题

<html>  </html

标签使用入门案例——新浪新闻

如图所示，该网页分为两个部分，标题和正文 

该图片已经不给看了

新浪新闻——标题排版

 

   使用如下代码使得排版基本上一致了

 

<!-- 文档类型为HTML -->
<!DOCTYPE html>

<html lang="en">

<head>
    <!-- 字符集为utf-8 -->
    <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>
</head>

<body>
    
    <img src="./img/news_logo.png"> 新浪政务 > 正文

    <h1>焦点访谈: 大国底气 新思想实大国粮仓</h1>
    <hr>
    2023年03月02日 21:50 央视网
    <hr>
</body>

</html>

 小结:

 新浪新闻——标题样式

样式——CSS引入的三种方式

 

样式——颜色表示形式:

样式——选择器:

 三种选择器的优先级

id选择>类选择>元素选择

使用如下代码

<!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>

    <!-- 方式2：内嵌样式 -->
    <style>
        h1 {
            /* color: red; */
            color: rgb(64, 77, 88);
            /* color: #ff00ff */
        }

        span {
            font-size: 16px;
        }

        /* .cls {
            color: #968D92;
        } */
        #time {
            color: #968D92;
        }
    </style>
    <!-- 方式3:外联样式 -->
    <!-- <link rel="stylesheet" href="./css/news.css"> -->
</head>

<body>
    <img src="./img/news_logo.png"> 新浪政务 > 正文
    <!-- 方式一：行内样式 -->
    <!-- <h1 style="color: grey;">焦点访谈: 大国底气 新思想实大国粮仓</h1> -->
    <h1>焦点访谈: 大国底气 新思想实大国粮仓</h1>
    <hr>
    <span id="time">2023年03月02日 21:50</span> <span>央视网</span>
    <hr>
</body>

</html>

小结

  新浪新闻——标题超链接

 

代码:

<!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: rgb(64, 77, 88);
        }

        span {
            font-size: 16px;
        }

        #time {
            color: #968D92;
        }

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

<body>
    <img src="./img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_blank">新浪政务</a> > 正文
    <h1>焦点访谈: 大国底气 新思想实大国粮仓</h1>
    <hr>
    <span id="time">2023年03月02日 21:50</span>
    <a href="https://news.cctv.com/2023/03/02/ARTIUCKEf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a>
    <hr>
</body>

</html>

 小结:

   新浪新闻——正文排版

<!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: rgb(64, 77, 88);
        }

        span {
            font-size: 16px;
        }

        #time {
            color: #968D92;
        }

        a {
            color: black;
            text-decoration: none;
            /*去除了下划线*/
        }

        p {
            text-indent: 35px;
            /*设置首行缩进*/
            line-height: 36px;
            /*设置行高*/
        }

        #plast {
            text-align: right;
        }
    </style>
</head>

<body>
    <img src="./img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_blank">新浪政务</a> > 正文
    <h1>焦点访谈: 大国底气 新思想实大国粮仓</h1>
    <hr>
    <span id="time">2023年03月02日 21:50</span>
    <a href="https://news.cctv.com/2023/03/02/ARTIUCKEf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a>
    <hr>
    <!--正文-->
    <video src="./video/1.mp4" controls="controls" width="950px"></video>
    <audio src="./audio/1.mp3" controls></audio>

    <p><strong>央视网消息</strong>
        这里是第一段
    </p>
    <p>人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。</p>

    <img src="img/1.jpg">
    <P>
       这里是第二段
    </P>

    <img src="img/2.jpg">
    <p>
        这里是第三段
    </p>

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

</html>

 小结

    新浪新闻——正文布局

盒子模型

 布局标签

 

效果图

需求效果图 

这里的的图片又没了

代码:

<!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: rgb(64, 77, 88);
        }

        span {
            font-size: 16px;
        }

        #time {
            color: #968D92;
        }

        a {
            color: black;
            text-decoration: none;
            /*去除了下划线*/
        }

        p {
            text-indent: 35px;
            /*设置首行缩进*/
            line-height: 36px;
            /*设置行高*/
        }

        #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="_blank">新浪政务</a> > 正文
        <h1>焦点访谈: 大国底气 新思想实大国粮仓</h1>
        <hr>
        <span id="time">2023年03月02日 21:50</span>
        <a href="https://news.cctv.com/2023/03/02/ARTIUCKEf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a>
        <hr>
        <!--正文-->
        <video src="./video/1.mp4" controls="controls" width="950px"></video>
        <audio src="./audio/1.mp3" controls></audio>

        <p><strong>央视网消息</strong>&nbsp;&nbsp;&nbsp;
            第一段
        </p>
        <p>人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。</p>

        <img src="img/1.jpg">
        <P>
           这里有一段
        </P>

        <img src="img/2.jpg">
        <p>
           这里又有一段
        </p>

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

</html>

 小结:

表格标签

代码:

<!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>Document</title>
</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>

效果图:

表单标签

主要作用:数据的采集，用于和数据库联动 

代码:

<!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>Document</title>
</head>

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

</html>

使用get请求和使用post请求，表单当中的数据会出现在不同的地方

使用get请求发送时会以字符串拼接的形式出现在url后面使用post请求发送时，数据会出现在请求体当中

注意点:此处一直在报一个错误，可以不用去管它，反正数据都正常显示在了请求体当中了。

crbug/1173575, non-JS module files deprecated. 

 小结：

表单项标签

代码：

<!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>

<label>标签的作用是使得我们选中后面文字的时候都可以聚焦到当前的的所有内

效果图展示

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

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

相关文章

错题笔记第一篇

错题笔记第一篇

目录 1. strlen的用法2. case3. switch4. 二分查找 1. strlen的用法 正确答案 &#xff1a;C strlen计算的是字符串的长度&#xff0c;二字符串是以\0结尾&#xff0c;而咱们并没有存储\0&#xff0c;后序的空间是未知的&#xff0c;strlen找不到\0就会一直找&#xff0c;所以它…
阅读更多...
如何使 VSCode 中 CMake Debug 的输出显示在 cmd 上而不是自带的 debug console

如何使 VSCode 中 CMake Debug 的输出显示在 cmd 上而不是自带的 debug console

如何使 VSCode 中 CMake Debug 的输出显示在 cmd 上而不是自带的 debug console 首先需要明确的一点是从 VSCode 插件商店下载的 CMake 是默认打印输出的结果在 debug console 中的&#xff0c;就像下面这样&#xff1a; 可以看到&#xff0c;一个问题是在加载 dll 时候会频繁…
阅读更多...
82. Python split方法-分割字符串

82. Python split方法-分割字符串

82. split方法-分割字符串 文章目录 82. split方法-分割字符串1. 什么是split( )函数2. split( )方法的语法格式如下&#xff1a;3. 实操练习4. 列表索引取值知识回顾5. 用split方法分解网址提取有效信息6. 从地址信息中拆分省、市、区信息 1. 什么是split( )函数 split[splɪ…
阅读更多...
深度学习模型压缩与优化加速

深度学习模型压缩与优化加速

1. 简介 深度学习&#xff08;Deep Learning&#xff09;因其计算复杂度或参数冗余&#xff0c;在一些场景和设备上限制了相应的模型部署&#xff0c;需要借助模型压缩、系统优化加速、异构计算等方法突破瓶颈&#xff0c;即分别在算法模型、计算图或算子优化以及硬件加速等层…
阅读更多...
《LearnUE——基础指南:上篇—2》——GamePlay架构之Level和World

《LearnUE——基础指南:上篇—2》——GamePlay架构之Level和World

目录 听说世界是由多个Level组成的 1.2.1 引言 1.2.2 建造大陆&#xff08;ULevel&#xff09; 1.2.3构建世界&#xff08;World&#xff09; 1.2.4总结 听说世界是由多个Level组成的 1.2.1 引言 上小节谈到Actor和Component的关系&#xff0c;UE利用Actor的概念组成了世…
阅读更多...
GitLab统计代码量

GitLab统计代码量

gitlab官方文档&#xff1a;https://docs.gitlab.com/ee/api/index.html 1、生成密钥 登录gitlab&#xff0c;编辑个人资料&#xff0c;设置访问令牌 2、获取当前用户所有可见的项目 接口地址 GET请求 http://gitlab访问地址/api/v4/projects?private_tokenxxx 返回参数 …
阅读更多...
【文章学习系列之模型】Non-stationary Transformers

【文章学习系列之模型】Non-stationary Transformers

本章内容 文章概况总体结构主要模块Series Stationarization&#xff08;序列平稳化模块&#xff09;De-stationary Attention&#xff08;逆平稳化注意力模块&#xff09; 实验结果消融实验总结 文章概况 《Non-stationary Transformers:Exploring the Stationarity in Time …
阅读更多...
Docker 存储

Docker 存储

Docker 存储 docker 默认存储方式docker 持久化存储Volumes &#xff08;卷&#xff09;简介推荐使用情况 Bind mounts &#xff08;绑定挂载&#xff09;简介推荐使用情况 绑定挂载与卷注意点 docker 非持久化存储tmpfs mounts &#xff08;tmpfs 挂载&#xff09;简介推荐使用…
阅读更多...
leetcode100——相同的树

leetcode100——相同的树

文章目录 题目详情分析Java完整代码 题目详情 leetcode100 给你两棵二叉树的根节点 p 和 q &#xff0c;编写一个函数来检验这两棵树是否相同。 如果两个树在结构上相同&#xff0c;并且节点具有相同的值&#xff0c;则认为它们是相同的。 示例&#xff1a; 分析 主要想法…
阅读更多...
vue3头像上传组件

vue3头像上传组件

用到了自定义组件v-model的双向绑定使用input的typefile这个原生html元素&#xff0c;通过监听change事件&#xff0c;获取到选择的文件&#xff08;注意&#xff0c;选择完文件值后&#xff0c;要把这个隐藏的input的typefile元素的value置为空&#xff0c;否则&#xff0c;下…
阅读更多...
【关于C++中----异常】

【关于C++中----异常】

文章目录 一、C语言中处理错误的方式二、C异常概念三、异常的使用3.1 异常的抛出和捕获3.2 异常的重新抛出3.3 异常安全3.4 异常规范 四、自定义异常体系五、C标准库的异常体系六、异常的优缺点 一、C语言中处理错误的方式 C语言中常见的错误类型包括&#xff1a;语法错误、逻…
阅读更多...
访问 virtualbox中的mysql

访问 virtualbox中的mysql

在 mysql.user 中存储这用户可访问的的host地址 select user,host from user;修改访问权限 可以使用sql语句 use mysql; mysql>update user set host % where user root; flush privileges或者使用mysql的权限语句 use mysql; Grant all on *.* to root% identified b…
阅读更多...
深入浅出C++ ——异常

深入浅出C++ ——异常

文章目录 一、C语言传统的处理错误的方式二、C异常概念三、异常的使用异常的抛出和捕获异常的重新抛出异常安全异常规范 四、自定义异常体系无、C标准库的异常体系六、异常的优缺点 一、C语言传统的处理错误的方式 C语言传统的处理错误的机制&#xff1a; 终止程序&#xff0…
阅读更多...
docker打包部署spring boot应用（mysql+jar+Nginx）

docker打包部署spring boot应用（mysql+jar+Nginx）

文章目录 一、基本准备二、mysql部署二、jar部署三、Nginx部署 一、基本准备 小唐拿的就是之前放置在我们服务器上的应用进行部署&#xff0c;主要就是mysql和jar还有Vue的部署。 目前已经有的是jar、已经打包好的vue 项目参考&#xff1a;小破站数据大屏可视化&#xff08;…
阅读更多...
【IPv6】IPv6有无状态地址分配及IPv6路由

【IPv6】IPv6有无状态地址分配及IPv6路由

IPv6有无状态区分 有状态可控、可管理。有IP地址管理者&#xff0c;能够识别客户端。根据不同客户端分配对应v6地址&#xff0c;客户端和服务器存在租期及续约。无状态无控、难管理。无IP地址管理者&#xff0c;没人识别客户端。客户端根据网关发送的相同的RA报文内容&#xf…
阅读更多...
path/to/sdkmanager --install “cmdline-tools；latest“

path/to/sdkmanager --install “cmdline-tools；latest“

执行flutter doctor时、报错Android Studio的命令行工具没有安装& 以及 android-licenses没有同意 其中提示错误语句如标题: path/to/sdkmanager --install "cmdline-tools;latest"之类的, 因为同意条款的时候,日志太多,所以把报错覆盖了.没有截图. 解决方法: …
阅读更多...
一个简单的servlet+Jsp+MySQL/Oracle程序

一个简单的servlet+Jsp+MySQL/Oracle程序

一个简单的servletJspMySQL/oracle程序 1. 创建项目 使用 IDEA 创建一个 Maven 项目. 1.1、File -> New Project Name:javaservlet4 Location:选择要存放的路径 Language:Java Build system:Maven 点击Create按钮 ​​​​​​​1.2、Pom.xml配置 <dependencies…
阅读更多...
整数在内存中的存储：原码、反码、补码 大小端字节序

整数在内存中的存储：原码、反码、补码 大小端字节序

本篇博客会讲解整数在内存中的存储形式&#xff0c;以及整数二进制的3种表示形式&#xff1a;原码、反码、补码&#xff0c;还有大小端的相关知识点。相信读完本篇博客&#xff0c;大家对内存的了解会上一个台阶。 注意&#xff1a;本篇博客讨论的是整数在内存中的存储&#x…
阅读更多...
【五一创作】【数学建模】matlab的常用函数运用(1)

【五一创作】【数学建模】matlab的常用函数运用(1)

文章目录 1. matlab基本常识2. 常用输入输出函数2.1 输出函数2.2 拼接函数&#xff08;字符串的合并&#xff09;2.3 输入函数 3. 求和函数3.1 向量求和3.2 矩阵求和 4. 提取矩阵元素4.1 取第x行第y列的元素4.2 取指定行或列的所有元素4.3 取指定某些行的所有元素 1. matlab基本…
阅读更多...
MongoDB聚合操作

MongoDB聚合操作

文章目录 一、单一聚合二、聚合管道2.1 $match / $project / $count2.2 $limit / $skip / $sort2.3 $group 分组查询2.4 $unwind 展开数组2.5 $lookup 左外连接2.6 $bucket 存储桶 三、MapReduce 提示&#xff1a;以下是本篇文章正文内容&#xff0c;MongoDB 系列学习将会持续更…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023