当前位置: 首页 > news >正文

一篇讲完HTML核心内容

一、HTML


1、 HTML概念

网页,是网站中的一个页面,通常是网页是构成网站的基本元素,是承载各种网站应用的平台。通俗的说,网站就是由网页组成的。通常我们看到的网页都是以htm或html后缀结尾的文件,俗称 HTML文件。

2、 什么是HTML

HTML全称:Hyper Text Markup Language(超文本标记语言)

  • 超文本:页面内可以包含图片、链接,甚至音乐、程序等非文字元素

  • 标记:标签,不同的标签实现不同的功能

  • 语言:人与计算机的交互工具

3、 HTML能做什么

HTML使用标记标签来描述网页,展示信息给用户

  • 展现音频,视频,图片

  • 表格,列表

  • 超链接

4、 HTML书写规范

  • HTML标签是以尖括号包围的关键字 例如<a> <img>

  • HTML标签通常是成对出现的,有开始就有结束

  • HTML通常都有属性,格式:属性=‘属性值’(多个属性之间空格隔开)

    • 属性放在开标签内

    • <a href="" target=""> </a>

  • HTML标签不区分大小写,建议全小写

  • HTML标签支持合理的嵌套

  • 开闭标签之间加要展示的内容

  • 文件后缀是html,写完后使用浏览器打开

<!-- 例如 -->
<a href="http://www.baidu.com" target="_blank">超链接</a>

5、 开发工具

  • VSCode (微软) (我们使用这款)

  • HBuilderX (国产)

  • WebStorm (IDEA家族的)

  • Dreamweaver (考古队)

5.1 安装 VSCode

默认下一步下一步就可以.

image-20230306175553697

建议勾选12345,这样可以在右键时有 一个提示"使用VSCode打开文件"

5.2 插件

安装插件

  • Chinese (Simplified)(简体中文)

  • Auto rename tag (自动改标签名)

  • Material lcon Theme (图标样式)

  • open in browser (快速使用浏览器打开页面)

image-20230306175911196

以上几个是非常墙裂建议安装!,在应用商店,输入以上几个的名字即可

image-20230306175937001

5.3 使用vscode

使用VSCode,最好的方式

  • 先在本地磁盘创建好一个前端项目(文件夹)

  • 使用VSCode打开该文件夹

  • 创建页面文件

image-20230306180220055

image-20230306180240350

image-20230306180252280

5.4 运行

1 在磁盘中找到文件,使用浏览器打开

2 或者使用刚才我们安装的插件,有快捷键 alt+b,就会使用电脑的默认浏览器打开

二、HTML基本标签


1、 结构(骨架)标签[重要]

<html>:根标签       <head>:网页头标签<title></title>:页面的标题      </head>      <body></body>:网页正文
</html> 

以下属性了解

属性名代码描述
text< body text="#f00"></ body>设置网页正文中所有文字的颜色
bgcolor< body bgcolor="#00f"></ body>设置网页的背景色
background< body background="1.png"></ body>设置网页的背景图

颜色的表示方式:

  • 第一种方式:用表示颜色的英文单词,例,red green blue

  • 第二种方式:用16进制表示颜色,例,#000000 #ffffff #325687 #377405

  • 第三种方式: 用三原色rgb(0,0,0) 数字取值0-255

2、 排版标签 [重要]

  • 可用于实现简单的页面布局

  • 注释标签:<!--注释-->

  • 换行标签:< br> (单标签,没有行间距)

  • 段落标签:< p>文本文字</ p>

    • 特点:段与段之间有空行 (行间距比较大)

    • 属性:align对齐方式(left、center、right)

  • 水平线标签:< hr/> (单标签)

    • 属性(了解):

      • width:水平线的长度(两种:第一种:像素表示;第二种,百分比表示)

        • 像素单位px,长度固定

        • 百分比单位% ,长度随着浏览器窗口会变化

      • size: 水平线的粗细 (像素表示,例如:10px)

      • color:水平线的颜色

      • align:水平线的对齐方式

  • 缩进(空格符) &nbsp;

劝学  颜真卿
-----------
三更灯火五更鸡,
正是男儿读书时.
黑发不知勤学早,
白首方悔读书迟.

要求: 古诗名标题,作者要缩进,正文前有分割线,正文四句话换行

 <h2>劝学</h2>&nbsp;&nbsp;&nbsp;&nbsp;颜真卿<hr width="130px" align="left">三更灯火五更鸡,<br>正是男儿读书时.<br>黑发不知勤学早,<br>白首方悔读书迟.<br><hr width="130px" align="left"><p>三更灯火五更鸡,</p><p>正是男儿读书时.</p><p>黑发不知勤学早,</p><p>白首方悔读书迟.</p>

3、 块标签[重要]

使用CSS+DIV是现下流行的一种布局方式

标签代码描述
div< div></ div>行级块标签,独占一行,换行
span< span></ span>行内块标签,所有内容都在同一行

ps: 会用F12 浏览器开发者工具

4、 基本文字标签

font标签处理网页中文字的显示方式

属性名代码描述
size< font size="7"></ font>用于设置字体的大小,最小1号,最大7号
color< font color="#f00"></ font>用于设置字体的颜色
face< font face="宋体"></ font>用于设置字体的样式

5、 标题标签[重要]

随着数字增大文字逐渐变小,字体是加粗的,内置字号,默认占据一行

标签代码描述
h1< h1></ h1>1号标题,最大字号
h2< h2></ h2>2号标题
h3< h3></ h3>3号标题
h4< h4></ h4>4号标题
h5< h5></ h5>5号标题
h6< h6></ h6>6号标题,最小字号

6、 列表标签[重要]

无序列表

  • 1

  • 2

  • 3


有序列表

  1. day01

  2. day02

  3. day03

无序列表:使用一组无序的符号定义, < ul>< /ul>

<ul type="circle"><li></li>
</ul>

ul标签内,有属性type

属性值描述用法举例
circle空心圆< ul type="circle">< /ul>
disc实心圆< ul type="disc">< /ul>
square黑色方块< ul type="square">< /ul>

有序列表:使用一组有序的符号定义, < ol>< /ol>

<ol type="a" start="1"><li></li>
</ol>

ol标签内,有属性type

属性值描述用法举例
1数字类型< ul type="1">< /ul>
A大写字母类型< ul type="A" >< /ul>
a小写字母类型< ul type="a">< /ul>
I大写古罗马< ul type="I">< /ul>
i小写古罗马< ul type="i">< /ul>

列表嵌套:无序列表与有序列表相互嵌套使用

代码举例:
    <ol><li></li><li></li><li><ul><li></li></ul></li></ol>

7、 图形标签[重要]

在页面指定位置处中引入一幅图片, < img />

属性名描述
src引入图片的地址
width图片的宽度
height图片的高度
border图片的边框
align与图片对齐显示方式
alt提示信息

路径问题:

  • ./ 当前文件夹 .

  • ../ 上一层文件夹

    <ol><li><img width="100px" src="../images/java1.jpg"></li><li><img width="100px" src="../images/java2.jpg"></li><li><img width="100px" src="../images/java3.jpg"></li></ol>

8、 超链接标签[重要]

  • 在页面中使用链接标签跳转到另一页面

  • 标签: < a href="">< /a>

  • 属性:href:跳转页面的地址(跳转到外网需要添加协议)

  • 设置跳转页面时的页面打开方式,target属性

    • _blank在新窗口中打开

    • _self在原页面中打开

练习: 图片加链接(点击图片能跳转页面)

   <!-- 图片背后是连接 --><a href="https://baike.baidu.com/item/Java/85979?fr=ge_ala"><img src="../images/6.jpg" width="200px"></a>

练习: 列表加链接

    <ul><li><a href="#">外长现场读宪法回应台湾问题热</a></li><li><a href="#">委员建议允许女职工哺乳期灵活办公</a></li><li><a href="#">十组数据看增进民生福祉</a></li></ul>

9、 表格标签[重要]

表格标签非常重要,用于在项目中展示数据的,例如下方这个

image-20240325161609578

普通表格(table,tr,td)

<table> <!--  表格 --><tr> <!--  table row 行 --><td></td> <!-- table data单元格数据 --></tr>
</table>

表格的列标签(th):内容有加粗和居中效果

<table><thead>  <!-- 表头,一般用在第一行--><th></th> <!-- table head--></thead>
</table>

表格的列合并属性(colspan):在同一行内同时合并多个列 column 列

<table><tr><td colspan="合并的列数"></td></tr>
</table>

表格的行合并属性(rowspan):在同一列跨多行合并

<table><tr><td rowspan="合并的行数"></td></tr>
</table>

三、HTML表单标签[最重要]


html表单用于收集不同类型的用户输入数据

1、 form元素常用属性

  • action表示动作,值为服务器的地址,把表单的数据提交到该地址上处理

  • method:请求方式:get 和post

    • get:

      • 地址栏,请求参数都在地址后拼接 path?name=张三&password=23456

      • 不安全

      • 效率高

      • get请求大小有限制,不同浏览器有不同,但是大约是2KB;一般情况用于查询数据

    • post:

      • 地址栏:请求参数单独处理。

      • 安全可靠些

      • 效率低

      • post请求大小理论上无限;一般用于插入删除修改等操作

  • enctype:表示是表单提交的类型

    • 默认值:application/x-www-form-urlencoded 普通表单

    • multipart/form-data 多部分表单(一般用于文件上传)​

2、 input元素

作为表单中的重要元素,可根据不同type值呈现为不同状态

属性值描述代码
text单行文体框< input type="text"/> 默认的
password密码框< input type="password"/>
radio单选按钮< input type="radio"/>
checkbox复选框< input type="checkbox"/>
date日期框< input type="date"/>
time时间框< input type="time"/>
datetime日期和时间框< input type="datetime"/>
email电子邮件输入< input type="email"/>
file文件上传< input type="file"/>
hidden隐藏域< input type="hidden"/>
submit表单提交按钮< input type="submit"/>
button普通按钮< input type="button"/>
reset重置按钮< input type="reset"/>

input标签中属性

  • value 输入框的值

  • name 输入框值的key,没有name属性,将来后台服务器没有办法接收数据

3、 select 元素(下拉列表)

  • 单选下拉列表:< select>< /select>

  • 默认选中属性:selected="selected"

    • ps: HTML5以后,属性名等于属性值的属性,可以简写属性即可

<select><option selected="selected">内容</option>...<option></option>
</select>
  • 多选下拉列表属性: < select></ select>

  • 多选列表:multiple="multiple"

<select multiple="multiple"><option></option>
</select>

4、 textarea元素(文本域)

多行文本框: < textarea cols="列" rows="行">< /textarea>

5、 综合示例

案例效果图

image-20230306182027262

<body><!-- input的value属性,是输入框的默认值,很重要一般用在更新数据,在输入框回显数据用的input的属性,做输入框的背景提示  
---------------------------------------------表单是干什么? 收集数据1) 点击提交按钮,就会提交数据到action指定的服务器2) 要给input,select设置name属性值,用来指定发送到服务器的数据的名字要不然,后端服务器无法获得表单中的数据3) 单选,复选,下拉框,还要设置value,用来指定数据值,否则提交到后端都是on,无意义4) 一般,在设计上,性别,学历,技能,不会设计成字符数据,都是数字例如1代表男,2代表女,这样节省数据库存储空间
------------------------------------------------method可以指定提交到服务器方式,默认是get另外一种: postget:  明文提交数据,所携带数据量较小(2-4k),快post: 隐藏提交数据,数据在请求体,携带数据大小不限,慢--><form action="/his" method="post">用户名<input type="text" value="admin" name="username" placeholder="6-10位"> <br>密码<input type="password"  name="password" value="123456"> <br>性别<input type="radio" name="sex" value="1">男<input type="radio" name="sex" value="2">女 <br>技能<input type="checkbox" name="skill" value="1">rap <input type="checkbox" name="skill" value="2">唱跳<input type="checkbox" name="skill" value="3">篮球<br>生日<input type="date" name="birthday"> <br>学历<select name="edu"><option value="1">大专</option><option value="2">本科</option><option value="3">研究生</option></select> <br><input type="reset" value="重置"> <input type="submit" value="提交"> </form>
</body>

相关文章:

一篇讲完HTML核心内容

一、HTML 1、 HTML概念 网页&#xff0c;是网站中的一个页面&#xff0c;通常是网页是构成网站的基本元素&#xff0c;是承载各种网站应用的平台。通俗的说&#xff0c;网站就是由网页组成的。通常我们看到的网页都是以htm或html后缀结尾的文件&#xff0c;俗称 HTML文件。 2、…...

2024icpc(Ⅱ)网络赛补题 G

2024icpc(Ⅱ)网络赛补题 G 题目链接&#xff1a;The 2024 ICPC Asia EC Regionals Online Contest (II) G、Game 题意&#xff1a; 给定Alice和Bob的每一轮的概率 p 0 , p 1 p_0, p_1 p0​,p1​ 给定Alice和Bob的初始数字 x , y x,y x,y。 对于每一轮&#xff1a; 如果Al…...

AIGC时代!AI的“iPhone时刻”与投资机遇

AIGC时代&#xff01;AI的“iPhone时刻”与投资机遇 前言AI的“iPhone时刻”与投资机遇 前言 AIGC&#xff0c;也就是人工智能生成内容&#xff0c;它就像是一股汹涌的浪潮&#xff0c;席卷了整个科技世界。它的出现&#xff0c;让我们看到了人工智能的无限潜力&#xff0c;也…...

Kubernetes调度单位Pod

Kubernetes调度单位Pod 1 Pod简介 不直接操作容器container。 一个 pod 可包含一或多个容器&#xff08;container&#xff09;&#xff0c;它们共享一个 namespace&#xff08;用户&#xff0c;网络&#xff0c;存储等&#xff09;&#xff0c;其中进程之间通过 localhost 本地…...

C语言指针篇

要想学好C语言&#xff0c;作为灵魂的指针那是必须要掌握的&#xff0c;而要想搞定指针&#xff0c;就不得不讲一下内存和地址之间的关系 内存和地址 计算机上的CPU&#xff08;中央处理器&#xff09;在处理数据的时候&#xff0c;需要的数据是在内存中读取的&#xff0c;处…...

Unity 使用Editor工具查找 Prefab 中的指定脚本

在 Unity 项目中&#xff0c;随着项目规模的扩大和 Prefab 数量的增加&#xff0c;管理和定位 Prefab 中的脚本变得更加复杂。为了提高开发效率&#xff0c;所以需要编写一个自定义的 Unity Editor 工具&#xff0c;帮助查找某个 Prefab 中是否使用了指定的脚本。本文将介绍如何…...

Frida-JSAPI:Interceptor使用

拦截器 Interceptor.attach(target, callbacks[, data]) 参数分析 target &#xff1a;target是一个NativePointer&#xff0c;用于指定想要拦截的函数的地址。callbacks &#xff1a;参数是一个包含一个或多个回调函数的对象。 onEnter(args) 回调函数&#xff0c;接收一个参…...

【深度学习】(3)--损失函数

文章目录 损失函数一、L1Loss损失函数1. 定义2. 优缺点3. 应用 二、NLLLoss损失函数1. 定义与原理2. 优点与注意3. 应用 三、MSELoss损失函数1. 定义与原理2. 优点与注意3. 应用 四、BCELoss损失函数1. 定义与原理2. 优点与注意3. 应用 五、CrossEntropyLoss损失函数1. 定义与原…...

git学习报告

文章目录 git学习报告如何配置vscode终端安装PowerShell安装 Microsoft.Powershell.Preview使用 git的使用关于团队合作 git指令本地命令&#xff1a;云端指令 git学习报告 如何配置vscode 安装powershell调教window终端&#xff0c;使其像Linux一样&#xff0c;通过Linux命令…...

Spring MVC的应用

目录 1、创建项目与maven坐标配置 2、核心配置 3、启动项目测试 4、不同请求参数在controller的配置 4.1 servlet API 4.2 简单类型 4.3 pojo类型 4.4 日期类型 4.5 restful风格4种操作类型 4.5.1 GET&#xff1a;获取资源 4.5.2 POST&#xff1a;新建资源 4.5.3 P…...

JavaEE: 深入探索TCP网络编程的奇妙世界(六)

文章目录 TCP核心机制TCP核心机制九: 面向字节流TCP核心机制十: 异常处理 小小的补充(URG 和 PSH)~TCP小结TCP/UDP 对比用UDP实现可靠传输(经典面试题) 结尾 TCP核心机制 上一篇文章JavaEE: 深入探索TCP网络编程的奇妙世界(五) 书接上文~ TCP核心机制九: 面向字节流 TCP是面…...

探秘 Web Bluetooth API:连接蓝牙设备的新利器

引言 随着物联网技术的快速发展&#xff0c;蓝牙设备在日常生活中扮演着越来越重要的角色。而在 Web 开发领域&#xff0c;Web Bluetooth API 的出现为我们提供了一种全新的方式来连接和控制蓝牙设备。本文将深入探讨 Web Bluetooth API 的使用方法和原理&#xff0c;帮助开发…...

Kubernetes Pod调度基础(kubernetes)

实验环境依旧是k8s快照&#xff0c;拉取本次实验所需的镜像文件&#xff1b; 然后在master节点上传已经编写好的yaml文件&#xff1b; 然后同步会话&#xff0c;导入镜像&#xff1b; pod控制器&#xff1a; 标签选择器--》标签&#xff1a; 标签&#xff1a; 在Kubernetes&…...

Angular由一个bug说起之十:npm Unsupported engine

我们在用npm下载包的时候&#xff0c;有时候会碰到这样的提示 这是npm的警告&#xff0c;说我们使用的nodejs版本与下载的包所要求的nodejs版本不一致。 这是因为有些包它对nodejs的版本有要求&#xff0c;然后就会在package.json文件里的engines字段里声明它所要求的nodejs版本…...

Android 开发高频面试题之——Flutter

Android开发高频面试题之——Java基础篇 flutter高频面试题记录 Flutter1. dart中的作用域与了解吗2. dart中. .. ...分别是什么意思?3. Dart 是不是单线程模型?如何运行的?4. Dart既然是单线程模型支持多线程吗?5. Future是什么6. Stream是什么7. Flutter 如何和原生交互…...

视频单目标跟踪研究

由于对视频单目标跟踪并不是很熟悉&#xff0c;所以首先得对该领域有个大致的了解。 视频目标跟踪是计算机视觉领域重要的基础性研究问题之一&#xff0c;是指在视频序列第一帧指定目标 后&#xff0c;在后续帧持续跟踪目标&#xff0c;即利用边界框&#xff08;通常用矩形框表…...

若依vue3.0表格的增删改查文件封装

一、因若依生成的文件没进行封装&#xff0c;维护起来比较麻烦。所以自己简单的进行封装了一下 gitee代码&#xff08;文件&#xff09;地址&#xff1a;https://gitee.com/liu_yu_ting09/ruo_yi.git 二、封装的方法&#xff08;下面绿色按钮进行全局封装一个JeecgListMixin.js…...

【已解决】如何使用JAVA 语言实现二分查找-二分搜索折半查找【算法】手把手学会二分查找【数据结构与算法】

文章目录 前言任务描述编程要求 输出样例:未查找到11元素&#xff01; 二、代码实现总结理解不了考试的时候直接背下来就好了。 前言 [TOC]二分搜索 任务描述 折半查找&#xff08;二分搜索&#xff09; 设a[low..high]是当前的查找区间&#xff0c;首先确定该区间的中点位置…...

ERROR 1524 (HY000): Plugin ‘mysql_native_password‘ is not loaded

你遇到的错误是由于 MySQL 版本不再默认支持 mysql_native_password 认证插件导致的。从 MySQL 8.0 开始&#xff0c;默认的认证插件是 caching_sha2_password&#xff0c;而不是 mysql_native_password。 解释&#xff1a; 错误 ERROR 1524 (HY000): Plugin mysql_native_pa…...

.NET 6.0 WebAPI 使用JWT生成Token的验证授权

1.引入相关程序包JwtBearer注意版本: 2.配置文件appsettings.json写相关配置参数(也可不写&#xff0c;写在程序里面&#xff0c;数据库读取也是一样的) , //JWT加密"JWTToken": {"SecretKey": "jsaduwqe6asdjewejdue7dfmsdfu0sdfmwmsd8wfsd6",…...

浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

解锁数据库简洁之道:FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...

leetcodeSQL解题:3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

云原生安全实战:API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...