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://www.mzph.cn/news/707518.shtml

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

相关文章

软考50-上午题-【数据库】-SQL访问控制

软考50-上午题-【数据库】-SQL访问控制

一、SQL访问控制 数据控制&#xff0c;控制的是用户对数据的存储权力&#xff0c;由DBA决定。 DBA&#xff1a;数据库管理员。 DBMS数据控制应该具有一下功能&#xff1a; 1-1、授权语句格式 说明&#xff1a; 示例&#xff1a; 1-2、收回权限语句格式 示例&#xff1a; PUBLI…
阅读更多...
Flutter开发进阶之Flutter Web加载速度优化

Flutter开发进阶之Flutter Web加载速度优化

Flutter开发进阶之Flutter Web加载速度优化 通常使用Flutter开发的web加载速度会比较慢，原因是Flutter web需要加载的资源处于国外，以下是据此所做的相应优化。 一、FlutterWeb打包 flutter build web --web-renderer canvaskit使用新命令打包 flutter build web --web-…
阅读更多...
matlab批量替换txt文本文件的特定行的内容

matlab批量替换txt文本文件的特定行的内容

1.下图所示&#xff0c;我想要替换第14行。 2.运行代码后&#xff0c;第14行已经更改为需要的内容。 clc,clear; %%----------------------需要更改的地方------------------------------------ % 设置要操作的文本文件路径&#xff0c;替换为你自己的文件路径 path D:\paper_…
阅读更多...
【算法与数据结构】复杂度深度解析（超详解）

【算法与数据结构】复杂度深度解析（超详解）

文章目录 &#x1f4dd;算法效率&#x1f320; 算法的复杂度&#x1f320; 时间复杂度的概念&#x1f309;大O的渐进表示法。 &#x1f320;常见复杂度&#x1f320;常见时间复杂度计算举例&#x1f309;常数阶O(1)&#x1f309;对数阶 O(logN)&#x1f309;线性阶 O(N)&#x…
阅读更多...
揭示预处理中的秘密！（二）

揭示预处理中的秘密！（二）

目录 ​编辑 1. #运算符 2. ##运算符 3. 命名约定 4. #undef 5. 命令行定义 6. 条件编译 7. 头文件的被包含的方式 8.嵌套文件包含 9. 其他预处理指令 10. 完结散花 悟已往之不谏&#xff0c;知来者犹可追 …
阅读更多...
微信小程序引入Vant插件

微信小程序引入Vant插件

Vant官网&#xff1a;Vant Weapp - 轻量、可靠的小程序 UI 组件库 先查看官网的版本 新建一个package.json页面&#xff0c;代码写上&#xff1a;&#xff08;我先执行的npm安装没出package页面&#xff0c;所以先自己创建了一个才正常&#xff09; {"dependencies"…
阅读更多...
【软件测试】--功能测试4-html介绍

【软件测试】--功能测试4-html介绍

1.1 前端三大核心 html:超文本标记语言&#xff0c;由一套标记标签组成 标签&#xff1a; 单标签&#xff1a;<标签名 /> 双标签:<标签名></标签名> 属性&#xff1a;描述某一特征 示例:<a 属性名"属性值"> 1.2 html骨架标签 <!DOC…
阅读更多...
web组态软件

web组态软件

1、强大的画面显示web组态功能 2、良好的开放性。 开放性是指组态软件能与多种通信协议互联&#xff0c;支持多种硬件设备&#xff0c;向上能与管理层通信&#xff0c;实现上位机和下位机的双向通信。 3、丰富的功能模块。 web组态提供丰富的控制功能库&#xff0c;满足用户的测…
阅读更多...
【数据分享】2019-2023年我国地级市逐月新房房价数据（Excel/Shp格式）

【数据分享】2019-2023年我国地级市逐月新房房价数据（Excel/Shp格式）

房价是一个城市发展程度的重要体现&#xff0c;一个城市的房价越高通常代表这个城市越发达&#xff0c;对于人口的吸引力越大&#xff01;因此&#xff0c;房价数据是我们在各项城市研究中都非常常用的数据&#xff01;之前我们分享过2011-2023年我国地级市逐月二手房房价数据&…
阅读更多...
算法打卡day5|哈希表篇01|Leetcode 242.有效的字母异位词 、19.删除链表的倒数第N个节点、202. 快乐数、1. 两数之和

算法打卡day5|哈希表篇01|Leetcode 242.有效的字母异位词 、19.删除链表的倒数第N个节点、202. 快乐数、1. 两数之和

哈希表基础知识 哈希表 哈希表关键码就是数组的索引下标&#xff0c;然后通过下标直接访问数组中的元素&#xff1b;数组就是哈希表的一种 一般哈希表都是用来快速判断一个元素是否出现集合里。例如要查询一个名字是否在班级里&#xff1a; 要枚举的话时间复杂度是O(n)&…
阅读更多...
【数据结构】从链表到LinkedList类

【数据结构】从链表到LinkedList类

&#x1f9e7;&#x1f9e7;&#x1f9e7;&#x1f9e7;&#x1f9e7;个人主页&#x1f388;&#x1f388;&#x1f388;&#x1f388;&#x1f388; &#x1f9e7;&#x1f9e7;&#x1f9e7;&#x1f9e7;&#x1f9e7;数据结构专栏&#x1f388;&#x1f388;&#x1f388;&…
阅读更多...
标准库中的String类 String（C++）【2】

标准库中的String类 String（C++）【2】

文章目录 String常用的接口&#xff08;黑框标记的是常用接口&#xff09;string类对象的反向遍历操作第一种第二种 容量string的扩容机制 String常用的接口&#xff08;黑框标记的是常用接口&#xff09; string类对象的反向遍历操作 第一种 通过下表进行遍历 void TestSt…
阅读更多...
springboot226经方药食两用服务平台

springboot226经方药食两用服务平台

经方药食两用服务平台的设计与实现 摘要 近年来&#xff0c;信息化管理行业的不断兴起&#xff0c;使得人们的日常生活越来越离不开计算机和互联网技术。首先&#xff0c;根据收集到的用户需求分析&#xff0c;对设计系统有一个初步的认识与了解&#xff0c;确定经方药食两用…
阅读更多...
RK3568平台 RTC时间框架

RK3568平台 RTC时间框架

一.RTC时间框架概述 RTC&#xff08;Real Time Clock&#xff09;是一种用于计时的模块&#xff0c;可以是再soc内部&#xff0c;也可以是外部模块。对于soc内部的RTC&#xff0c;只需要读取寄存器即可&#xff0c;对于外部模块的RTC&#xff0c;一般需要使用到I2C接口进行读取…
阅读更多...
nebula容器方式安装：docker 安装nebula到windows

nebula容器方式安装：docker 安装nebula到windows

感谢阅读 基础环境安装安装docker下载nebula 安装数据库命令行安装查询network nebula-docker-compose_nebula-net并初始化查询安装初始使用root&#xff08;God用户类似LINUX的root&#xff09; 关闭服务 安装UI 基础环境安装 安装docker 点我下载docker 下载nebula 数据…
阅读更多...
（2024，Sora 逆向工程，DiT，LVM 技术综述）Sora：大视觉模型的背景、技术、局限性和机遇回顾

（2024，Sora 逆向工程，DiT，LVM 技术综述）Sora：大视觉模型的背景、技术、局限性和机遇回顾

Sora: A Review on Background, Technology, Limitations, and Opportunities of Large Vision Models 公和众和号&#xff1a;EDPJ&#xff08;进 Q 交流群&#xff1a;922230617 或加 VX&#xff1a;CV_EDPJ 进 V 交流群&#xff09; 目录 0. 摘要 1. 简介 2. 背景 2.1…
阅读更多...
Presto简介、部署、原理和使用介绍

Presto简介、部署、原理和使用介绍

Presto简介、部署、原理和使用介绍 1. Presto简介 1-1. Presto概念 ​ Presto是由Facebook开发的一款开源的分布式SQL查询引擎&#xff0c;最初于2012年发布&#xff0c;并在2013年成为Apache项目的一部分&#xff1b;Presto 作为现在在企业中流行使用的即席查询框架&#x…
阅读更多...
求字符串所有整数最小和 - 华为OD统一考试(C卷)

求字符串所有整数最小和 - 华为OD统一考试(C卷)

OD统一考试&#xff08;C卷&#xff09; 分值&#xff1a; 100分 题解&#xff1a; Java / Python / C 题目描述 1.输入字符串s输出s中包含所有整数的最小和&#xff0c;说明&#xff1a;1字符串s只包含a~z,A~Z,,-&#xff0c; 2.合法的整数包括正整数&#xff0c;一个或者多…
阅读更多...
C 嵌入式系统设计模式 13：中断模式

C 嵌入式系统设计模式 13：中断模式

本书的原著为&#xff1a;《Design Patterns for Embedded Systems in C ——An Embedded Software Engineering Toolkit 》&#xff0c;讲解的是嵌入式系统设计模式&#xff0c;是一本不可多得的好书。 本系列描述我对书中内容的理解。本文章描述访问硬件的设计模式之六&…
阅读更多...
跨境电商与支付介绍

跨境电商与支付介绍

1、跨境电商定义和分类&#xff1b; 2、国际贸易清结算&#xff1b; 3、跨境支付&#xff1b; 1、跨境电商定义和分类 跨境电商业务简单说就是指不同国家地域的主体通过电子商务进行交易的一种业务模式。同传统的电商不同&#xff0c;交易双方属于不同的国家。因此&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023