02_前端三大件HTML

news2024/11/14 5:02:58

文章目录

  • HTML用于网页结构搭建
  • 1. 标签
  • 2. 客户端服务器交互流程
  • 3. 专业词汇
  • 4. html语法细节
  • 5. 安装VSCODE安装插件
  • 6. Live Server插件使用
  • 7. 标题&段落&换行&列表
  • 8. 超链接标签使用
  • 9. 图片
  • 10. 表格的写法
  • 11. 表单标签*(重点)
  • 12. 下拉框
  • 13. 页面布局标签
  • 14. 块元素和行元素的区别

HTML用于网页结构搭建

1. 标签

双标签

<p>HTML is a technllogy</p>

单标签

<inpup>HTML is a technllogy

属性

<a href="http://www.xxx.com">

href是属性名，网址是属性值

标签整体结构

<!DOCTYPE html>   文档声明
<html>
	<head>
		1.字符集
		2.css
		3.js
		4.其他
		<title><>
		<meta charset="utf-8">单标签，指定字符集的
	</head>
	
	<body>
        1.定义展示内容
	</body>
</html>

关于字符集，客户端要和服务器保持一致

2. 客户端服务器交互流程

1.html文件一般放到服务器上，
2.客户端访问网页：数据由服务器相应到客户端上，然后由客户端进行解析并展示
3.html文件是浏览器负责解析和展示

在这里插入图片描述

3. 专业词汇

标签 tag

属性 attribute

文本 text

元素 element 一个完整的开始到结束的标签内容

<title>第一个页面</title>

4. html语法细节

1.html标签有且仅有一个

2.单标签格式 尾部加/

<meta type="utf-8" />

3.嵌套只能层层嵌套

4.属性必须有值，属性值必须加双引号

5.不区分大小写，但是成对标签需要统一格式

6.强行自定义标签无效

5. 安装VSCODE安装插件

在这里插入图片描述

在这里插入图片描述

快捷创建子目录

在这里插入图片描述

6. Live Server插件使用

模拟的小型服务器

快速创建标签基本结构

在这里插入图片描述

在这里插入图片描述

html文件写好以后，直接点击golive即可

在这里插入图片描述

在这里插入图片描述

此服务器有实时加载功能

live server建议每次测试完文件后关闭go live服务器

7. 标题&段落&换行&列表

   <!-- 1标题标签 -->
    <h1>hello vs  qidong</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>

    <!-- 2.段落标签 -->
    <p>这是一个段落标签</p>
    <p>这是一个段落标签xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        xxxxxxxxxxxxxxxxxxx</p>
        <!-- 不会自动换行，除非加入p标签 -->
    <p>这是一<p>根据p标签换行</p>个段落标签</p>
    <p>这是一个段落标签</p>

    <!-- 3.br标签实现换行 -->
    <p>此处br标签<br>一段落标签xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx个p标签</p>
    
    <!-- 4.hr实现换行标签，带分割线的换行 -->
    <p>此处hr标签<hr>一段落标签xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx个p标签</p>

8. 超链接标签使用

       超链接标签a
            a标签属性
                href       定义跳转url
                target     定义资源打开方式
                    _self       表示self页面打开
                    _blank      空白,表示新打开一个空白页面

点击之后进行跳转标签

在这里插入图片描述

绝对路径首级目录是工程名

9. 图片

img标签
            src     定义图片url
            title   鼠标选中时的提示文字
            alt     图片加载失败提示文字

在这里插入图片描述

10. 表格的写法

        thead   表头
        tbody   表体
        tfoot   表尾
        三者都可省

        表格标签table
            thead   表头
            tbody   表体
            tfoot   表尾
                tr  表示表格一行(table row)
                    td  行中的一个单元格
                    th  自带加粗效果的td

表格的设计样式有点多，为了简化，有方便的写法

tr>td>hd*3

在这里插入图片描述

<table border="1px" style="margin: 0px auto; width: 300px;">
        <thead>
            <tr>
                <th>排名</th>
                <th>姓名</th>
                <th>分数</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>zhangsan</td>
                <td>100</td>

            </tr>
            <tr>
                <td>2</td>
                <td>lisi</td>
                <td>100</td>

            </tr>
            <tr>
                <td>3</td>
                <td>wangwu</td>
                <td>100</td>

            </tr>
        </tbody>
        <tfoot></tfoot>

在这里插入图片描述

tr	--table row
td	--table data
th  --table header data

原有表格进行修改，添加一列，与常规不同

在这里插入图片描述

思路：让body的 某一行的结尾单元格向下扩充，占用其他单元格

在这里插入图片描述

使用rowspan(span有占用的意思，占用行，也就是向下扩充)

在这里插入图片描述

也就是span三个row的意思

进阶，设计更为复杂的表格

在这里插入图片描述

按照原来的思路

在这里插入图片描述

如何将空白处补齐

合并单元格？扩充单元格？

colspan
span多少个cols
"向右占用多少个列"

在这里插入图片描述

11. 表单标签*(重点)

表单标签是前端服务器与后端进行数据交互的一种方式；

表单项目标签一定要定义name属性，该属性用于明确提交时的参数名表单项还需要定义value属性,该属性用于明确提交时的实参的;

1.标签及属性

    <form action="05_Wellecom.html" method="post">
        <input type="text" name="username" value="小明"/>
        <br>
        <input type="password" />
        <br>
        <input type="submit" value="登录">
        <input type="reset" value="清空">
    </form>

2.常见属性及解释

​ action 定义数据提交地址(相对路径,绝对路径,接口地址)

​ method 数据提交方式(GET/POST)

	        --GET

    ​          参数会以键值对的方式放在url后面提交中间拿&进行连接

    ​          url?key=value&key=value&key=value

    ​          缺点:敏感信息不能直接暴露,不安全,地址栏有限制,不能提交文件

      	  --POST

    ​          参数不放到url后面,数据不会直接暴露在地址栏上,相对安全

    ​          数据单独打包,通过请求体发送,提交的数据量比较大,可以提交文件,功能强大效率略低

3.常见类型及解释

type

​ -text

​ -password

​ -submit 提交按钮

​ -reset 重置按钮

​ -radio 单选框

​ -checkbox 复选框

​ -hidden 隐藏框，不显示在页面上，但是进行提交传输

readonly 只读 用户不能对表单进行修改

disabled 不可用 不提交

hidden希望提交一些特定信息，但是考虑安全问题或是用户操作问题，不希望该数据发生改变

在这里插入图片描述

<input type="submit">
<input type="reset">       通过修改value值来修改标签名字

4.设计单选框，以及拥有互斥效果

在这里插入图片描述

表单单选框的type=“radio”

两个表单单选框 拥有相同的name时，表现为互斥效果

其他属性及其作用

写入value值，因为表单提交以key value进行提交
checked	表示默认勾选，有且仅有一个合理

5.复选框设计checkbox

在这里插入图片描述

2.2文本域

文字太多了，input用法不好用

因此使用多行文本框，文本域textArea

此标签没有value属性，其提交的内容就是标签中的文本

<textarea name="" id="" style="width: 300px; height:100px;"></textarea>

在这里插入图片描述

12. 下拉框

select进行下拉框设计

option进行选项设计

        <select name="" id="">
            <option value="">1</option>
            <option value="">2</option>
            <option value="">4</option>
            <option value="">3</option>
        </select>

在这里插入图片描述

1.表单数据提交：name=value&...
2.select默认name = 选中的文本框，或者文本框的value
3.默认选中使用selected

2.3文件上传框

仅需将type="file"即可

  <input type="file">

在这里插入图片描述

13. 页面布局标签

页面堆砌多个框的设计方式为页面布局的设计

在这里插入图片描述

经典div标签设计页面布局

设计一个红色边框大小1px的div框

<div style="border:1px solid red;">
        这是一个div标签
</div>

在这里插入图片描述

进一步设计其宽度和高度

设计width和height即可

<div style="border:1px solid red;width: 500px;height: 500px;">
        这是一个div标签
    </div>

在这里插入图片描述

写上牛逼的margin：0px auto

上下页边距为0，左右自动处理

上下页面距为0的意思如下

在这里插入图片描述

14. 块元素和行元素的区别

div 块元素 自己独占一行的元素 块元素的宽高等等往往都是生效的

span 行内元素 自己不会独占一行的元素 行内元素的宽高等等，很多都是不生效的

在这里插入图片描述

行内元素宽高受约束，不能通过css随意改变宽高等；

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

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

相关文章

机器学习大模型驱动：未来的趋势与应用

机器学习大模型驱动：未来的趋势与应用

文章目录 &#x1f4d1;前言一、什么是机器学习大模型&#xff1f;1.1 大模型的特点1.2 大模型的技术基础 二、大模型的技术实现2.1 Transformer 架构2.2 预训练和微调2.3 模型并行和数据并行 三、大模型的应用场景3.1 自然语言处理&#xff08;NLP&#xff09;3.2 计算机视觉&…
阅读更多...
02324 自学考试 离散数学屈婉玲教材 目录

02324 自学考试 离散数学屈婉玲教材 目录

02324 自学考试 离散数学屈婉玲教材 目录 02324 自学考试 离散数学屈婉玲教材 02324离散数学全程班历年真题资料
阅读更多...
21.2zabbix低级自动发现-mysql多实例

21.2zabbix低级自动发现-mysql多实例

配置mysql多实例 注释&#xff1a;自动发现&#xff1a;创建监控主机&#xff1b;低级自动发现&#xff1a;创建监控项 mysql单实例是直接yum安装&#xff0c;开启mysql多实例 准备配置文件 #mysql3307实例 cp /etc/my.cnf /etc/my3307.cnf vim /etc/my3307.cnf [mysqld] dat…
阅读更多...
Maven多环境打包配置

Maven多环境打包配置

一、启动时指定环境配置文件 在启动springboot应用的jar包时&#xff0c;我们可以指定配置文件&#xff0c;通常把配置文件上传到linux服务器对应jar包的同级目录&#xff0c;或者统一的配置文件存放目录 java -jar your-app.jar --spring.config.location/opt/softs/applicat…
阅读更多...
4.Redis之Redis的通用命令

4.Redis之Redis的通用命令

0.Redis 实战操作 通过 redis-cli 客户端和 redis 服务器交互 涉及到很多的 redis 的命令 【redis 的命令非常非常多!!! 1.掌握常用命令(多操作多练习) 2.学会使用 redis 的文档-> 阅读文档, 是程序猿的基操!! redis 的命令非常非常多!!! 1.掌握常用命令(多操作多练习…
阅读更多...
Golang文件操作

Golang文件操作

文章目录 文件操作基本介绍普通的文件操作方式&#xff08;os包&#xff09;带缓冲的文件操作方式&#xff08;bufio包&#xff09;文件拷贝操作&#xff08;io包&#xff09; 命令行参数基本介绍解析命令行参数&#xff08;flag包&#xff09; JSON基本介绍JSON序列化JSON反序…
阅读更多...
【手把手带你搓组件库】从零开始实现Element Plus

【手把手带你搓组件库】从零开始实现Element Plus

从零开始实现Element Plus 前言亮点项目搭建1、创建项目初始化monorepo创建 .gitignore目录结构安装基础依赖配置文件创建各个分包入口utilscomponentscoreplaytheme 2、创建VitePress文档3、部署到Github Actions生成 GH_TOKENGitHub Page 演示 4、总结 前言 在本文中&#xf…
阅读更多...
vim操作手册

vim操作手册

vim分为插入模式、命令模式、底行模式。 插入模式&#xff1a;编辑模式 命令模式&#xff1a;允许使用者通过命令&#xff0c;来进行文本的编辑控制 底行模式&#xff1a;用来进行让vim进行包括但不限于shell进行交互 w&#xff1a;保存 wq&am…
阅读更多...
北邮22级信通院DSP：用C++程序实现给定参数下四种滤波器的Butterworth模拟滤波器设计：给定上下截频和衰减系数求H（p）和H（s）

北邮22级信通院DSP：用C++程序实现给定参数下四种滤波器的Butterworth模拟滤波器设计：给定上下截频和衰减系数求H（p）和H（s）

北邮22信通一枚~ 跟随课程进度更新北邮信通院DSP的笔记、代码和文章&#xff0c;欢迎关注~ 获取更多文章&#xff0c;请访问专栏&#xff1a; 北邮22级信通院DSP_青山入墨雨如画的博客-CSDN博客 目录 一、 核心算法 1.1判断滤波器类型 1.2 带通滤波器BP 1.3带阻滤波器B…
阅读更多...
十二、shell编程之awk

十二、shell编程之awk

12.1 什么是awk 虽然sed编辑器是非常方便自动修改文本文件的工具&#xff0c;但其也有自身的限制。通常你需要一个用来处理文件中的数据的更高级工具&#xff0c;它能提供一个类编程环境来修改和重新组织文件中的数据。这正是awk能够做到的。 awk程序是Unix中的原始awk程序的…
阅读更多...
P4097 【模板】李超线段树 / [HEOI2013] Segment 题解

P4097 【模板】李超线段树 / [HEOI2013] Segment 题解

题意 有一个平面直角坐标系&#xff0c;总共 n n n 个操作&#xff0c;每个操作有两种&#xff1a; 给定正整数 x 0 , y 0 , x 1 , y 1 x_0,y_0,x_1,y_1 x0​,y0​,x1​,y1​ 表示一条线段的两个端点。你需要在平面上加入这一条线段&#xff0c;第 i i i 条被插入的线段的标…
阅读更多...
【面试干货】完全平方数

【面试干货】完全平方数

【面试干货】完全平方数 1、实现思想2、代码实现 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 一个整数&#xff0c;它加上 100 后是一个完全平方数&#xff0c;再加上 168 又是一个完全平方数&#xff0c;请问该数是多少&#xff1f; 1、…
阅读更多...
设计模式 17 组合模式 Composite Pattern

设计模式 17 组合模式 Composite Pattern

设计模式 17 组合模式 Composite Pattern 1.定义 组合模式&#xff08;Composite Pattern&#xff09;&#xff0c;又叫部分整体模式&#xff0c;是用于把一组相似的对象当作一个单一的对象。组合模式依据树形结构来组合对象&#xff0c;用来表示部分以及整体层次。这种类型的设…
阅读更多...
wps使用（解决毕业论文）

wps使用（解决毕业论文）

目录自动生成 页码自动生成 一部分使用I II III IV 格式&#xff0c;一部分使用1&#xff0c;2&#xff0c;3&#xff0c;4 格式 先设置全部文章为I II III IV 格式&#xff0c;然后再需要的地方再设置1&#xff0c;2&#xff0c;3&#xff0c;4 格式 一键设置中文、英文、数…
阅读更多...
特斯拉FSD的「端到端」到底能不能成？

特斯拉FSD的「端到端」到底能不能成？

引言 近年来&#xff0c;特斯拉的全自动驾驶&#xff08;Full Self-Driving&#xff0c;FSD&#xff09;技术备受关注&#xff0c;尤其是其「端到端」的AI软件框架更是引发了广泛讨论。端到端技术到底是一条正确的路径吗&#xff1f;它能否真正实现完全自动驾驶&#xff1f;本…
阅读更多...
Java面试八股之什么是锁消除和锁粗化

Java面试八股之什么是锁消除和锁粗化

什么是锁消除和锁粗化 锁消除&#xff08;Lock Elimination&#xff09;&#xff1a; 锁消除是Java虚拟机&#xff08;JVM&#xff09;进行的一种高级优化策略&#xff0c;旨在消除那些没有必要存在的同步操作&#xff0c;以减少不必要的性能开销。这一优化发生在即时编译器&a…
阅读更多...
Docker拉取镜像报错：x509: certificate has expired or is not yet v..

Docker拉取镜像报错：x509: certificate has expired or is not yet v..

太久没有使用docker进行镜像拉取&#xff0c;今天使用docker-compose拉取mongo发现报错&#xff08;如下图&#xff09;&#xff1a; 报错信息翻译&#xff1a;证书已过期或尚未有效。 解决办法&#xff1a; 1.一般都是证书问题或者系统时间问题导致&#xff0c;可以先执行 da…
阅读更多...
Nginx-狂神说

Nginx-狂神说

Nginx概述 公司产品出现瓶颈&#xff1f; 我们公司项目刚刚上线的时候&#xff0c;并发量小&#xff0c;用户使用的少&#xff0c;所以在低并发的情况下&#xff0c;一个jar包启动应用就够了&#xff0c;然后内部tomcat返回内容给用户。 但是慢慢的&#xff0c;使用我们平台…
阅读更多...
微信小程序- 实现横向滑动列表

微信小程序- 实现横向滑动列表

1. 微信小程序-实现横向滑动列表 微信小程序如何隐藏scroll-view滚动条    1.1. photoScroll.wxml <view class"hs-body"><scroll-view class"hs-layout" scroll-x"true" scroll-left"{{x}}" scroll-with-animation&quo…
阅读更多...
设计循环队列（C语言）怎会如此简单！！！

设计循环队列（C语言）怎会如此简单！！！

目录 题目题目分析 解答结构体初始化判空判满插入删除去队头数据取队尾数据队列的销毁 题目 链接: 题目 设计你的循环队列实现。 循环队列是一种线性数据结构&#xff0c;其操作表现基于 FIFO&#xff08;先进先出&#xff09;原则并且队尾被连接在队首之后以形成一个循环。它…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023