首页 > 其他分享 >Day04

Day04

时间:2024-05-16 17:20:27浏览次数:15  
标签:标签 Day04 HTML 提交 按钮 属性 页面

目录

一、HTML

(一)HTML介绍

Web前端三大核心技术

  • HTML:负责网页的架构
  • CSS:负责网页的格式、美化
  • JS:负责网页的行为

HTML的定义:
HTML(超文本标记语言)是用来描述网页的一种语言,由一套标记标签组成。

HTML标签:

  • 单标签 <标签名>
  • 双标签 <标签名>内容</标签名>

标签属性:
属性格式:属性名 = "属性值"
eg:<a href="http://www.jd.com">京东</a>

(二)HTML骨架标签

html:根目录,所有的内容都应该放在html标签中
hand:头部标签
body:身体标签(代码编写区域)

(三)注释

  • 作用:描述的内容不会被浏览器执行

  • 说明:解析程序给程序员看

  • 国际通用注释快捷键:Ctrl+/

  • 测试点:前端页面发布上线之前,需要检查(描述不恰当的文字出现)所有注释或去除注释

(四)常用标签

标题标签

  • 说明:HTML标题是通过<h1>~<h6>等标签进行定义
    <h1>最大,<h6>最小
    <h1>一级标题</h1>

段落标签

  • 说明:HTML段落是通过

    标签进行定义的
    <p>第一个段落</p>

  • 特点:独占一块(换行作用),有语义含义——浏览器知道你是段落

超链接标签

  • 说明:超链接是通过<a>标签进行定义的
  • 作用:点击文本跳转到指定页面
  • 属性:
    • href:点击文本要跳转的地址(网址、本地文件)
    • target:指定窗口打开模式

图片标签

  • 说明:网页中插入图片就要使用图片标签,HTML图片是通过<img>标签进行定义的

  • 属性:

    • src:图片路径
    • title:光标悬停显示文字
    • alt:图片未加载时显示文字
    • width:图片宽度
    • height:图片高度
  • 测试点:必须有title属性(悬停和未加载显示)

换行和空格

  • 换行:<br />
  • 空格:&nbsp;

布局标签

  • 说明:页面布局使用,常用divspan

div:大盒子 独占一行
span:小盒子 一行可以放多个

列表标签

  • 说明:列表标签常用li元素(分为有序和无序)
<body>
     <!--1、有序列表-->
     <ol>
          <li>北京</li>
          <li>上海</li>
     </ol>
     <!--2、无序列表-->
     <ul>
          <li>测试</li>
          <li>开发</li>
     </ul>
</body>

<body>
     <style>
          /*css标签*/
     </style>
     <script>
          //js标签
     </script>
</body>

style:css标签
script:js标签
link:外部加载css标签

表单标签

  • 说明:页面提交输入信息需要使用表单标签<form>

  • input标签
    • 文本框:<input type="text" />
    • 密码框:<input type="password" />
    • 单选框:<input type="radio" />
     <!--单选效果:
          1、设置一组radio才能做单选;
          2、设置相同(组名)name属性值为一组
     -->
     性别:
     <input type="radio" name="sex" />男
     <input type="radio" name="sex" />女
    • 复选框:<input type="checkbox" />
     爱好:
     <input type="checkbox" />看书
     <input type="checkbox" />看电影
     <input type="checkbox" />打游戏
    • 按钮:
      • 提交按钮:<input type="submit" />
      • 重置按钮:<input type="reset" />
      • 普通按钮:<input type="button" value="普通按钮" />
  • form
    • 作用:将页面输入的数据提交到后台或指定页面
    • 属性:
          action:指定将数据提交到哪个页面
          method:提交参数的方法(get、post)
              get:查询使用
                  1、参数url明文显示
                  2、提交速度快
                  3、提交参数有长度限制
              post:提交数据、登录、注册
                  1、参数url明文显示
                  2、提交速度快
                  3、提交参数有长度限制

按钮测试点:统一使用value进行赋值

普通按钮默认没有执行效果,需要配合js来实现

标签:标签,Day04,HTML,提交,按钮,属性,页面
From: https://www.cnblogs.com/overlord-lxy/p/18182721

相关文章

  • m2_day04 [线程]
    课程内容:线程的概念引用多线程的原因?如何实现线程?如何控制线程?线程类其它常用方法线程的概念线程所在包:java.lang.Thread理解程序进程线程之间的区别:程序:保存在物理介质中的代码片段​进程:一旦程序运行起来就变成了操作系统当中的一个进程......
  • day04_我的Java学习笔记 (数组的静态初始化、数组的动态初始化,debug调试等)
    1.数组1.1数组的定义那python怎么定义数组的呢?Java:String[]names={"zhangsan","lisi","wangwu"}Python:names=["zhangsan","lisi","wangwu"]在python中,列表可以存储不同类型的数据,而在Java中,数组只能存储相同类型的数据。1......
  • day04
    HelloWorld1.随便新建一个文件夹,存放代码2.新建一个java文件后缀名为.javahello.java3.编写代码publicclasshello{ publicstaticvoidmain(String[]args){'快捷方法输入psvm' System.out.print("hello,world");'快捷方法输入sop' }4.编写javacjava文件,生成一个......
  • ROS笔记Day04----服务通信(实现排序--xxb第二次作业)
    一、服务通信简介服务通信是基于请求响应模式的,是一种应答机制。一个节点A向另一个节点B发送请求,B接收处理请求并产生响应结果返回给A。服务通信适用于实时性要求比较高的场景,例如设计一款自动搭讪机器人,每当摄像头检测到有搭讪目标出现,则摄像头这个节点就会向底盘......
  • 算法练习Day04
    有hr说什么现在软件谁还用c++,都是rust了虽然但是他也太以偏概全了,,((烧饼吧1.两两交换链表中的节点思路:将链表中相邻的节点两两交换,则交换的步骤是eg:[0]->[1]->[2]->[3]->[4]交换1和2,3和4;则交换的步骤是,先让0指向2,再让2指向1,最后让1指向3,即完成了一次交换;此时需要......
  • Day04---Web前端基础
    定时器的实际应用开发者,我们基于定时器结合js操作css样式或者html代码,就可以实现各种的酷炫的动态交互效果了。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>div{width:150px......
  • day04
    day04目录day04scoped解决样式冲突默认情况scoped原理data必须是一个函数组件通信通信解决方案父子通信流程props特点props校验作用语法props校验完整写法注意props&data、单向数据流共同点区别单向数据流:非父子通信—eventbus事件总线作用步骤非父子通信—provide......
  • day04_操作系统入门
    今日笔记学操作系统基础概念linux系统linux系统(centos)+vmware安装起来(网络配置,磁盘分区)ubuntu安装xshell服务器的远程连接服务器网站的前后端,数据库app的前后端,数据库微信、腾讯微信的服务器移动端设备上,安装的微信客户端在线笔记笔记对运维来说,就是一个宝藏,mar......
  • MetaGPT day04 MetaGPT ActionNode
    ActionNode说明文档导读#什么是ActionNode?1.ActionNode是Action的通用化抽象2.ActionNode是SOP的最小单元#ActionNode是Action的通用化抽象:反推可得知Action不够通用化?也就是说ActionNode的粒度比action更细? Action-粒度更细->ActionNode#Actio......
  • day04 dos
    dos原理相对路径和绝对路径dos常见指令echo/type:创建有内容/空文件......