【HTML】HTML标签实例学习笔记(待更新)-黑马程序员

【HTML】HTML标签实例学习笔记(待更新)-黑马程序员

成对出现的标签

标签一般都是成对出现,标签之间的关系有包含关系和并列关系两种。

<head></head>为双标签,<br/>为单标签 单标签很少 大多数都为双标签。
<!DOCTYPE> 文档类型声明,作用就是i告诉浏览器哪种 HTML格式来显示网页

lang语言种类 (用来定义当前文档显示的语言)

1.en定义语言为英语
2.zh-CN定义语言为中文

字符集 <meta charset=”UTF-8” /> :一定要写 否则会出现乱码的情况

标题标签 <h1>-<h6>(重要)
为了使网页具有语义化,我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题。即<h1>-<h6>

<h1>我是一级标题</h1>

单词head的缩写,意为头部、标题。
标签语义:作为标题使用,并且依据重要性递减。

特点:

加了标题的文字会变的加粗,字号也会依次变大。

<P>标签用于定义段落,它可以将整个网页分为若干个段落

<p></p>

标签语义:将文章分成几段
特点:

1、文本在一段落中会根据浏览器窗口的大小自动换行。
2、段落和段落之间保有空隙。

<br />换行标签
在HTML中,一个段落中的文字会从左到右一次排列,直到浏览器窗口的右端,然后才自动换行,如果希望某段文字自动换行,就需要使用换行标签<br />
标签语义:强制换行
特点:1、是一个单标签

文本格式化标签,使文字以特殊的方式显示。
标签语义:突出重要性,比普通文字更重要。
加粗:<strong></strong>或者<b></b>
倾斜:<em></em>或者<i></i>
删除线:<del></del>或者<s></s>
下划线:<ins></ins>或者<u></u>

<div>和<span>标签
<div>和<span>是没有语义的,它们就是一个盒子,用来装内容的。
<div>这是头部</div> :超大的盒子,一个人独占一行,可以装很多的内容
<span>今日价格</span> :一行上可以多个<span>。小盒子

图像标签和路径(重点)
1、图像标签
在HTML标签中,<img>标签用于定义HTML页面中的图像。
alt(图片显示不出来的时候 显示在图片上 图片裂开);
title(鼠标放到图片上,提示的文字);
width height border(设置图像边框的粗细)

<img src=”图像URL“/>

图像标签注意点
1、图像标签可以拥有多个属性,必须写在标签名的后面。
2、属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
3、属性采取键值对的格式,即key=”value”的格式,属性=”属性值“。

下一级 / 上一级../
相对路径是从代码所在的这个文件出发,去寻找目标文件的,而我们这里所说的上一级、下一级和同一级就是图片相对于HTML页面的位置
绝对路径是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。

链接的语法格式 <a></a>
必须属性:href

链接分类:target为窗口打开方式

1.外部链接(必须以http:// 开头)_self为默认值 _blank为在新窗口中打开方式。
2.内部链接
3.空链接
4.下载链接:
5.网页元素的链接(即把中间的文字换成一个图片的格式)
6.锚点链接(点击链接,可以快速定位到页面中的某个位置)
成果展示:一点击就到了

注释
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。
HTML中的注释以<!-- 开头,以--> 结束

Ctrl + / 能够快速的添加注释

注意:注释标签是给程序员看的,这个代码不执行不显示到页面中的

特殊字符

1.表格标签
1.1表格的主要作用
表格主要用于显示、展示数据
1.2表格的基本语法

1.<table></table>用于定义表格的标签
2.<tr></tr>标签用于定义表格中的行,必须嵌套在<table></table>标签中
3.<td></td>用于定义表格中的单元格,必须嵌套在<tr></tr>标签中
4.字母td指表格数据,即数据单元格的内容

1.3表头单元格标签
一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示。

标签表示HTML表格的表头部分(table head)的缩写

1.4表格属性
表格标签这部分属性我们实际开发我们不常用,后面通过CSS来设置
这些属性要写到表格标签table里面去
例如:

1.5表格结构标签
在表格标签中,分别用:<thead>标签表格的头部区域、<tbody>标签表格的主体区域.

1.6合并单元格
合并单元格方式:

跨行合并:rowspan=“合并单元格的个数”
跨列合并:colspan=“合并单元格的个数”

目标单元格:(写合并代码)
跨行:最上侧单元格为目标单元格,写合并代码
跨列:最左侧单元格为目标单元格。写合并代码

合并单元格三部曲:

-》

1.7表格总结
1.表格的相关标签
我们学习了
table标签 tr行标签 td单元格标签 th表头单元格标签thead表格头部区域标签 tbody表格主体区域标签
合并单元格标签

2.列表标签
表格是用来显示数据的,那么列表就是用来布局的。
列表最大的特点就是整齐、整洁、有序,它作为布局会更加自由和方便
列表分为三大类:无序列表、有序列表、自定义列表。
2.1无序列表(重点)

  • 标签表示HTML页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用
  • 标签定义。 无序列表的语法格式如下:

2.2有序列表
在HTML标签中,<ol>标签用于定义有序列表,列表排序以数字来显示,并且使用<li>标签来定义列表项。
有序列表的基本语法格式如下:

3.3自定义列表
自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。

在HTML标签中,<dl>标签用于定义描述列表,该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用。
基本语法:

2.4列表总结

3.表单标签

3.2表单的组成
在HTML中,一个完整的表单通常由表单域、表单控件(也称为表单元素)和提示信息3个部分构成。

3.3表单域
表单域是一个包含表单元素的区域
在HTML标签中,<form>标签用于定义表单域,以实现用户信息的收集和传递。
<form>会把它范围内的表单元素信息提交给服务器

3.4表单控件(表单元素)
在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单输入或者选择的内容控件。

1.input输入表单元素
2.select下拉表单元素
3.textarea文本域元素

3.4.1 input
<input>标签用于收集用户信息。
<input>标签中,包含一个type属性,根据不同的type属性值,输入字段拥有很多种形式

<input/>标签为单标签
type属性设置不同的属性值用来指定不同的控件类型
type属性的属性值及其描述如下:

例:
password:密码 (输入会隐藏)
radio:单选按钮
checkbox:复选框 实现多选效果
复选name属性和单选按钮一样,需要做到几个的名字一致
submit:提交
reset:重置
button:普通按钮
file:上传文件
input的属性
value:
checked:单选按钮和复选框可以设置checked属性,当页面打开的时候就可以默认选中这个按钮checked=”checked”
maxlength:输入字段输入的最大长度
name:

注意:
1.name和value是每个表单元素都有的属性值,主要给后台人员使用。
2.name表单元素的名字,要求单选按钮和复选框要有相同的name值。
3.checked属性主要针对于单选按钮和复选框,主要作用一打 开页面,就可以默认选中某个表单元素

3.4.2<label>标签
<label>标签为input元素定义标注(标签)
<label>标签用于绑定一个表单元素,当点击<label>标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验

语法:

核心:
<label>标签的for属性应当与相关元素的id属性相同

3.4.3<select>表单元素
使用场景:在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使 用<select>标签控件定义下拉列表。
语法:

注意:

<select>中至少包含一对<option>
<option>中定义selected=”selected时,当前项即为默认选中项”

3.4.4<textarea>表单元素
使用场景:当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用<textarea>标签。在表单元素中,<textarea>标签是用于定义多行文本输入的控件。
使用多行文本输入控件,可以输入更多的文本,该控件常见于留言板,评论。
语法:

1.通过<textarea>标签可以轻松地创建多行文本输入框。
2.cols=“每行中的字符数”,rows=“显示的行数”,我们实际开发中不会使用,都是使用css来改变大小

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

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

相关文章

springboot项目单纯使用nacos注册中心功能

Spring Boot 项目完全可以单独使用 Nacos 作为注册中心。Nacos 是一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台。它支持服务的注册与发现&#xff0c;能够与 Spring Boot 应用无缝集成&#xff0c;为微服务架构提供了强大的支持。 在使用 Nacos 作为注册中…

Python实现DMI工具判断信号:股票技术分析的工具系列(3)

Python实现DMI工具判断信号&#xff1a;股票技术分析的工具系列&#xff08;3&#xff09; 介绍算法解释 代码rolling函数介绍完整代码 介绍 先看看官方介绍&#xff1a; DMI (趋向指标&#xff09; 用法 1.PDI线从下向上突破MDI线&#xff0c;显示有新多头进场&#xff0c;为…

系统架构29 - 架构风格补充(下)

面向服务架构风格 关键目标关键技术实现方式WEB Service服务注册表企业服务总线ESB特点&#xff1a; SOA是一种 粗粒度、松耦合服务架构&#xff0c;服务之间通过简单、精确定义接口进行通信&#xff0c;不涉及底层编程接口和通信模型。 在SOA中&#xff0c; 服务是一种为了满…

BUUCTF---[BJDCTF2020]藏藏藏1

1.题目描述 2.下载附件&#xff0c;解压之后是一张图片和一个文本 3.把图片放在winhex,发现图片里面包含压缩包 4.在kali中使用binwalk查看&#xff0c;然后使用foremost分离&#xff0c;在使用tree查看分离出来的文件&#xff0c;最后将zip文件使用unzip进行解压。步骤如下 5.…

pdf编辑软件哪个好用?5款PDF编辑器分享

pdf编辑软件哪个好用&#xff1f;PDF编辑软件在现代办公和学术研究中发挥着举足轻重的作用&#xff0c;它们不仅具备基础的编辑和修改功能&#xff0c;还能够支持多种注释工具&#xff0c;帮助我们高效地管理和整理PDF文件。无论是需要调整文档布局、添加文本或图像&#xff0c…

RocketMQ - 从RocketMQ全链路分析一下为什么用户支付后没收到红包?

1. 订单系统推送消息到MQ的过程会丢失消息吗? 订单系统在接收到订单支付成功的通知之后,必然会去推送一条订单支付成功的消息到MQ,那么在这个过程中,会出现丢失消息的问题吗? 答案是可能会丢失的,比如订单系统在推送消息到RocketMQ的过程中,是通过网络去进行传输的,但…

C++ 前缀和

目录 例1 例2 例3 例4 例5 例6 例7 例8 例1 DP34 【模板】前缀和 分析&#xff1a;dp和arr的大小并不是固定的&#xff0c;就是有没有偏移量&#xff0c;这里的n是从1开始&#xff0c;不如直接放到下标1处&#xff0c;在最后的减法时&#xff0c;如果用第一个参考代码会…

MySQL - #1115 - Unknown character set: ‘utf8mb4‘

问题描述 #1115 - Unknown character set: utf8mb4 原因分析 因为在创建表的时候是有这个编码的&#xff0c;但是在单独修改某个字段的编码时发现报错&#xff0c;虽然觉得莫名其妙&#xff0c;那就将机就计&#xff0c;改成大概率有的编码——UTF8&#xff0c;因为这边为的是…

rtt的io设备框架面向对象学习-touch设备

目录 1.触摸设备基类2.触摸设备基类的子类3.初始化/构造流程3.1设备驱动层3.2 设备驱动框架层3.3 io设备管理层 4.总结5.使用5.1实例 1.触摸设备基类 此层处于设备驱动框架层。此层的类是抽象类。 在/ components / drivers / include / drivers /touch.h定义了如下touch设备…

云计算 3月2号 (自配本地和远程yum源)

自建yum源 本地源 一、使用本地的镜像文件来制作yum源(做完记得删除) 1、挂载dvd镜像或将镜像拷贝到机器中 mkdir /yum-repo mount /dev/cdrom /yum-repo # 如果我们在设置中挂载了镜像使用这个方法 mount 镜像的路径 /yum-repo # 如果我们拷贝镜像到了系统中&#xff0c;可…

flink on yarn paimon

目录 概述实践paimon 结束 概述 ogg kafka paimon 实践 前置准备请看如下文章 文章链接hadoop一主三从安装链接spark on yarn链接flink的yarn-session环境链接 paimon 目标: 1.同步表2.能过 kafka 向 paimon写入 SET parallelism.default 2; set table.exec.sink.not-n…

Ai学社致力于Ai视觉设计和AI绘画

Ai学社来啦&#xff01;致力于短时间搞定Ai视觉设计、AI绘画。 遍知首席Ai讲师&#xff0c;教大家如何利用Ai迅速提升工作效率&#xff0c;升职加xin&#xff01;目前申请对ai感兴趣的均可以参加&#xff01;免费报名。 招生人数&#xff1a;本批次至少招募100名。招生时间&…

C++ Date类型定义 (类的简单实践案例)

//头文件#include<iostream> #include<assert.h> using namespace std;class Date { public:// 获取某年某月的天数int GetMonthDay(int year, int month);// 全缺省的构造函数Date(int year 1900, int month 1, int day 1);// 拷贝构造函数// d2(d1)Date(const…

LeetCode-02

225. 用队列实现栈 用两个队列实现栈的功能&#xff0c;思路如下&#xff1a; 往空队列中放新元素把非空队列中的元素依次放入刚才添加了新元素的队列&#xff0c;直到非空队列变为空队列 class MyStack(object):def __init__(self):self.queue1 []self.queue2 []def push(…

【教程】Kotlin语言学习笔记(四)——方法(持续更新)

写在前面&#xff1a; 如果文章对你有帮助&#xff0c;记得点赞关注加收藏一波&#xff0c;利于以后需要的时候复习&#xff0c;多谢支持&#xff01; 【Kotlin语言学习】系列文章 第一章 《认识Kotlin》 第二章 《数据类型》 第三章 《数据容器》 第四章 《方法》 文章目录 【…

突发,Anthropic推出突破性Claude 3系列模型,性能超越GPT-4

&#x1f989; AI新闻 &#x1f680; 突发&#xff0c;Anthropic推出突破性Claude 3系列模型 摘要&#xff1a;人工智能创业公司Anthropic宣布推出其Claude 3系列大型语言模型&#xff0c;该系列包括Claude 3 Haiku、Claude 3 Sonnet和Claude 3 Opus三个子模型&#xff0c;旨…

Cesium 自定义Primitive-绘制圆

一、创作来源 1、cesium的entity绘制圆 2、不使用entity的情况下&#xff0c;使用自定义的primitive来动态绘制圆 3、结合上一篇文章的圆&#xff0c;执行动态圆的更新 二、编写步骤 1、创建绘制线的类 包括构造函数、绘图函数以及销毁函数 import { Viewer, ScreenSpaceEven…

docker-compose启动postgres数据库,实现主从备份

文章目录 1. 主库2. 从库3. 测试 1. 主库 创建pg-m 目录&#xff0c;并进入该目录创建docker-compose.yml文件&#xff0c;内容如下&#xff1a; version: "3.1" services:pg_master:image: postgres:15.3container_name: pg_masterenvironment:POSTGRES_PASSWORD:…

Domain Adaptation Vs. Prompt-Tuning:能否用域自适应解决大模型提示学习问题?

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入&#xff01; 作者简介 李江梦&#xff0c;中国科学院软件研究所天基综合信息系统全国重点实验室助理研究员 论文简介 今天介绍的是被机器学习领域顶级学术会议ICLR 2024接收的论文&#xff1a;BayesPrompt: Prompting Large…

广东Lenovo SR588服务器维修升级硬盘内存

本案例描述了对联想SR588服务器进行硬件升级的过程&#xff0c;包括更换固态硬盘作为系统盘&#xff0c;以及增加内存容量至128GB。升级后&#xff0c;服务器性能得到显著提升&#xff0c;同时通过重新配置RAID阵列和操作系统的重新安装&#xff0c;确保了系统的稳定性和数据的…