【前端】第二章 HTML、CSS、JavaScript、DOM和JSON

最新推荐文章于 2024-08-17 21:04:51 发布
最新推荐文章于 2024-08-17 21:04:51 发布
阅读量145 收藏 1
点赞数
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45593575/article/details/119321473
版权

第二章 HTML、CSS、JavaScript、DOM和JSON

文章目录

一、HTML

1.表单

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>form表单</title>
</head>
<body>
<!-- get方式提交的数据都在地址栏里 -->
<!-- <form method="get"> -->
<!-- post提交安全不显示数据 -->
<form method="post">
  <table border="1px" bgcolor="bisque" cellspacing="0" width="35%" cellpadding="3">
    <th colspan="2">注册表单</th>
    <tr>
      <td>用户名:</td>
      <td><input type="text" name="user"/></td>
    </tr>
    <tr>
      <td>密码:</td>
      <td><input type="password" name="pwd"/></td>
    </tr>
    <tr>
      <td>确认密码:</td>
      <td><input type="password" name="repwd"/></td>
    </tr>
    <tr>
      <td>昵称:</td>
      <td><input type="text" name="nick"/></td>
    </tr>
    <tr>
      <td>邮箱:</td>
      <td><input type="text" name="mail"/></td>
    </tr>
    <tr>
      <td>性别:</td>
      <td>
        <!-- 不配name属性,性别是多选!!  sex属性的值按照1 2 提交-->
        <!-- input中,type如果是radio或者checkbox的话,不配置value属性的话,默认提交on -->
        <input type="radio" name="sex" value="1"/>男
        <input type="radio" name="sex" value="2"/>女
      </td>
    </tr>
    <tr>
      <td>爱好:</td>
      <td>
        <!-- name必须配,多选 ,提交的值就是1 2 3 -->
        <input type="checkbox" name="like" value="1"/>篮球
        <input type="checkbox" name="like" value="2"/>足球
        <input type="checkbox" name="like" value="3"/>排球
      </td>
    </tr>
    <tr>
      <td>城市:</td>
      <td>
        <select name="city"> <!-- 实现多选,按name提交数据 1 2-->
          <option value="1">北京</option>
          <option value="2">上海</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>头像:</td>
      <td>
        <input type="file" name="path"/>
      </td>
    </tr>
    <tr>
      <td colspan="2" align="center">
        <button type="submit">提交</button>
      </td>
    </tr>
  </table>
</form>
</body>
</html>

2.小票

在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>永和大王账单</title>
</head>
<body>
<div>顾客联</div>
<div>请您留意取餐账单号</div>
<div>自取顾客联</div>
<div>永和大王（北三环西路店）</div>
<div>010-62112313</div>
<div>--结账单--</div>
<div>账单号：P000009</div>
<div>账单类型：食堂</div>
<div>人数：1</div>
<div>收银员：张静</div>
<div>开单时间：2018-04-17 07:24:11</div>
<div>结账时间：2018-04-17 07:24:22</div>

<hr style="border : 1px dashed ;" />
<div>
  <table>
    <tr>
      <td width="40">数量</td>
      <td width="130">品项</td>
      <td>金额</td>
    </tr>
    <tr>
      <td>1</td>
      <td>油条豆浆套餐</td>
      <td>7.00</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>1 X --非矾油条</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>1 X --现磨豆浆（热/甜）</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</div>
<hr style="border : 1px dashed ;" />
<div>
  <table>
    <tr>
      <td width="140">支付宝花呗一元早餐</td>
      <td width="30">1</td>
      <td width="30" align="right">-3.00</td>
    </tr>
    <tr>
      <td>合计</td>
      <td>&nbsp;</td>
      <td width="30" align="right">4.00</td>
    </tr>
    <tr>
      <td>支付宝</td>
      <td>&nbsp;</td>
      <td width="30" align="right">1.00</td>
    </tr>
    <tr>
      <td>支付宝补贴</td>
      <td>&nbsp;</td>
      <td width="30" align="right">3.00</td>
    </tr>
  </table>
</div>
<hr style="border : 1px dashed ;" />
<div>打印时间：2018-04-17 07:24:23</div>
<hr style="border : 1px dashed ;" />
<div>根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整。</div>
<div><img src=""></div>
<div>官网：www.yonghe.com.cn</div>
<div>加盟热线：86-21-60769397 或 86-21-60799002</div>
<br/>
</body>
</html>

3.注册页面

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<style>
  tr{
    display:block;
    margin-bottom:10px;
  }
  button{
    background-color: #4B95FF;
  }
  button:hover{
    background-color: #2A75FE;
    cursor: pointer;
  }
  input{
    padding-left: 8px;
    color: #999999;
    border-radius: 5px;
    border:1px solid #999999;
    outline-color: #4B95FF;
    outline-offset: 0;
    height: 40px;
  }
  td{
    text-align:right;
  }
</style>
<body style="background-color: #F6F5FA">
<div align="center" style="color: #999999" >
  <div style="margin-top: 80px;background-color: white;width: 500px;border-radius: 10px">
    <div style="padding-top: 50px">
      <table width="">
        <tr>
          <td colspan="2">
            <input type="text" name="phone" value="手机号" style="width: 400px">
          </td>
          <td></td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="text" name="password" value="密码" style="width: 400px">
          </td>
          <td></td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="text" name="confirm" value="确认密码" style="width: 400px">
          </td>
          <td></td>
        </tr>
        <tr>
          <td>
            <input type="text" name="verify" value="验证码" style="width: 100px">
          </td>
          <td>
            <img src="1.png">
            <button style="border: 1px solid #999999;background-color: white">看不清？换一张</button>
          </td>
        </tr>
        <tr>
          <td>
            <input type="text" name="code" value="动态码" style="width: 220px">
          </td>
          <td style="width: 175px">
            <button type="button" style="width: 120px;height: 45px;  color: white; border-radius: 5px;border: 0">获取动态码</button>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <button type="submit" style="width: 411px;height: 45px;  color: white; border-radius: 5px;border: 0">注册</button>
          </td>
          <td></td>
        </tr>
        <tr>
          <td style="font-size: 12px;line-height: 46px" >
            <input type="checkbox" style="float: left; cursor: pointer">
            我已阅读并同意<a href="" style="text-decoration: none ;color:red">《用户注册协议》</a>
          </td>
          <td style="font-size: 12px;line-height: 45px;width: 208px">
            已有账号？<a href="" style="color: #4B95FF;text-decoration: none"><i>立即登录</i></a>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>
</body>
</html>

4.音视频播放

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音频视频播放</title>
</head>
<body>
  <audio controls="controls">
    <source src="op.mp3">
  </audio>
  <video controls="controls" loop="loop" style="height: 600px">
      <source src="op.mp4">
  </video>
</body>
</html>

二、CSS

京淘电商注册页面
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<style>
  input[type="text"]{
    padding-left: 8px;
    color: #999999;
    border-radius: 5px;
    border:1px solid #999999;
    outline-color: #999999;
    outline-offset: 0;
    height: 40px;
    width: 350px;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  button{
    width: 200px;
    height: 40px;
    background-color: #E64346;
    color: white;
    font-size: 20px;
    text-align: center;
    border: 0;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  button:hover{
    background-color: #F45344;
  }
  .notice{
    color: #999999;
    font-size: 12px;
  }
  #agreement{
    text-decoration: none;

  }
  #agreement:link{
    color: #999999;
  }
  #agreement:visited{
    color: #999999;
  }
  #agreement:hover{
    color: #F45344;
  }
  input[type="checkbox"]:hover{
    cursor: pointer;
  }
</style>
<body style="background-color: #F6F5FA">
<div align="center">
  <div align="center" style="margin-top: 80px;background-color: white;width: 450px;border-radius: 10px">
    <form method="post">
      <table>
        <tr>
          <td style="text-align: center"><h1>用户注册</h1></td>
        </tr>
        <tr>
          <td align="center">
            <input type="text" placeholder="用户名" name="username">
          </td>
        </tr>
        <tr>
          <td class="notice">支持中文、字母、数字、”-“、”_“的组合，4-20个字符</td>
        </tr>
        <tr>
          <td align="center">
            <input type="text" placeholder="设置密码" name="password">
          </td>
        </tr>
        <tr>
          <td class="notice">建议使用数字、字母和符号两种以上的组合，6-20个字符</td>
        </tr>
        <tr>
          <td align="center">
            <input type="text" placeholder="确认密码" name="refirmpwd">
          </td>
        </tr>
        <tr>
          <td class="notice">两次密码请保持一致</td>
        </tr>
        <tr>
          <td align="center"><input type="text" placeholder="验证邮箱" name="email"></td>
        </tr>
        <tr>
          <td style="text-align: center;font-size: 14px"  class="notice">
            <div style="margin-bottom: 10px;margin-top: 10px">
              <input type="checkbox" name="agreement">
              <span>我已阅读并同意</span>
              <a id="agreement" href="">《京淘用户注册协议》</a>
            </div>
          </td>
        </tr>
        <tr>
          <td align="center">
            <button>立即注册</button>
          </td>
        </tr>
      </table>
    </form>
  </div>
</div>
</body>
</html>

三、JavaScript、DOM和JSON

JavaScript、DOM 和 JSON 都没什么好讲的，看 W3school 即可

313YPHU3
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端基础之Html、CSS、JavaScript、JQuery、Ajax
pybstudyjava的博客
03-29 1817
前端 1.HTML XML：可扩展标记语言 XHTML：可扩展的超文本标记语言 1. HTML 概述 HTML：超文本标记语言 网页组成：文字 + 图片 + 表格 + 表单 + 链接 + 视频 + 音频 网页文件的格式：htm ，html 网页的注释：<!-- 注释的内容 --> html 结构 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh
前端代码 (html css JavaScript DOM JSON)
qq_60509834的博客
09-13 371
HTML 是超文本标记语言.用来完成一个静态网页. 结构: 由大量的标签组成的. 标签都是成对儿出现的 入门案例 <!DOCTYPE html> <!-- 文档声明 --> <html> <!-- 根元素,标记这是一个网页文件 --> <head><!-- 头部分 --> <meta charset="utf-8"> <!-- 设置了编码 --> <title>1243</title.
HTML_CSS_JS_JSON
Wgijja的博客
12-27 350
HTML 概要 （1）主要强调HTML的标签都是成对儿的，有开始标签，一般都会有对应的结束标签。 （2）强调代码的合理缩进 （3）强调HTML语法松散不严格 （4）强调HTML不区分大小写 （5）强调标签的属性，每个属性都包括属性名和属性值，属性值可以使用单引号括起来，也可以使用双引号括起来。 （6）强调HTML中的注释怎么写 （7）<meta charset="UTF-8"/>该行代码的作用就是告诉浏览器采用哪一种字符编码打开该文件。 解决乱码问题：乱码产生是因为文件采用UTF-8方式，但浏
前端三剑客 - - HTML、CSS、JavaScript
小乔不掉发的博客
01-25 3017
我是目录：1、HTML：2、CSS：3、JavaScript 1、HTML： （1）简介： html 属于 xml 的一种，遵循 xml 格式： html是网页文件，可以通过html提供页面元素（dom元素） html整体结构是一个树形结构，也叫dom树（多字数） 学习html就是学习页面元素（dom、标签） （2）常见元素 标签： ① h 标签：标题 ② 段落标签： ③ 换行标签：（html中，内容中使用换行符不会让网页展示的内容换行） ④ 链接标签： ⑤ 图片： ⑥ 列表： ⑦ 表格
【JSON2WEB】05 前端开发三件套 HTML CSS JavaScript 速成
REST2SQL ，JSON2WEB
02-26 1146
前端三件套是指在网页开发中常用的三种技术：HTML，CSS和JavaScript。它们分别负责网页的结构，样式和交互，是构建网页的基础。下面我们来简单介绍一下它们的作用和特点，并举一些例子。
【HTML+CSS+JS+JSON+ES6笔记】.zip
05-18
这份笔记以HTML、CSS、JavaScript、JSON和ES6为主要讲解对象，旨在帮助学习者深入理解这五种技术，并能够熟练应用在实际项目中。 HTML（HyperText Markup Language）是网页的基础，用于构建网页结构。笔记中可能...
原生实现小米商城(HTML+CSS+JavaScript)
04-27
在本项目中，"原生实现小米商城(HTML+CSS+JavaScript)"是一个基于Web前端技术构建的模拟电商平台。这个项目采用的技术栈主要包括HTML、CSS和JavaScript，这些都是构建现代网页应用的基础。下面将详细阐述这三个主要...
HTML+CSS+JavaScript+AJAX+JQuery入门.rar
03-21
HTML、CSS、JavaScript、AJAX和JQuery是构建现代网页和Web应用的基础技术。这个压缩包文件"HTML+CSS+JavaScript+AJAX+JQuery入门.rar"提供了对这些技术的全面介绍，适合初学者入门学习。 HTML（HyperText Markup ...
这是一个购物网站的前端设计与基本的html css和javascript - JS-Knights/Carto
01-27
【标题】中的“这是一个购物网站的前端设计与基本的html css和javascript - JS-Knights/Carto”指的是一项前端开发项目，它旨在构建一个购物网站的用户界面，并且使用了HTML、CSS和JavaScript这三种基础的前端技术。...
使用 JavaScript 将 JSON 转换为对象，并使用 DOM API 将其呈现在 HTML 页面.html
04-06
在 JavaScript 中，我们使用 JSON.parse() 方法将 JSON 转换为对象，并使用 DOM API 将其呈现在页面上。具体来说，我们创建一个 <div> 元素，用于显示转换后的结果，然后遍历对象的所有属性，为每个属性创建一个 <p>...
JAVA-WEB资源配置
caryeko的专栏
08-15 198
用JAVA进行编写WEB项目时，我们一般需要对WEB进行统一配置，例如制定拦截路径、页面解析器、跨域配置、fastjson报文解析、文件上传大小配置等。
使用WebSocket实现一个简易的聊天室
qq_51321722的博客
08-14 414
其次，要有相关配置类以及Controller。我这里的框架是SpringBoot。首先，我们要有一个前端页面。
谷粒商城实战笔记-175~177-商城业务-检索服务-检索查询接口开发
epitomizelu的专栏
08-13 786
搜索页面搭建完成之后，点击搜索按钮，发送参数给后台服务，后台服务根据参数从Elasticsearch中查询符合条件的数据，返回给前端。
vue2前端阿里云oss服务端签名直传
weixin_74285634的博客
08-13 300
generatePresignedUrlApi是由后端提供的接口 来获取密钥。
提升前端性能的JavaScript技巧
han2434的博客
08-14 802
一个快速响应、高效运行的Web页面不仅能提升用户体验，还能在一定程度上影响网站的SEO排名。本文汇总了一系列JavaScript技巧，以帮助开发者提升前端性能，并提供实际的代码示例。
vue3进阶用法之通过调用函数动态加载组件用法及示例
wz9608的博客
08-14 323
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 955
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
vue-lic（三）
qq_64669006的博客
08-14 273
Vue 应用中的跨域问题通常是由于浏览器的同源策略引起的，它阻止了一个源（origin）的网页上的JavaScript 代码请求另一个源的资源。也就是说，只要https://www.baidu.com中https://，www.baidu，.com中有一个不一样，就会导致存在跨域问题。2.逆向传递数据(vue不支持逆向传递)-->子组件给父组件传递，通过$emit("事件名",要传递的数据)自定义监听事件。，这里因为本身就有/api，再添加了一个/api，所以需要去掉一个/api，也就是重写路径。
vue3 组合式 API：setup()
最新发布
咸鱼滚滚
08-17 832
setup()props和contextprops：包含了父组件传递给当前组件的属性。可以通过解构赋值的方式获取特定的属性。context：包含了一些与组件相关的上下文信息，如attrsslotsemit等。可以通过解构赋值的方式获取特定的上下文信息。示例：< script setup lang = " ts " > // defineProps 用于定义组件接收的父组件传递过来的属性（props）。// defineExpose 用于明确指定哪些属性和方法可以在组件外部被访问。import {
疯狂Web前端：HTML5, CSS3, JavaScript深度解析
这篇文档是关于Web前端开发的基础学习资料，涵盖了HTML、CSS和JavaScript这三个关键的技术。HTML（HyperText Markup Language）是用于创建网页结构的标准标记语言，HTML5是其最新版本，带来了许多新特性，如离线存储...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

313YPHU3

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值