web前端总结(一)HTML标签

news2024/9/20 22:32:04

1.语法结构:
<标签 属性 = “值”>内容</标签>

<p align = "center">标签内容</P>

2.标签

1.标题标签:

**标题标签 <h1> - <h6>(重要)**
为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML 提供了6个等级的网页标题,即<h1>-<h6> 。具体实现:      
<h1> 我是一级标题 </h1>
特点:
1.加了标题的文字会变的加粗,字号也会依次变大。
2.  <h1>标题一共六级选,</h1>   
3.  <h2>文字加粗一行显。</h2>   
4.  <h3>由大到小依次减,</h3> 
5.  <h4>从重到轻随之变。</h4> 
6.  <h5>语法规范书写后,</h5>  
7.  <h6>具体效果刷新见。</h

2段落标签:

在网页中,要把文字有条理地显示出来,就需要将这些文字分段显示。
在 HTML 标签中,<p>标签用于定义段落,它可以将整个网页分为若干个段落。
具体实现:    
 <p> 我是一个段落标签 </p>
 特点:   
  1. 文本在一个段落中会根据浏览器窗口的大小自动换行。    
  2. 段落和段落之间保有空隙。

3 换行标签,水平线标签:

在 HTML 中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,
然后才自动换行。如果希望某段文本强制换行显示,就需要使用换行标签 <br />。
具体实现:     
 <br />
 特点:    
 1. <br /> 是个单标签。    
 2. 2. <br /> 标签只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距

<hr />单个标签,是文字下方产生一条水平线

4 文本格式化标签:

在网页中,有时需要为文字设置粗体、斜体 或下划线等效果,
这时就需要用到 HTML 中的文本格式化标签,使文字以特殊的方式显示。

5.无语义标签

<div> 和 <span> 是没有语义的,它们就是一个盒子,用来装内容的。
具体实现:    
 <div> 今日头条</div>         
 <span> 今日价格 </span>
 特点:    
 1. <div> 标签用来布局,但是现在一行只能放一个<div>。 大盒子    
 2. <span> 标签用来布局,一行上可以多个 <span>。小盒子

6 图片标签:

在 HTML 标签中,<img> 标签用于定义 HTML 页面中的图像。
具体实现:     
 <img src="图像URL" />     --分清楚绝对路径和相对路径
 解释:    
 src 是<img>标签的必须属性,它用于指定图像文件的路径和文件名。    
 所谓属性:简单理解就是属于这个图像标签的特性。图像标签的其他属性:

7.视频标签:

<video src="">   </video>   这里的src与上面的图片标签的路径如出一辙
相关属性
    controls:控件
    autoplay:自动播放
    muted:静音播放
    poster:等待加载时的显示图片

8.音频标签


<audio src="./images/music.mp3" controls muted autoplay loop>  </audio>
相关属性:loop 循环播放   别的就不解释了上面视频标签都有
    

9.链接标签:

链接的语法格式   
 <a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
 属性:   
  1.href:用于指定链接目标的url地址   
  2.target:用于指定链接页面的打开方式_self默认值 _blank新窗口打开    
  3.#:空链接
  

锚链接也是其中一种用法

10.有序/无序列表,自定义列表:

    <ol>
        <li></li>
    </ol>
这个排列出来会自动标出序号,即有序列表
    <ul>
        <li></li>
    </ul>
这个则不会

自定义列表:<dl>
                <dt>
                    <dd></dd>
                </dt>
            </dl>

11.iframe框架:

 <iframe src="https://www.taobao.com" width="900px" height="600px"></iframe> 

链接标签练习:

 

 

 

 

 

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

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

相关文章

stm32_<一文通>_cubemx_freertos

文章目录 前言一、任务调度1.1 延时1.1.1 相对延时1.1.2 绝对延时 1.2 挂起和恢复1.2.1 cmsis的挂起和恢复函数1.2.2 freertos的挂起和恢复函数 1.3 删除1.3.1 cmsis的删除任务函数1.3.2 freertos的删除任务函数 二、Freertos任务与中断三、消息队列3.1 写入和读取一个数据3.2 …

6阶高清视频滤波驱动MS1681

MS1681 是一个单通道视频缓冲器&#xff0c;它内部集成6dB 增益的轨到轨输出驱动器和6 阶输出重建滤波器。MS1681 的-3dB 带宽为35MHz&#xff0c;压摆率为160V/us。MS1681 比无源LC 滤波器与外加驱动的解决方案能提供更好的图像质量。它单电源供电范围为2.5V 到5.5V&#xff0…

什么是提示词工程师?

前言 你可能听说过人工智能模型&#xff0c;但你是否知道&#xff0c;背后的神奇之处源自于那些执着于提示设计和优化的专业人员&#xff1f;提示词工程师是引导我们与机器对话的幕后英雄&#xff0c;他们通过精心构造的提示&#xff0c;让模型理解我们的意图、解答问题&#…

React + TypeScript 实践

主要内容包括准备知识、如何引入 React、函数式组件的声明方式、Hooks、useRef<T>、useEffect、useMemo<T> / useCallback<T>、自定义 Hooks、默认属性 defaultProps、Types or Interfaces、获取未导出的 Type、Props、常用 Props ts 类型、常用 React 属性类…

zabbix基础4——自定义监控案例

文章目录 一、监控进程二、监控日志三、监控mysql主从四、监控mysql延迟 一、监控进程 示例&#xff1a;监控客户端上的httpd服务进程&#xff0c;当进程书少于1时&#xff0c;说明服务已经挂掉&#xff0c;需要及时处理。 1.客户端开启自定义监控功能。 vim /usr/local/etc/…

YApi-高效、易用、功能强大的可视化接口管理平台——(一)使用 Docker 本地部署

Docker 本地部署 YApi 安装 Docker安装设置 USTC 镜像启动 Docker Docker 安装 MongoDBDocker 安装 YApi登录 YApi 本内容以虚拟机【系统&#xff1a;Centos7】为例&#xff0c;云服务器步骤相同。使用Docker 的方式搭建 YApi&#xff0c;拉取 MongoDB 镜像和 YApi 镜像即可。 …

SpringBoot学习——追根溯源servlet是啥,tomcat是啥,maven是啥 springBoot项目初步,maven构建,打包 测试

目录 引出追根溯源&#xff0c;过渡衔接servlet是啥&#xff1f;tomcat是啥&#xff1f; 前后端开发的模式1.开发模式&#xff1a;JavaWeb&#xff1a;MVC模型2.Web&#xff1a;Vue&#xff0c;MVVC模型3.后端相关3.1 同步与异步3.2 Controller层3.3 Service层&#xff1a;要加…

【C语言基础】函数(2)

在函数&#xff08;1&#xff09;中我们已经讲过了函数的定义&#xff0c;形参与实参&#xff0c;函数的调用&#xff0c;局部变量与栈内存 接下来还有几个要强调的函数相关知识。 一、静态函数 静态函数是在函数声明前加上关键字 static 的函数。静态函数在C语言中具有以…

让计算机讲话

std ::cout是什么&#xff1f; 首先 std是命名空间后面会讲。STD&#xff08;standard标准&#xff09; cout和printf就呢让计算机说话 最早的使用打印机&#xff0c; std::cout相当于调用了一个特殊的函数。 后面需要加<<隔开。 知道最基本的知识就OK了 c的风格 函数…

API接口在软件开发中扮演着重要的角色

随着互联网的快速发展&#xff0c;API&#xff08;Application Programming Interface&#xff09;接口在软件开发中扮演着重要的角色。调试API接口是确保系统正常运行的关键步骤之一。本文将介绍如何选择适合的方法进行API接口调试&#xff0c;以确保开发过程的高效进行和应用…

20.光敏传感器

1.光敏传感器介绍&#xff1a; 光敏二极管(光敏电阻),作为光敏传感器&#xff1b;光敏二极管也称光电二极管&#xff1b;光敏二极管与半导体二极管在结构上类似&#xff0c;其管芯是一个具有光敏特征的PN结&#xff0c;具有单向导电性&#xff0c;因此工作时需要加上反向电压。…

【ECharts系列】ECharts 鼠标悬停线格式化

问题描述&#xff1a; 折线图有很多数据&#xff0c;鼠标悬停时&#xff0c;针对X轴&#xff0c;Y轴数据进行格式化&#xff0c;例如X的时间戳&#xff0c;格式化为时分秒&#xff0c;Y轴保留两位小时 希望效果图&#xff1a; 方案1&#xff1a; 在这个示例中&#xff0c;X轴依…

指针进阶(二)

目录 函数指针数组 指向函数指针数组的指针 回调函数 回调函数模拟实现qsort&#xff08;快速排序&#xff09; 整型数组的排序 结构题排序 按年龄排序 按名字排序 模拟实现qsort函数&#xff08;冒泡排序&#xff09; 函数指针数组 数组是一个存放相同类型数据的存储空…

【Linux】gcc/g++的使用 自动化构建工具make/makefile的使用

一.gcc的使用 在学习C语言时&#xff0c;我们了解了预处理阶段要做的事&#xff1a;->预处理 这其中会经历两个阶段&#xff1a;编译和链接 而编译又分为三个阶段&#xff1a;预编译&#xff0c;编译&#xff0c;汇编 通过不同的选项&#xff0c;可以让gcc停在以上相应的阶段…

ArcGis Pro如何通过C#进行插件开发?

文章目录 0.引言1.开发工具准备2.VS&#xff08;C#&#xff09;创建ArcGIS Pro模块加载项3.编译并使用ArcGis Pro插件 0.引言 ArcGIS Pro插件&#xff08;Add-ins&#xff09;可以让用户更加容易的自定义和扩展ArcGIS Pro应用程序&#xff0c;它创建一系列自定义工具提供了一个…

ISO文件boot、dvd、minimal的区别

在centos的下载中&#xff0c;有分为boot、dvd、minimal的iso文件&#xff0c;那么他们之间有什么区别呢&#xff1f; boot.iso 这个版本大小不会超过1G ,只有最基本的启动引导等内容&#xff0c;各类包均需从线上下载&#xff0c;需要快速安装且有可靠网络的前提下&#xff0c…

linux中的数据库

目录 1.安装MySQL 2.创建数据库 3.删除数据库 4.查询创建数据库的语句 5使用数据库的语句 6.查询当前默认的数据库 7.查询使用的编码方式和校验规则 8.创建表的语句 9.表的物理存储结构 10.表的数据类型 11.总结 引言&#xff1a; 数据库是现代应用开发中不可或缺的组…

获取视频 RTMP 推流web播放

工作需要研究下市面上显示实时视频方案。这里介绍下RTMP协议。 需求获取USB摄像头&#xff0c;手机谁摄像头。显示到web网页上。 一、 采集摄像头 这个使用opencvSharp来采集&#xff1a; nuget: var task Task.Run(() >{var capture new VideoCapture(0);VideoCaptur…

PHP实战开发25-电商网站系统缓存设计方案系统讲述

文章目录 一、前言-缓存的作用1.1 提高性能1.2 减轻服务端压力1.3 减少网络流量1.4 改善用户体验1.5 支持离线访问1.6 降低数据传输成本 二、浏览器缓存2.1 强缓存2.2 协商缓存 三、CDN 缓存3.1 使用CDN缓存的好处3.1.1 加速网站加载时间3.1.2 节省服务器带宽3.1.3 提高可用性和…

快速计算多项式相乘系数 FFT快速傅里叶变换

快速计算多项式相乘系数 FFT快速傅里叶变换 快速傅里叶变换(FFT)——有史以来最巧妙的算法&#xff1f; 正常求两个多项式乘积 A ( x ) ∑ i 0 n A i x i , B ( x ) ∑ i 0 n B i x i C ( x ) ∑ i 0 n ∑ j 0 n A i B j x i j A(x)\sum_{i0}^{n}{A_ix^i},B(x)\sum_{…