前端学习(二)之HTML

一、HTML文件结构

<!DOCTYPE html> <!-- 告诉浏览器,这是一个HTML文件 --><html lang="en"> <!-- 根元素(起始点,最外层容器) --><head> <!-- 文档的头部(元信息),包含文档的标题、文档的编码格式以及一些外部样式表、CSS和JS文件 --><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML 练习</title>
</head><body> <!-- 包含了实际显示在浏览器页面中的内容(文本、图像、链接等) -->
</body></html>

二、HTML常见文本标签

1、标题标签:h

2、段落标签:p

段落格式标签:加粗b,斜体i,下划线u,删除线s,换行br,水平分割线hr

3、列表标签

无序列表:ul

有序列表:ol

单元数据:li

4、表格标签:table(属性:border="n"设置表格边框)

行tr,列标题th,单元数据td

每一行都用一个tr包裹,标题行装th,数据行装td

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML 学习</title>
</head><body><!-- 标题标签 --><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6><!-- 段落标签 --><p>这是一个文本段落</p><p>更改字体样式: <b> 加粗用b </b><i> 斜体用i </i><u> 下划线用u </u><s> 删除线用s </s></p><!-- 无序列表unordered list --><ul><li>元素1</li><li>元素2</li><li>元素3</li></ul><!-- 有序列表ordered list --><ol><li>元素1</li><li>元素2</li><li>元素3</li></ol><!-- 表格标签(行tr,列标题th,单元数据td)--><!-- 每一行都用一个tr包裹,标题行装th,数据行装td --><!-- border加上表格边框,数值为边框的宽度 --><table border="1"><tr><th>标题1</th><th>标题2</th><th>标题3</th></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>1</td><td>2</td><td>3</td></tr></table></body></html>

三、 HTML属性

1、语法:<开始标签 属性名="属性值">

2、每个HTML标签可以具有不同的属性,用空格隔开

3、属性名称不区分大小写,但属性值对大小写敏感

4、大部分元素都有的属性:

class:元素的类名(一个或多个)

id:元素的id(唯一)

style:元素的行内样式

以链接和图像标签为例:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML 学习2</title>
</head><body><!-- 链接标签(输入a,然后按Tab键) --><!-- href属性: 定义了链接目标(URL、电子邮箱、手机号等) --><!-- target属性: 定义了链接的打开方式 --><!-- _self(默认):在当前标签页打开  _blank:在新的标签页打开 --><a href="https://www.baidu.com/">百度链接</a><br><a href="https://www.baidu.com/" target="_blank">百度链接</a><br><!-- 图片标签 --><!-- src属性: 定义了要显示图像文件的路径或URL --><!-- alt属性: 图像的替代文本,即图片无法显示时显示的文字,也可以选择不写 --><img src="你的名字.jpg" alt="该图片无法显示" width="200" height="100"><br></body></html>

四、块元素与行内元素

div:用于创建块级容器,以便于组织页面的结构和布局

       如把页面分为页眉、导航栏、侧边栏、中间区域等

 输入 .类名(或#id名),然后按Tab键,即可生成带相应属性的div框架

span:用于内联样式化文本,给文本的一部分应用样式或标记

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML 学习3</title>
</head><body><!-- 没有任何语意,仅用于组织内容,创建页面的布局结构(页眉、导航栏、侧边栏、主体内容等) --><!-- div块级标签: 用于创建一个可以包含其他HTML元素的容器块 --><div class="nav">  <a href="a">链接1</a><a href="a">链接2</a><a href="a">链接3</a></div><div class="content"><h1>文章标题</h1><p>文章内容</p><p>文章内容</p><p>文章内容</p></div><!-- span: 把一小段文本包装起来,以便于对它们使用样式、CSS或JS --><span>这是span标签</span><span>这是span标签</span><hr><span>这是span标签<a href="m">链接</a></span></body></html>

五、HTML表单

一)、type主要包含四类内容:

1、输入框:text和password(对应value为输入字段的默认值)

2、单选和多选:radio和checkbox(对应value为选项的值,当选中时,这个值会被提交)

3、按钮:button、submit和reset(对应value为按钮上的标签文本)

4、隐藏字段:hidden(对应value为隐藏在表单中的用户不可见的数值)

二)、区别name和value:

1、name:给表单控件起的名字,服务器靠这个名字来识别和获取输入的数据

2、value:在表单控件中输入的具体内容

举个例子:

在<input type="text" name="username" value="西瓜大侠">中,

“username”是输入框的名字,“西瓜大侠”是输入的内容

当点击提交时,这两个值会一起发送到服务器。

三)、区别id和name:

 

 四)、具体如下表:

标签属性属性的作用
formaction向何处发送填写的数据(URL,后端API)
labelfor通过id值和input绑定
inputtype="text"文本框
type="password"密码框(加密,不直接显示)
type="radio"单选框
type="checkbox"多选框
type="submit"提交按钮
inputname

控件的值,把选项归为一类

(单选和多选都要归类)

inputplaceholder在输入框中现实的浅灰色的提示内容
inputvalue指定input元素的初始值或当前值
inputid具有唯一性,用于标识元素

 

五)、代码: 

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML 学习4</title>
</head><body><!-- form: 表单的容器 --><!-- action: 表示提交时,向何处发送我们填写的数据 属性值为URL,后端提供给我们的API --><form action="#"><!-- type属性: 规定了input元素的类型 --><!-- placeholder属性: 在输入框中显示的浅灰色的提示内容 --><!-- value属性: 规定了input元素的默认值 --><span>用户名: </span><input type="text" placeholder="请输入内容"><label for="pwd">密码: </label><input type="password" id="pwd" placeholder="请输入密码"><!-- label: input的专属标签,可替代span,但仅限于和input配套使用 --><label for="">验证码</label><input type="text"><hr><!-- radio: 单选框模式 --><!-- label的for属性: 可以把label标签绑定到input元素,一般与input的id对应,每个input都有自己的唯一id,所以单选或多选不适合绑定id --><label>性别</label><!-- input的name属性: 把选项归为一类 --><!-- radio: 限制单选 --><input type="radio" name="gender">男<input type="radio" name="gender">女<input type="radio" name="gender">其他<hr><!-- checkbox: 限制多选 --><label>爱好: </label><input type="checkbox" name="hobby">篮球<input type="checkbox" name="hobby">足球<input type="checkbox" name="hobby">羽毛球<input type="submit" value="确认提交"></form>
</body></html>

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

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

相关文章

【JVM基础03】——组成-详细介绍下Java中的堆

目录 1- 引言&#xff1a;堆1-1 堆是什么&#xff1f;(What)1-2 为什么用堆&#xff1f;堆的作用 (Why) 2- ⭐核心&#xff1a;堆的原理&#xff08;How&#xff09;2-1 堆的划分2-2 Java 7 与 Java 8 的堆区别 3- 小结&#xff1a;3-1 详细介绍下Java的堆&#xff1f;3-2 JVM …

静态网站怎么更新数据

今天看到个问题 我不是行业从业者&#xff0c;但目前遇到一个问题 我公司网站为纯静态&#xff0c;除了直接从html里修改文字外能不能这样 建立一个xml或者txt文档&#xff0c;其中有很多信息&#xff0c;例如网站名称&#xff0c;电话&#xff0c;备案号等&#xff0c;一行一行…

SAPUI5基础知识15 - 理解控件的本质

1. 背景 经过一系列的练习&#xff0c;通过不同的SAPUI5控件&#xff0c;我们完成了对应用程序界面的初步设计&#xff0c;在本篇博客中&#xff0c;让我们一起总结下SAPUI5控件的相关知识点&#xff0c;更深入地理解SAPUI5控件的本质。 通常而言&#xff0c;一个典型UI5应用…

vscode通过ssh链接远程服务器上的docker

目录 1 编译docker image1.1 编译镜像1.2 启动镜像 2 在docker container中启动ssh服务2.1 确认是否安装ssh server2.2 修改配置文件2.3 启动ssh服务 3 生成ssh key4 添加ssh公钥到docker container中5 vscode安装插件Remote - SSH6 在vscode中配置 1 编译docker image 一般来…

【flink】之如何快速搭建一个flink项目

1.通过命令快速生成一个flink项目 curl https://flink.apache.org/q/quickstart.sh | bash -s 1.19.1 生成文件目录&#xff1a; 其中pom文件包好我们所需要的基础flink相关依赖 2.测试 public class DataStreamJob {public static void main(String[] args) throws Except…

激活pytorch遇到报错usage: conda-script.py [-h] [--no-plugins] [-V] COMMAND ...

问题 今天初次尝试在pycharm上创建与激活虚拟环境&#xff0c;创建结束后&#xff0c;使用命令conda activate pytorch激活虚拟环境时出现以下报错&#xff1a; usage: conda-script.py [-h] [–no-plugins] [-V] COMMAND … conda-script.py: error: argument COMMAND: inval…

docker 安装并测试(Ubuntu下)

1. 确认安装环境&#xff08;操作系统版本和 CPU 架构&#xff09; 2. 如果有旧版本的 docker 需要进行卸载 使用 docker 命令检查是否已经安装了 docker 如果 docker 已经安装&#xff0c;使用以下命令卸载&#xff1a; apt-get purge docker-ce docker-ce-cli containerd…

JavaWeb笔记_Response对象

一.Response对象 1.1 Response对象概述 a.专门负责给浏览器响应信息&#xff08;响应行&#xff0c;响应头&#xff0c;响应体&#xff09;的对象 b.我们主要使用的是跟HTTP协议相关的Response对象&#xff1a;HTTPServletResponse&#xff0c;继承了ServletResponse&#x…

均值滤波算法及实现

均值滤波器的使用场景&#xff1a; 均值滤波器使用于处理一些如上述蓝色线的高斯噪声场景 红色曲线是经过均值滤波处理后的数据。主要因为均值滤波设置数据缓冲区&#xff08;也即延时周期&#xff09;&#xff0c;使得测量值经过缓冲不会出现特别大的变化。 黄色曲线为高斯噪声…

趣谈linux操作系统 9 网络系统-读书笔记

文章目录 网络协议栈基础知识回顾网络分层网络分层的目的各层作用简介延伸-ip地址,有类,无类,cidr socket实现分析tcp/udp回顾socket编程回顾TCP编程回顾UDP编程回顾差异 socket相关接口实现浅析sokcet实现解析创建socket的三个参数socket函数定义及其参数创建socket结构体关联…

Redis高级篇—分布式缓存

目录 Redis持久化 RDB持久化 AOF持久化 RDB与AOF对比 Redis主从 全量同步 增量同步 Redis哨兵 RedisTemplate集成哨兵实现 Redis分片集群 散列插槽 集群伸缩 故障转移 自动故障转移 手动故障转移 RedisTemplate访问分片集群 Redis持久化 RDB持久化 RDB全称Re…

《基于 CDC、Spark Streaming、Kafka 实现患者指标采集》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; CSDN入驻不久&#xff0c;希望大家多多支持&#xff0c;后续会继续提升文章质量&#xff0c;绝不滥竽充数…

第三篇 Vue项目目录结构介绍

1、最外层目录结构 passagerFrontPage ├── .vscode //vscode配置&#xff0c;不用理会 ├── node_modules //项目依赖&#xff0c;npm install命令执行后自动生成 ├── public //公共资源存放 ├── src //源码 ├── tests //选装&#xff1a;测试模块 ├── .git…

负载均衡 lvs

1. 4层转发(L4) 与 7层转发(L7) 区别 4层转发(L4) 与 7层转发(L7) 区别 转发基于的信息 状态 常用的服务 L4 基于网络层和传输层信息&#xff1a; L4转发主要依赖于网络层IP头部(源地址&#xff0c;目标地址&#xff0c;源端口&#xff0c;目标端口)和传输层头部&#xff…

【python】OpenCV—Scanner

文章目录 1、需求描述2、代码实现3、涉及到的库函数cv2.arcLengthcv2.approxPolyDPskimage.filters.threshold_localimutils.grab_contours 4、完整代码5、参考 1、需求描述 输入图片 扫描得到如下的结果 用OpenCV构建文档扫描仪只需三个简单步骤: 1.边缘检测 2.使用图像中…

UniVue@v1.5.0版本发布:里程碑版本

前言 以后使用UniVue都推荐使用1.5.0以后的版本&#xff0c;这个版本之后&#xff0c;更新的速度将会放缓。 希望这个框架能够切实的帮助大家更好的开发游戏&#xff0c;做出一款好游戏&#xff01;本开源项目采用的开源协议为MIT协议&#xff0c;完全开源化&#xff0c;以后也…

IDEA的工程与模块管理

《IDEA破解、配置、使用技巧与实战教程》系列文章目录 第一章 IDEA破解与HelloWorld的实战编写 第二章 IDEA的详细设置 第三章 IDEA的工程与模块管理 第四章 IDEA的常见代码模板的使用 第五章 IDEA中常用的快捷键 第六章 IDEA的断点调试&#xff08;Debug&#xff09; 第七章 …

web安全之SQL手工注入漏洞测试

一、目的 1.掌握SQL注入原理&#xff1b; Sql注入详解(原理篇)_sql注入攻击的原理-CSDN博客 2.了解手工注入的方法&#xff1b; 3.了解MySQL的数据结构&#xff1b; 4.了解字符串的MD5加解密 二、过程 1.进去后出现以下界面 找注入点 发现有注入点&#xff0c;即id被代入执…

怎样优化 PostgreSQL 中对复杂的日期时间格式转换和时区处理?

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01;&#x1f4da;领书&#xff1a;PostgreSQL 入门到精通.pdf 文章目录 怎样优化 PostgreSQL 中对复杂的日期时间格式转换和时区处理&#xff1f; 怎样优化 PostgreSQL 中对复…

Linux-开机自动挂载(文件系统、交换空间)

准备磁盘 添加三块磁盘&#xff08;两块SATA&#xff0c;一块NVMe&#xff09; 查看设备&#xff1a; [rootlocalhost jian]# ll /dev/sd* [rootlocalhost jian]# ll /dev/nvme0n2 扩&#xff1a;查看当前主机上的所有块设备&#xff0c;通过如下指令实现&#xff1a; [root…