HtmlCss 基础总结(基础好了才是最能打的)一

Html&Css 基础学习回顾总结

one day~


文章目录

  • Html&Css 基础学习回顾总结
  • 前言
  • 开始啦
      • Html 骨架
      • Html 基本标签
        • H1-H6标签
        • 段落标签
        • 换行标签
        • 水平线标签
        • 图像标签
        • 相对路径&绝对路径 和音频
        • 视频标签
        • 超链接标签
  • 总结


前言

作者在求学期间自学了前端界面相关的,算是有一些基础, 但是在工作中前端知识一直没有用武之地,导致前端的知识七零八落的不成体系,所以痛腚思痛,这篇专栏主要是回顾学习之前的知识,同时跟随B站黑马程序员的视频,边看边学
视频在这里~ @B站黑马程序员视频

视频共15天,作者会以天为粒度,来分散到不同文章中,有兴趣的小伙伴可以关注一下,谢谢你
书中错误在所难免,如果有小伙伴发现的话恳请斧正,在此先谢过咯~


开始啦

Html 骨架

    <html><head><title>这是网页的title</title></head><body></body></html>

其中,html是整体的,表达这是一个html;
head则是直译过来的头部;
title标题要放在head中;
再就是body, 正如直译的意思所说,这就是主体可以放很多东西;

Html 基本标签

H1-H6标签

H1-H6标签, H1 一般只用一次, 便于seo查找;
ps: 所以vue是没有h1这个标题,所以不好做seo的吗?

<h1>你好,我是h1</h1>
段落标签

独占一行,如果超出一行不会分割,直到结束后,下面再单独列一行;

通常跟 在一起,独占一行, dev也是独占一行
换行标签


是单独换一行
并且浏览器不识别代码中的回车键换行

水平线标签

水平线(横杠) 也同样是单标签;


#### 文本格式化标签 可以给文字添加特殊标签: 例如,加粗,倾斜,下划线,删除线等
<strong> 加粗</strong>
<em>倾斜</em>
<ins>下划线</ins>
<del>删除线</del>
图像标签

是但标签, 一行显示,
其中src=“xxx.img” src是img的必须属性, 用于指定图像的位置,
且给予属性的时候, src是不加引号的,只有值才给引号
例如:

<img src="../images/a.img">

还有其他的属性, 例如:
out 属性, 用于替换图片时无法显示的文本;
alt属性, 用于替换网速慢导致图片无法加载时, 使用alt替换的文字;
title 属性, 用于提示文本, 鼠标悬停时图片上显示;

<img src="../images/a.img" out="你好" alt ="hello" title ="这是个图片">

相信你已经看到了,属性都是写在尖括号里面,标签的属性之间以空格分割的, 单引号双引号都可以,取决于你的选择和外部的单双引号~

小tips:浏览器缩放图片默认是等比例缩放;

相对路径&绝对路径 和音频

推荐: 本地主张使用相对路径
相对路径&绝对路径其实已经很清晰了,就不再展开讲了~

音频标签是双标签,即拥有开始&结束

<audio>我是一个音频标签</audio>

其中Src也是必须属性, 用于指定音频的来源,支持的有mp3等文件

<audio src="./audios/a.mp3">我是一个音频标签</audio>

其中还有几个属性也是一样的:
controls 属性,用于控制是否展示音频控制面板, 默认不显示;
又因为contorls的值就是controls,所以可以简写成 contrlos;
loop 属性, 用于控制是否自动播放, 因为值跟属性名是一样的,所以也可以简写;
autoplay 属性, 用于控制是否自动播放, 它的值也跟属性名一样,所以也可以简写;
但是一般会被禁用(你也不想一进网页就咔咔放音乐吧哥们)

<audio src="./audios/a.mp3" controls loop autoplay>我是一个音频标签</audio>
视频标签

视频标签也是双标签;

 <video src ="./videos/a.mp4"  controls loop autoplay></video>

视频&音频 有相同的属性, 但是视频播放的属性多一个muted

   <video  src="xx" controls loop autoplay muted></video>`

muted 属性, 用于控制是否静音播放,但是有一点要确定的是, 视频支持在静音状态下自动播放哦~

超链接标签

超链接标签也是双标签, 其中属性href 是必须属性,表示点击后跳转到具体地址
地址必须由http://开头~

 <a href="http://www.baidu.com" target="_self">自身跳转</a><a href="www.baidu.com" target="_blank">新开节目</a>

相信大家已经看到了,他们多出来一个属性叫做target;
target属性, 用于控制跳转界面时的形式, 值为_self时表示从当前界面跳转, 如果是_blank 时则是打开新界面跳转;
ps: 我喜欢打开新界面跳转~

总结

第一天的内容就止步于此了,希望大家都可以有所收获,明天见~

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

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

相关文章

【数据结构】图基本概念

在计算机科学中&#xff0c;图&#xff08;Graph&#xff09;是一种非常重要的数据结构&#xff0c;用于描述各种复杂的关系和网络。本文将介绍图的基本概念&#xff0c;并通过C语言代码演示如何实现基本的图结构和相关操作。 图的基本概念&#xff1a; 图由节点&#xff08;…

使用react-vant上传图片遇到的问题

使用react-vant Uploader上传图片后出现的问题。 先试用upload上传图片。 <Form.Itemrules{[{ required: true, message: 请上传头像 }]}label上传头像namefiles><Uploader accept* maxCount"1" onChange{imgFile} /></Form.Item> 图片上传成功后…

高频SQL 判断三角形

题目信息 表&#xff1a;Triangle ------------------- | Column Name | Type | ------------------- | x | int | | y | int | | z | int | ------------------- 在 SQL 中&#xff0c;(x, y, z)是该表的主键列。 该表的每一行包含三个线段…

Linux网络-DNS域名解析服务

目录 一.DNS相关介绍 1.DNS是什么 2.DNS系统的分布式数据结构 根域 顶级域 二级域 子域 主机 3.服务器类型 主域名服务器 从域名服务器 缓存域名服务器 转发域名服务器 二.DNS域名解析 1.DNS域名解析方式及功能 2.DNS域名解析查询方式 2.1.递归查询&#xff0…

OpenWRT设置自动获取IP,作为二级路由器

前言 上一期咱们讲了在OpenWRT设置PPPoE拨号的教程&#xff0c;在光猫桥接的模式下&#xff0c;OpenWRT如果不设置PPPoE拨号&#xff0c;就无法正常上网。 OpenWRT设置PPPoE拨号教程 但现在很多新装的宽带&#xff0c;宽带师傅为了方便都会把光猫设置为路由模式。如果你再外…

微软在汉诺威工业博览会上推出新制造业Copilot人工智能功能,强化Dynamics 365工具集

在近日于德国汉诺威举行的盛大工业博览会上&#xff0c;微软向全球展示了其最新推出的制造业人工智能功能&#xff0c;这些功能以Dynamics 365工具集为核心&#xff0c;旨在通过先进的AI技术为制造业带来前所未有的变革。 此次推出的新功能中&#xff0c;最为亮眼的是支持AI的…

数据可视化(四):Pandas技术的高级操作案例,豆瓣电影数据也能轻松分析!

Tips&#xff1a;"分享是快乐的源泉&#x1f4a7;&#xff0c;在我的博客里&#xff0c;不仅有知识的海洋&#x1f30a;&#xff0c;还有满满的正能量加持&#x1f4aa;&#xff0c;快来和我一起分享这份快乐吧&#x1f60a;&#xff01; 喜欢我的博客的话&#xff0c;记得…

Dubbo的核心功能及其在实际项目中的应用

Dubbo不仅简化了微服务架构的开发和部署&#xff0c;还提供了诸多核心功能&#xff0c;帮助开发团队提升服务治理的能力和系统的可扩展性。下面&#xff0c;我将详细介绍Dubbo的核心功能&#xff0c;并结合实际项目经验&#xff0c;举例说明这些功能是如何在项目中发挥作用的。…

Blueprints - 鼠标光标判断相关节点

一些以前的学习笔记归档&#xff1b; 俯视角场景中要用鼠标光标判断是否点中物体&#xff0c;或依靠光标引发各种事件&#xff1b; 这些逻辑一般编写在Controller中&#xff0c;Controller类本身就带有相关判断节点&#xff1a; 其中Get Hit Result Under Cursor by Channel是…

如何批量跟踪京东物流信息

随着电商行业的快速发展&#xff0c;快递业务日益繁忙&#xff0c;无论是商家还是消费者&#xff0c;都需要一种高效、便捷的快递查询工具。快递批量查询高手软件应运而生&#xff0c;以其强大的功能和便捷的操作体验&#xff0c;赢得了广大电商、微商精英们的青睐。 快递批量…

用Bash变量进行sed替换

问题&#xff1a; 我试图在一个 Bash 脚本中使用 sed 改变文本文件中的值&#xff1a; sed s/draw($old_num;n_)/draw($new_num;n_)/g file.txt > tmp这行代码将在 for 循环中。为什么它不起作用&#xff1f; 回答&#xff1a; 当使用 Bash 变量进行 sed 替换时&#xff…

Golang编译优化——公共子表达式消除

文章目录 一、概述二、公共子表达式消除2.1 初始划分等价值2.2 细分等价值2.2.1 给所有值标号2.2.2 根据参数细分等价值 2.3 替换重复表达式2.3 .1 按照支配性排序2.3 .2 进行替换操作 一、概述 公共子表达式消除&#xff08;Common Subexpression Elimination&#xff0c;CSE…

机器人视觉教学实训平台

一&#xff1a;功能概述 1.1、功能简介 机器人视觉教学实训平台基于睿尔曼机器人与海康机器视觉产品&#xff0c;面向机器人视觉系统应用而开发设计&#xff0c;产品涵盖机器人系统、工业视觉系统、自动化控制系统、计算机编程系统&#xff0c;可以在一台设备上进行多种与机器…

冷热不均?试试智慧供热二网平衡解决方案吧!

一、系统背景&#xff1a; 在城市供热系统中&#xff0c;目前普遍存在热力平衡调节困难、过量供热及供热不足并存、系统灵活性不足、管理粗放、智能化水平不高、无法根据实际天气变化及具体需求灵活调节等问题。供水管和回水管之间的温差过大&#xff0c;导致热能在循环过程中…

Confluence 快捷键大揭秘:提高效率的小窍门

使用 Confluence 快捷键的好处有&#xff1a; 1.提高工作效率&#xff1b; 2.更流畅地进行编辑、导航和管理操作&#xff1b; 3.减少误操作&#xff1b; 4.展现专业水平。 更多精彩内容&#xff1a; 成为 Jira 大师&#xff1a;效率达人的必备秘诀 Jira Cloud 项目管理专栏 PMO…

centos7.9下安装SVN服务

一、安装subversion yum install -y subversion #安装svn mkdir -p /data/svnrepos/java #自定义svn仓库位置/data/svnrepos&#xff0c;自定义一个项目叫svn&#xff08;这里新建目录&#xff09; svnadmin create /data/svnrepos/java #创建一…

Linux:进程创建 进程终止

Linux&#xff1a;进程创建 & 进程终止 进程创建fork写时拷贝 进程终止退出码strerrorerrno 异常信号exit 进程创建 fork fork函数可以用于在程序内部创建子进程&#xff0c;其包含在头文件<unistd.h>中&#xff0c;直接调用fork()就可以创建子进程了。 示例代码&…

个人博客系统的设计与实现

https://download.csdn.net/download/liuhaikang/89222885http://点击下载源码和论文 本 科 毕 业 设 计&#xff08;论文&#xff09; 题 目&#xff1a;个人博客系统的设计与实现 专题题目&#xff1a; 本 科 毕 业 设 计&#xff08;论文&#xff09;任 务 书 题 …

算法-动态规划专题

文章目录 前言 : 动态规划简述1 . 斐波那契模型1.1 泰波那契数列1.2 最小花费爬楼梯1.3 解码方法 前言 : 动态规划简述 动态规划在当前我们的理解下,其实就是一种变相的递归,我们查看一些资料也可以知道,动态规划其实属于递归的一个分支,通过把递归问题开辟的栈帧通过一定的手…

1002 - 编程求解1+2+3+...+n

题目描述 编程求解下列式子的值&#xff1a; S123 \dots nS123⋯n。 输入 输入一行&#xff0c;只有一个整数 n(1 \le n \le 1000)n(1≤n≤1000) 。 输出 输出只有一行&#xff08;这意味着末尾有一个回车符号&#xff09;&#xff0c;包括 11 个整数。 样例 输入 100 …