当前位置: 首页 > 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",…...

相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)

【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...

大数据学习(132)-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

短视频矩阵系统文案创作功能开发实践,定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

脑机新手指南(七):OpenBCI_GUI:从环境搭建到数据可视化(上)

一、OpenBCI_GUI 项目概述 &#xff08;一&#xff09;项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台&#xff0c;其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言&#xff0c;首次接触 OpenBCI 设备时&#xff0c;往…...