web前端总结(一)HTML标签

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.hqwc.cn/news/13732.html

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

相关文章

辅助性能优化——长安链性能分析工具原理及用法

如何提升区块链系统性能是很多开发者都会关注的事&#xff0c;但是有些对区块链并非十分熟悉的开发者可能会感到没有头绪。长安链提供了性能分析工具帮助开发者梳理系统耗时&#xff0c;优化系统性能。下面对长安链性能分析工具原理及使用进行介绍。 一、 概述 time_counter.s…

从视频源头到边缘智能:实现端到端AI解决方案的技术挑战与实践

从视频源头到边缘智能&#xff1a;实现端到端AI解决方案的技术挑战与实践 引言端到端AI解决方案打通视频源头采集视频传输和存储边缘计算和盒子设备 SDK示列 引言 随着人工智能技术的快速发展&#xff0c;端到端AI解决方案在各个领域的应用越来越广泛。这些解决方案能够实现从…

DAY41:贪心算法(十)监控二叉树

文章目录 968.监控二叉树思路遍历顺序空节点处理情况列举 最开始的写法debug测试&#xff1a;travelsal的输出多了1 修改版二叉树注意点时间复杂度总结 968.监控二叉树 给定一个二叉树&#xff0c;我们在树的节点上安装摄像头。 节点上的每个摄影头都可以监视其父对象、自身及…

Spark学习(二)---Spark运行架构和核心概念

1.Spark运行架构 Spark框架的核心是一个计算引擎&#xff0c;它采用了master-slave的结构。 图形中的 Driver 表示 master&#xff0c; 负责管理整个集群中的作业任务调度。图形中的 Executor 则是 slave&#xff0c;负责实际执行任务。 1.1 核心组件 由此可以得出&#xf…

在原有J-IM基础上改造,开发记录方便日后学习,主要区别加入mysql持久化,但是不完善、仅供参考

在原有J-IM基础上改造&#xff0c;开发记录方便日后学习&#xff0c;主要区别加入mysql持久化&#xff0c;但是不完善、仅供参考 原站地址 https://gitee.com/xchao/j-im 改造后的地址 https://gitee.com/lbx_1397372495/jim-chat 本地启动测试 1&#xff0c;修改mysql 数…

Openlayers鹰眼OverviewMap自定义样式时鹰眼大小调整

Openlayers鹰眼OverviewMap自定义样式时可以根据关注区域的范围长宽比调整鹰眼控件的宽、高大小&#xff0c;让关注的区域始终全部在鹰眼中显示。 如鹰眼控件宽设置100px时 /*鹰眼控件中地图容器的样式*/ .ol-custom-overviewmap .ol-overviewmap-map{border:none;width: 100p…

计算机毕业论文选题推荐|软件工程|小程序系列选题

文章目录 导文题目导文 计算机毕业论文选题推荐|软件工程 (***语言)==使用其他任何编程语言 例如:基于(***语言)门窗账务管理系统的设计与实现 得到:基于JAVA门窗账务管理系统的设计与实现 基于vue门窗账务管理系统的设计与实现 等等 题目 基于微信小程序和深度学习的宠物…

(css)盒子的阴影

(css)盒子的阴影 效果&#xff1a; 代码&#xff1a; box-shadow: inset 0 0 50px 2px #74eaff;解决参考&#xff1a;https://blog.csdn.net/weixin_52984349/article/details/125803515

界面组件DevExpress ASP.NET Core v23.1新版亮点 - 增强的数据可视化

DevExpress ASP.NET Core Controls使用强大的混合方法&#xff0c;结合现代企业Web开发工具所期望的所有功能。该套件通过ASP.NET Razor标记和服务器端ASP.NET Core Web API的生产力和简便性&#xff0c;提供客户端JavaScript的性能和灵活性。ThemeBuilder工具和集成的Material…

DAY40:贪心算法(九)单调递增的数字(贪心的思路)

文章目录 738.单调递增的数字&#xff08;暴力解也需要看一下&#xff09;暴力解写法注意&#xff1a;必须引入isIncreasing变量的原因 贪心思路遍历顺序 最开始的写法debug测试&#xff1a;逻辑错误 修改版debug测试int转化为字符串的原因to_string和stoi的用法 总结 738.单调…

MQTT资料储备

1、官网 https://mqtt.org/ MQTT 5.0官方协议 https://docs.oasis-open.org/mqtt/mqtt/v5.0/mqtt-v5.0.html 说明&#xff1a;官网可以获取到好多资料&#xff08;比如常用软件、协议、usecase等&#xff09; 2、安装部署EMQX 当前有好多MQTT服务器&#xff0c;初步选择了EM…

一键安装和卸载docker及docker-compose

代码&#xff1a; #!/bin/bashSYSTEMD_PATH/usr/lib/systemd/system/docker.service DOCKER_FILEdocker-20.10.23.tgz DOCKER_COMPOSE_FILEdocker-compose-plugin-2.15.1-3.el8.x86_64.rpm RED\E[1;31m GREEN\E[1;32m YELOW\E[1;33m SHAN\E[1;31;5m RES\E[0mfunction install_…