07_html

文章目录

  • 引言
  • 前端
    • 概述
    • 分类
  • HTML
    • 快速入门
    • 重要的body标签
      • 注释
      • hr标签
      • br标签
      • 一些常见的标签
      • 标题标签
      • div标签
      • span标签
      • p标签
      • a标签
      • img标签
        • 路径问题
      • ol和ul标签
      • table标签
      • input标签（表单元素）
      • textarea标签（表单元素）
      • select标签（表单元素）
      • form标签

引言

eg：http://localhost:8080/file?name=1

URL分成4部分

  • 协议部分：http、https
  • 域名：ip + 端口 localhost:8080
  • 服务器内部路径 /file
  • 请求参数：?后面的部分。比如想搜索手机，搜索其他的，需要传递参数。 name=1

在这里插入图片描述

前端

概述

  • 前端：又称web前端，网站的前台部分，运行在浏览器，给客户浏览的网页。
  • 后端：管理和处理数据的。前端页面上展示的数据，都是后端给的。

分类

  • HTML：用于搭建基础网页，展示页面的内容
  • CSS：用于美化页面，布局页面
  • JavaScript：控制页面的元素，让页面有一些动态的效果

HTML

概念：

  • HTML(hyper text markup language)超文本标记语言
  • 是一个以.html为后缀的文本
  • 是一个文本，也是一个网页；该文本可以用浏览器打开
  • 超文本：包含文本字体、图片、链接，甚至音乐、程序等元素的文本
  • HTML 是一个使用’标签’来描述网页的文本 (标签在HTML文本中有实际意义)

简而言之：

  • 首先是一个语言
  • 文本语言
  • 用标签/标记来描述的文本语言

快速入门

  1. html文档后缀名 .html 或者 .htm

  2. 标签分为：

    • 围堵标签：有开始标签和结束标签。如 <html> </html>
    • 自闭合标签：开始标签和结束标签在一起。如 <br> <hr>

  3. 标签可以嵌套：
    需要正确嵌套，不能你中有我，我中有你
    错误：<a><b></a></b>
    正确：<a><b></b></a>

  4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号（单双都可）引起来

  5. html的标签不区分大小写，但是建议使用小写。

eg：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Demo</title>
</head>
<body><div><div>猫和老鼠</div><hr width="600px" align="left">猫 - 汤姆<br>老鼠 - 杰瑞<br>
</div></body>
</html>

重要的body标签

我们研究html就是研究html不同语法标签（body部分比较重要）

注释

ctrl + shift + / ：<!---->

hr标签

<hr>：是一个横线标签, 单标签

属性：

  • size：高度（厚度，不同于height，不带单位时 – 默认px）
  • width：宽度（不带单位时 – 默认px）
    • 候选值：
      • {value}/ {value}px，代表多少个像素
      • {value}%： 占父元素的百分比
  • noshade：颜色是否有阴影(纯色)
  • align：对其方式。
    • 候选值：center、 left、 right

eg：

<!--高度-->
<hr size="100px"><!--默认居中对其-->
<hr width="600px" align="left"><!--noshade 没有阴影-->
<hr size="50px" noshade="noshade">

br标签

<br>：换行符，单标签

注意：

  • 在html里，直接回车换行，没有效果，只会变成一个空格。
  • 多个空格，也是没有效果的，也只会变成一个空格。

一些常见的标签

显示结果HTML代码描述
空格&nbsp;空格
>&gt;大于符号
<&lt;小于符号
&&amp;

<b></b>：b标签是加粗
<i></i>：i标签是斜体

标题标签

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>

属性：

  • align
  • Left：左对齐内容（默认值）
  • Center：右对齐内容
  • Right：居中对齐内容

注意1： 自定义标签

  • h0、h7、h8： 自定义标签, 自定义标签没有任何特殊效果, 等价于span标签

注意2：h1在一个html页面上最好出现一次，h2-h6可以在一个html页面上出现多次

div标签

<div>：给页面进行分区或者节/块，会自动换行。
<div>会自动换行，一般用它来框定范围

span标签

行内进行分块的，不会自动换行

div和span的区别：div一般用来先划定一个大的范围，最后再用span进行填充

p标签

<p> ：段落标签

注意:：段落一般用来描述大段文字，很类似div的使用， 只不过段落会自动的在段前/段后加上一部分段落间距

a标签

<a>：超链接标签

eg：
<a href="https://www.baidu.com" target="_blank">baidu</a>
<a href="https://www.baidu.com" target="_self">baidu</a>

属性：

  • href：指向要打开页面的的URL
  • target： 新页面的打开方法
    • _blank：在空页面打开
    • _self：在当前页面打开
    • _top：打开最底层的网页
    • _parent：打开上一层的网页

<a>标签有时候和一个常见的标签结合起来使用

<iframe>可以内嵌页面
eg： <iframe src = "https://www.baidu.com/" width="600px" height="1000px"> </iframe>

img标签

<img> ：图片标签

<img src="这里填图片路径" alt="图片加载失败..">

属性： src用来指示图片的加载路径：相对路径、绝对路径

路径问题
Java路径:
// 相对路径: ./  ../   ../../
// 绝对路径: C:\Users\HTML前端路径:
// 相对路径:  ./  ../   ../../
// 绝对路径:  http://localhost:8080/code/com/coo1heisenberg/html/1.png
// 相对路径最终会转换成绝对路径

ol和ul标签


<ol> 有序列表，成套标签， 和<li>标签构成一套标签

<ol>属性：

  • type：规定在列表中使用的标记类型(1,A,a,I,i)。
  • start：规定有序列表的起始值
  • reversed：规定列表顺序为降序。(9,8,7…)

<ul> 无序列表，成套标签， 和<li>标签构成一套标签

<ul>属性：

  • type:
    • disc：默认值。实心圆。
    • circle：空心圆。
    • square：实心方块。

eg：

<ol reversed><li>hello</li><li>world</li><li>hi</li>/*1.hello2.world3.hi*/
</ol><ul TYPE="circle"><li>hello</li><li>world</li><li>hi</li>/*helloworldhi*/
</ul>

table标签

<table>：表格标签, 成套标签, tr, td

  • <tr>：表格的一行
  • <td>：一行中一个单元格

属性：

  • table的属性：
    • bgcolor： 背景颜色
    • border ： 1、2 代表边框的像素
    • cellpadding：规定单元边沿与其内容之间的空白。
    • cellspacing：规定单元格之间的空白。
  • tr的属性:
    • bgcolor
    • valign：规定表格行中内容的垂直对齐方式。
      • top
      • middle
      • bottom
  • td的属性:
    • colspan：横跨列数
      • <td colspan="2" > 代表占两列，所以看起来像占了两个单元格
    • rowspan：横跨行数

注：table+自动补全

eg：

<table border="1" cellspacing="0" cellpadding="10"><tr><td>这是第一个单元格</td><td>这是第二个单元格</td></tr>
</table>

input标签（表单元素）

<input>：输入框

属性：

  • type=
    • text：默认文本
    • password：密码
    • button：按钮
    • hidden：隐藏输入框，主要是用来传递一些不希望客户看到的参数
    • radio：单选框
    • reset：定义重置按钮。
    • submit：提交

eg：

<input type = "text"> <br>
<input type = "password"> <br>
<input type = "button" value = "button"> <br>

textarea标签（表单元素）

<textarea> : 多行输入框

属性：

  • cols：列
  • rows：行，可以修改行数，默认是2行
  • placeholder：提示

eg：

<body><textarea rows="10" cols="100" placeholder="输入内容"></textarea></body>

select标签（表单元素）

< select >：下拉选择，和<option>是成套标签

属性：

  • option：selected（selected="selected"选中状态），代表默认选择的选项
  • select：multiple（multiple =“multiple” 允许多选）
  • select：size（size ="4"下拉可见数4），可以控制可见的数目

eg：

<body>
<select ><option>a</option><option>b</option><option selected>c</option>
</select></body>

form标签

<form>表单：

  • 用来在浏览器的网页上, 通过用户输入或者点击, 生成一个url, 让浏览器根据这个url发起请求。
  • 用于采集用户输入的数据的，用于和服务器进行交互。比如登录页面，注册页面。

属性：

  • action: 指定提交数据的URL
    • action需要写三部分数据：协议部分、域名、ip + 端口、服务器内部路径
  • method：指定提交方式
    • 分类：一共七种，常用的两种，get、post

eg：

<body>
<form action="http://localhost:8080/file"><!--name表示输入框的key值-->用户名；<input name = "username"> <br>密码：<input name="password" type="password"><br><input type="submit" value="提交"><input type="reset" value="重置"><!--生成的URL：http://localhost:8080/file?username=&password=-->
</form></body>

<body><form action="http://localhost:8080//file"><!-- 在里面去写 输入框 --><!-- 因为我们想提交的数据，key是name -->文件名：<input name = "name"><input type="submit" value="提交数据"><!--  我们点击提交数据，会发生怎样的事情1. 使用action部分填写的三个信息  协议、域名（ip + 端口）、服务器内部路径2. 使用form标签内部的输入值，组装成参数 --- 键值对http://localhost:8080//file?name=111--></form></body>----------------------------------------------------------------------------<body><form action="http://www.baidu.com/s" >要搜索的商品：<input name = "wd"><input type="submit" value="点我搜索"></form></body>

通过form标签，发送请求，有两种请求方式：get、post


get与post请求的差别：

  • 第一个是语义化的区别
    • get：获取数据
    • post：提交数据
  • 第二个是参数位置的区别
    • get 请求把请求参数放在URL后面
    • post请求在请求参数放在请求正文中
  • post 相对于get，提交的参数安全一点
  • 通过浏览器的地址栏，只能发送get请求，post请求无法发送
  • get请求更易于传播一些
  • URL有最长的限制
    • 上传一些大的数据的时候，通过get请求无法完成

eg：

<form action="http://www.baidu.com/s" method="post"><!-- value = admin 是直接把输入框里面赋值成这个--><input name="token" value="admin"><input name="goodsDetailId" value="1235"><input name="status" value="0"><input name="num" value="1"><input name="amount" value="300"><input type="submit"><input type="reset"><!--我们通过浏览器的地址，只能发送get请求，无法发送post请求要想发送post请求，需要借助form标签：1. 在action的地方，写三部分数据（协议、域名（ip + 端口）、服务器内部路径）2. method写出post3. 我们需要提交参数：input（必须要写name）4. 写一个输入框，type = submit-->
</form></body>

注：

  • 使用form主要是提交数据
  • 使用table主要是完成布局

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

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

相关文章

三分钟快速搭建家纺行业小程序商城：轻松实现电子商务梦想

三分钟快速搭建家纺行业小程序商城：轻松实现电子商务梦想

随着互联网的普及和移动设备的广泛使用&#xff0c;越来越多的商业活动正在向数字化转型。在这个过程中&#xff0c;小程序商城作为一种新型的电子商务模式&#xff0c;正逐渐受到商家的青睐。本文将通过具体步骤&#xff0c;指导读者如何开发一个纺织辅料小程序商城。 一、选择…
阅读更多...
unity学习（41）——创建（create）角色脚本（panel）——UserHandler（收）+CreateClick（发）——发包！

unity学习（41）——创建（create）角色脚本（panel）——UserHandler（收）+CreateClick（发）——发包！

1.客户端的程序结构被我精简过&#xff0c;现在去MessageManager.cs中增加一个UserHandler函数&#xff0c;根据收到的包做对应的GameInfo赋值。 2.在Model文件夹下新增一个协议文件UserProtocol&#xff0c;内容很简单。 using System;public class UserProtocol {public co…
阅读更多...
Pycharm服务器配置与内网穿透工具结合实现远程开发的解决方法

Pycharm服务器配置与内网穿透工具结合实现远程开发的解决方法

文章目录 一、前期准备1. 检查IDE版本是否支持2. 服务器需要开通SSH服务 二、Pycharm本地链接服务器测试1. 配置服务器python解释器 三、使用内网穿透实现异地链接服务器开发1. 服务器安装Cpolar2. 创建远程连接公网地址 四、使用固定TCP地址远程开发 本文主要介绍如何使用Pych…
阅读更多...
【最新Dubbo3深入理解】Dubbo3源码中的一些小技巧

【最新Dubbo3深入理解】Dubbo3源码中的一些小技巧

欢迎关注公众号&#xff08;通过文章导读关注&#xff1a;【11来了】&#xff09;&#xff0c;及时收到 AI 前沿项目工具及新技术的推送&#xff01; 在我后台回复 「资料」 可领取编程高频电子书&#xff01; 在我后台回复「面试」可领取硬核面试笔记&#xff01; 文章导读地址…
阅读更多...
C语言中的字体背景颜色汇总

C语言中的字体背景颜色汇总

客官请看效果 客官请看代码 #include <stdio.h> #include <stdlib.h> #include <windows.h>int main() {int i;for (i 0; i < 254; i) {SetConsoleTextAttribute(GetStdHandle(STD_OUTPUT_HANDLE), i); // 设置当前文本颜色为循环变量对应的颜色printf(…
阅读更多...
算法学习（十一）拓扑排序

算法学习（十一）拓扑排序

拓扑排序 1. 概念 对一个有向无环图(Directed Acyclic Graph简称DAG)G进行拓扑排序&#xff0c;是将G中所有顶点排成一个线性序列&#xff0c;使得图中任意一对顶点u和v&#xff0c;若边<u,v>∈E(G)&#xff0c;则u在线性序列中出现在v之前。通常&#xff0c;这样的线性…
阅读更多...
离散数学 第八单元 布尔代数

离散数学 第八单元 布尔代数

目录 1. 布尔函数 2. duality 二元性 3. 表示布尔函数的布尔表达式 sum-of-products expansions 4. Functional Completeness 5. Logic Gates 逻辑门​​​​​​​ 4. 最小化 K-map卡诺图 Quine-McCluskey法 1. 布尔函数 嗯也就是我要知道布尔代数是啥形式&#xff…
阅读更多...
【安装记录】解决ssh密码正确，却无法连接到虚拟机

【安装记录】解决ssh密码正确，却无法连接到虚拟机

可能是没有允许Root登录 解决办法&#xff1a;修改/etc/ssh/sshd_config文件&#xff0c;将 PermitRootLogin 项打开
阅读更多...
金航标电子位于广西柳州鹿寨县天线生产基地于大年正月初九开工了

金航标电子位于广西柳州鹿寨县天线生产基地于大年正月初九开工了

金航标电子位于广西柳州鹿寨县天线生产基地于大年正月初九开工了&#xff01;&#xff01;&#xff01;金航标kinghelm&#xff08;www.kinghelm.com.cn&#xff09;总部位于中国深圳市&#xff0c;兼顾技术、成本、管理、效率和可持续发展。东莞塘厦实验室全电波暗室、网络分析…
阅读更多...
详细讲解缓冲区

详细讲解缓冲区

目录 理解回车和换行&#xff08;\r&&\n&#xff09; 那如何实现单独的回车和换行呢&#xff1f; 缓冲区 证明有缓冲区的存在 ​编辑 怎么刷新缓冲区&#xff08;显示器缓冲区&#xff09;&#xff1f; fflush函数​编辑 缓冲区出现的意义 I/O流 模拟倒计时小程…
阅读更多...
注册中心 Service Discovery --- Intro

注册中心 Service Discovery --- Intro

注册中心 Service Discovery --- Intro 为什么需要注册中心注册中心的原理常用的注册中心注册中心的高可用 为什么需要注册中心 在微服务架构中&#xff0c;系统被拆分成了若干个独立的服务&#xff0c;因此服务之间需要进行通信和协作。为了实现服务的发现和调用&#xff0c;需…
阅读更多...
nginx 模块 常见内置变量 location

nginx 模块 常见内置变量 location

一、nginx 模块 ngx_http_core_module 核心模块 ngx_http_access_module 访问控制模块 deny allow ngx_http_auth_basic_module 身份验证 小红小名&#xff08;虚拟用户&#xff09; ftp也有虚拟用户 ngx_http_gzip_module 压缩模块 ngx_http_gzip_static_modul…
阅读更多...
猫头虎分享已解决Bug || 超时错误：TimeoutError: Request timed out after 30000ms.

猫头虎分享已解决Bug || 超时错误：TimeoutError: Request timed out after 30000ms.

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …
阅读更多...
SORA技术报告

SORA技术报告

文档链接&#xff1a;https://openai.com/research/video-generation-models-as-world-simulators 文章目录 Video generation models as world simulatorsTurning visual data into patchesVideo compression networkSpacetime latent patchesScaling transformers for video …
阅读更多...
Dear ImGui的UE5.3集成实践

Dear ImGui的UE5.3集成实践

Dear ImGui一直较为火热&#xff0c;这是一个调试使用并且可以响应快速迭代的Gui库&#xff0c;甚至可以做到在任何代码块中调用API即显示。如果你想更多的了解一下可访问其官方网站&#xff1a;https://www.dearimgui.org/ 那么本文就来在UE5中尝试踩坑使用它。 UE4.26版本 …
阅读更多...
LeetCode 2476.二叉搜索树最近节点查询：中序遍历 + 二分查找

LeetCode 2476.二叉搜索树最近节点查询：中序遍历 + 二分查找

【LetMeFly】2476.二叉搜索树最近节点查询&#xff1a;中序遍历 二分查找 力扣题目链接&#xff1a;https://leetcode.cn/problems/closest-nodes-queries-in-a-binary-search-tree/ 给你一个 二叉搜索树 的根节点 root &#xff0c;和一个由正整数组成、长度为 n 的数组 qu…
阅读更多...
微服务-微服务Spring Security6实战

微服务-微服务Spring Security6实战

1. Spring Security介绍 1.1 Spring Security定义 Spring Security 是一个能够为基于 Spring 的企业应用系统提供声明式的安全访问控制解决方案的安全框 架。 Spring Security 主要实现了 Authentication &#xff08;认证&#xff0c;解决 who are you? &#xff09; 和…
阅读更多...
R语言入门笔记2.6

R语言入门笔记2.6

描述统计 分类数据与顺序数据的图表展示 为了下面代码便于看出颜色参数所对应的值&#xff0c;在这里先集中介绍&#xff0c; col1是黑色&#xff0c;2是粉红&#xff0c;3是绿色&#xff0c;4是天蓝&#xff0c;5是浅蓝&#xff0c;6是紫红&#xff0c;7是黄色&#xff0c;…
阅读更多...
公众号怎么线上公证？

公众号怎么线上公证？

公众号迁移有什么作用&#xff1f;只能变更主体吗&#xff1f;公众号迁移的作用可不止变更主体这一个哦&#xff01;还可以把 A 账号的粉丝、文章素材、违规记录等迁移到 B 账号上。这样一来&#xff0c;你就可以在不失去原有粉丝的情况下&#xff0c;更好地管理和运营公众号啦…
阅读更多...
Github 2024-02-23 开源项目日报 Top10

Github 2024-02-23 开源项目日报 Top10

根据Github Trendings的统计&#xff0c;今日(2024-02-23统计)共有10个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量非开发语言项目4Python项目3TypeScript项目1HTML项目1Dart项目1Rust项目1 从零开始构建你喜爱的技术 创建周…
阅读更多...
最新文章

Copyright @ 2022~2023