黑马官网2024最新前端就业课V8.5笔记---HTML篇

Html 定义

HTML 超文本标记语言——HyperText Markup Language。

标签语法

在这里插入图片描述

  • 标签成对出现,中间包裹内容
  • <>里面放英文字母(标签名)
  • 结束标签比开始标签多 /
  • 拓展 :
    双标签:成对出现的标签
    单标签:只有开始标签,没有结束标签

HTML 基本骨架

在这里插入图片描述
在这里插入图片描述

VS Code 快速生成骨架:

在 HTML 文件(.html)中,!(英文)配合 Enter / Tab 键

标签的关系

作用:明确标签的书写位置;让代码格式更整齐

父子关系(嵌套关系)

兄弟关系(并列关系)

注释

在 VS Code 中,添加 / 删除注释的快捷键:Ctrl + /

标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等等。

高级软件人才培训专家
多一句没有,少一句不行,用更短时间,教会更实用的技术!

标题标签

标签名:H1 ~ H6(双标签)
显示特点:

  • 文字加粗
  • 字号逐渐减小
  • 独占一行(换行)

注意

h1 标签在一个网页中只能用一次,用来放新闻标题或网页的 logo

h2 ~ h6 没有使用次数的限制

段落标签

一般用在新闻段落、文章段落、产品描述信息等等。

标签名:P(双标签)

显示特点:

  • 独占一行
  • 段落之间存在间隙

换行与水平线标签

换行:<br.>(单标签)
浏览器不识别代码中的 Enter 键换行

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

文本格式化标签

作用:为文本添加特殊格式,以突出重点。常见的文本格式:加粗、倾斜、下划线、删除线等。

在这里插入图片描述

重点
strong、em、ins、del 标签自带强调含义(语义)。

图像标签 – 基本使用

作用: 在网页中插入图片。

src用于指定图像的位置和名称,是 <img.> 的必须属性。

<img src="图片的 URL">

其他属性
在这里插入图片描述

在这里插入图片描述

路径

路径指的是查找文件时,从起点到终点经历的路线。

相对路径: 从当前文件位置出发查找目标文件

  • / 表示进入某个文件夹里面
  • . 表示当前文件所在文件夹 ./
  • . .表示当前文件的上一级文件夹 . ./

绝对路径: 从盘符出发查找目标文件

超链接

作用:点击跳转到其他页面。

语法

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

target属性

属性作用
href用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能
target用于指定链接页面的打开方式,其取值有_ self和 _ blan两种,其中_ self为默认值,_blank为在新窗口中打开方式。

链接分类

  1. 外部链接
<a href="http://www.qq.com" target="_blank">腾讯</a>`
  1. 内部链接

网站内部之间的相互链接,直接链接内部页面名称即可。

<a href="index.html">首页</a>
  1. 空链接
    如果当时没有确定链接目标时
<a herf="#">首页</a>
  1. 下载链接
    如果href里面地址是一个文件或者压缩包,会下载这个文件。

  2. 网页元素链接
    在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接

<h4>网页元素链接</h4><a href="http://www.baidu.com"><img src="img.jpg" /></a>

音频标签

<audio src="音频的 URL"></audio>

常见属性

在这里插入图片描述
拓展: 书写 HTML5 属性时,如果属性名和属性值相同,可以简写为一个单词

视频标签

<video src="视频的 URL"></video>

常见属性
在这里插入图片描述

列表

作用:布局内容排列整齐的区域。

无序列表

作用: 布局排列整齐的不需要规定顺序的区域。

标签 ul嵌套li,ul是无序列表,li是列表条目。

<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>

注意事项:

  • ul标签里面只能包裹li标签
  • li标签里面可以包裹任何内容

有序列表

作用: 布局排列整齐的需要规定顺序的区域。

标签: ol嵌套li,ol是有序列表,li是列表条目。

<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>

注意事项:

  • ol标签里面只能包裹li标签
  • li标签里面可以包裹任何内容
  • < ol>标签中的type属性值为排序的序列号,不添加type属性时,有序列表默认从数字1开始排序。
  • 常用的type属性值分别为是1,a,A,i,I
  • < ol reversed=“reversed”>中的reversed属性能够让有序列表中的序列倒序排列。
  • < ol start=“3”>中的start属性值为3,有序列表中的第一个序列号将从3开始排列。

自定义列表

标签: dl嵌套dt和dd,dl是定义列表,dt是定义列表的标题,dd是定义列表的描述

<dl>
<dt>列表标题</dt>
<dd>列表描述 / 详情</dd>
</dl>

注意事项:

  • dl里面只能包含dt和dd

  • dt和dd 里面可以包含任何内容

表格

标签: table嵌套tr,tr嵌套td/th。

标签名说明
table表格
tr
th表头单元格
td内容单元格
姓名语文数学总分
张三199100199
李四198100198
总结全市第全市第全市:

提示:在网页中,表格默认没有边框线,使用border属性可以为表格添加边框线。


表格属性

这些属性要写到标签table里面去
三参为0,平时开发的我们这三个参数 border cellpadding cellspacing 为 0
在这里插入图片描述

表格结构标签-了解

作用:用表格结构标签把内容划分区域,让表格结构更清晰,语义更清晰。

标签名含义特殊说明
thead表格头部表格头部内容
tbody表格主体主要内容区域
tfoot表格底部汇总信息区域

合并单元格

作用: 将多个单元格合并成一个单元格,以合并同类信息。

合并的顺序我们按照 先上 后下 先左 后右 的顺序 ,合并完之后需要删除多余的单元格。

  • 跨行合并:rowspan=“合并单元格的个数”
  • 跨列合并:colspan=“合并单元格的个数”
    在这里插入图片描述
    目标单元格:(写合并代码)
  • 跨行:最上侧单元格为目标单元格,写合并代码
  • 跨列:最左侧单元格为目标单元格,写合并代码
    合并单元格三部曲:
  • 先确定跨行还是跨列合并
  • 找到目标单元格,写上合并方式=合并的单元格数量。比如:
  • 删除多余的单元格

表单

作用: 收集用户信息。
组成: 在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。
表单控件:
包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息:
一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。
表单域:
它相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。

表单域
使用场景:

  • 登录页面

  • 注册页面

  • 搜索区域

表单域

  • 收集的用户信息通过form表单域传递给服务器
<form action="url地址" method="提交方式" name="表单域名称">  各种表单元素控件</form>

常用属性
在这里插入图片描述

表单控件

input标签基本使用

input标签type属性值不同,则功能不同。

<input type="." >

在这里插入图片描述

input标签占位文本

占位文本:提示信息。

<input type="..." placeholder="提示信息">

文本框和密码框都可以使用

单选框radio

常用属性:

属性名作用特殊说明
name控件名称控件分组,同组只能选中一个(单选功能)
checked默认选中属性名和属性值相同,简写为一个单词
<input type="radio" name="gender" checked><input type="radio" name="gender">

提示:name属性值自定义。


上传文件-file

默认情况下,文件上传表单控件只能上传一个文件,添加multiple属性可以实现文件多选功能。

<input type := "file" multiple>

多选框-checkbox

多选框也叫复选框。

默认选中:checked。

<input type="checkbox"checked>敲前端代码

下拉菜单

标签: select嵌套option,select是下拉菜单整体,option是下拉菜单的每一项。

<select><option>北京</option> <option>上海</option> <option>广州</option> <option>深圳l</option><option selected>武汉</option>
</select>

默认显示第一项,selected属性实现默认选中功能

文本域

作用: 多行输入文本的表单控件。

标签: textarea,双标签。

<textarea>默认提示文字</textarea>

注意点:

实际开发中,使用CSS设置文本域的尺寸实际开发中,一般禁用右下角的拖拽功能

label标签

作用: 网页中,某个标签的说明文本。

经验: 用label标签绑定文字和表单控件的关系,增大表单控件的点击范围,

label标签-增大点击范围

写法一

  • label标签只包裹内容,不包裹表单控件

  • 设置label标签的for属性值和表单控件的id属性值相同

<input type="radio" id="man"> 
<label for="man"></label>

写法二

使用label标签包裹文字和表单控件,不需要属性

<label><input type="radio"></label>

提示:
支持label标签增大点击范围的表单控件:文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。


按钮-button

<button type = ">按钮</button>

type属性值:

属性值 type说明
submit提交按钮,点击后可以提交数据到后台(默认功能)
reset重置按钮,点击后将表单控件恢复默认值
button普诵按钮,默认没有功能 - -般配合 lavaScript 使用

提示:

  • 注意:按钮需配合form标签(表单区域)才能实现对应的功能。

无语义的布局标签

作用: 布局网页(划分网页区域,摆放内容)

  • div:独占一行

  • span:不换行

有语义的布局标签

标签名语义
header网页头部
nav网页导航
footer网页底部
aside网页侧边栏
section网页区块
article网页文章

字符实体

作用:在网页中显示预留字符。

在这里插入图片描述

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

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

相关文章

NXP Zigbee JN5169 开发环境软件 文档和支持资源打包下载

NXP Zigbe JN5169软件、文档和支持资源下载 从NXP官网下载https://www.nxp.com.cn/pages/jn516x-7x-zigbee-3-0:ZIGBEE-3-0&#xff0c;有点蛋疼网站&#xff0c;要注册会员&#xff0c;所以我打包好所有NXP Zigbe JN5169所需的 软件、文档和支持资源打包好&#xff0c;以供开…

基于matlab的语音识别系统

一&#xff0e;设计任务及要求 1.1设计任务 作为智能计算机研究的主导方向和人机语音通信的关键技术&#xff0c;语音识别技 术一直受到各国科学界的广泛关注。以语音识别开发出的产品应用领域非常广泛&#xff0c;有声控电话交换、语音拨号系统、信息网络查询、家庭服务、宾馆…

使用WebStorm开发Vue3项目

记录一下使用WebStorm开发Vu3项目时的配置 现在WebStorm可以个人免费使用啦&#xff01;&#x1f929; 基本配置 打包工具&#xff1a;Vite 前端框架&#xff1a;ElementPlus 开发语言&#xff1a;Vue3、TypeScript、Sass 代码检查&#xff1a;ESLint、Prettier IDE&#xf…

Ansys HFSS:外壳的屏蔽效果演示

欢迎回来&#xff01;随着电子系统变得越来越复杂和集成&#xff0c;确保适当的屏蔽以减轻电磁干扰 &#xff08;EMI&#xff09; 变得越来越重要。 继续讨论屏蔽效果&#xff0c;我们现在将重点转移到另一个强大的工具上&#xff1a;Ansys HFSS&#xff08;高频结构仿真器&am…

Python基于TensorFlow实现双向循环神经网络GRU加注意力机制分类模型(BiGRU-Attention分类算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后关注获取。 1.项目背景 随着深度学习技术的发展&#xff0c;循环神经网络&#xff08;RNN&#xff09;及其变种如门控循环…

【C++】C++的单例模式

二十四、C的单例模式 1、C的单例模式 本小标题不是讨论C的语言特性&#xff0c;而是一种设计模式&#xff0c;用于确保一个类在任何情况下都只有一个实例&#xff0c;并提供一个全局访问点来获取这个实例。即C的单例模式。这种模式常用于资源管理&#xff0c;如‌线程池、‌缓…

单元测试(Junit)

系统—模块—子模块&#xff0c;子模块中不可分割的程序单元的测试&#xff0c;单元的粒度根据实际情况可能是 类或方法等。 面向对象编程中&#xff0c;最小单元就是方法。 单元测试目的是在集成测试和功能测试之前对系统可测试单元进行逐一检查和验证。 单元测试基本原则 …

这个自动化框架吧,解决接口间数据依赖

在实际的测试工作中&#xff0c;在做接口自动化测试时往往会遇到接口间数据依赖问题&#xff0c;即API_03的请求参数来源于API_02的响应数据&#xff0c;API_02的请求参数又来源于API_01的响应数据。 因此通过自动化方式测试API_03接口时&#xff0c;需要预先请求API_02接口&a…

JeecgBoot入门

最近在了解低代码平台&#xff0c;其中关注到gitee上开源项目JeecgBoot&#xff0c;JeecgBoot官方也有比较完整的入门教学文档&#xff0c;这里我们将耕者官方教程学习&#xff0c;并将其记录下来。 一、项目简介 JeecgBoot 是一款基于代码生成器的低代码开发平台拥有零代码能力…

修改HarmonyOS鸿蒙图标和名字,打包后安装到真机,应用图标丢失变成透明,修改名字也不生效,还是默认的labeL解决方案教程

HarmonyOS鸿蒙打包hap 安装应用到桌面没有图标&#xff0c;用hdc安装到真机&#xff0c;打包后应用图标丢失变成透明&#xff0c;名字也还是默认的label的bug&#xff0c;以下是解决方案 以下是修改方案&#xff1a; 1、修改应用名字&#xff1a; 2、修改应用图标&#xff1a…

MYSQL安装(ubuntu系统)

rpm -qa 查询安装软件包 ps axj 查询服务 卸载mysql&#xff08;万不得已&#xff09; ps axj | grep mysql 查看是否存在mysql服务 systemctl stop mysqld 关闭该服务 rpm -qa | grep mysql 查安装mysql安装包 rmp -qa | grep mysql | xargs (yum apt) -y remove进行批量…

比ChatGPT更牛!苹果新AI模型刷新交互体验!能看懂你的手机屏幕!平板和安卓机也都行

家人们&#xff0c;苹果一直在悄悄进步&#xff01; 近期&#xff0c;据小鹿观察&#xff0c;各大科技巨头不仅在提升模型解决复杂问题的能力上竞争激烈&#xff0c;而且还在大语言模型应用于用户界面&#xff08;UI&#xff09;交互方面上暗暗发力&#xff01; 最近&#xf…

InstructIR: High-Quality Image Restoration Following Human Instructions 论文阅读笔记

这是Radu大佬所在的Wrzburg大学的computer vision lab实验室发表在ECCV2024上的一篇论文&#xff0c;代码开源。文章提出了一种文本引导的All-in-One的restoration模型&#xff0c;如下图所示&#xff1a; 这个工作其实跟"InstructPix2Pix: Learning to Follow Image Edit…

解决使用Golang的email库发送qq邮件报错short response,错误类型为textproto.ProtocolError

问题阐述 使用email库发送QQ邮件&#xff0c;采用587端口&#xff1a; package mainimport ("fmt""net/smtp""github.com/jordan-wright/email" )func SendEmail(sendTo string, subject string, body string) (err error) {e : email.NewEmai…

【北京迅为】《STM32MP157开发板嵌入式开发指南》-第七十二章 Debian文件系统

iTOP-STM32MP157开发板采用ST推出的双核cortex-A7单核cortex-M4异构处理器&#xff0c;既可用Linux、又可以用于STM32单片机开发。开发板采用核心板底板结构&#xff0c;主频650M、1G内存、8G存储&#xff0c;核心板采用工业级板对板连接器&#xff0c;高可靠&#xff0c;牢固耐…

Spring框架的JDBC模板技术

目录 一、JDBC模板类的使用 1.引入依赖 2.测试类 3.运行&#xff0c;查看数据库 二、使用Spring框架来管理模板类 1.配置文件 2.测试类 3.运行&#xff0c;查看数据库 三、Spring框架管理开源的连接池 1.配置开源的连接池 2.将数据库连接的信息配置到属性文件中 3.核…

【万字详文介绍】:迭代扩张卷积神经网络(IDCNN)

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…

2-Ubuntu/Windows系统启动盘制作

学习目标&#xff1a; 掌握使用Win32DiskImager、Rufus等工具制作系统启动盘的基本步骤。独立将ISO镜像文件写入USB闪存驱动器&#xff0c;确保在需要时顺利安装或修复系统。通过学习如何选择正确的源文件和目标驱动器&#xff0c;理解启动盘的使用场景和注意事项&#xff0c;…

简介Voronoi图Voronoi Diagrams

这是计算机的经典算法。 问题引入 倘若一张大白纸上有很多三角点&#xff0c;掉进去一个五星点&#xff0c;问&#xff0c;哪个三角离着五星最近&#xff1f;简单&#xff0c;算距离呗&#xff0c;这个五星到其他所有三角点的距离&#xff0c;找到最小的那个就行。 若掉进去…

【进阶sql】复杂sql收集及解析【mysql】

开发时会出现&#xff0c;必须写一些较复杂sql的场景 可能是给会sql的客户 提供一些统计sql 或是临时需要统计数据信息但是 开发一个统计功能有来不及的情况 也可能是报表系统组件 只支持 sql统计的情况 特地记录下这些sql 作为积累 substring 截取查询出的字符串&#xff…