Html&Css 基础总结(基础好了才是最能打的)一

HTML&CSS案例---咖啡店 HTML&CSS案例—咖啡店 最终页面效果 页面结构为:最上面header是一个头部,主要是一张图片;下面的nav是一个导航栏,包含五个链接;下面是主体部分,左侧的上面是一个表格,下面是四张图片,当鼠标放到图片上会有一个放大的效果,右侧有4个div是四种咖啡的详细介绍;最下面有一个脚本。具体代码如下; HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l 阅读详情

Html&Css 基础学习回顾总结

one day~



前言

作者在求学期间自学了前端界面相关的,算是有一些基础, 但是在工作中前端知识一直没有用武之地,导致前端的知识七零八落的不成体系,所以痛腚思痛,这篇专栏主要是回顾学习之前的知识,同时跟随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: 我喜欢打开新界面跳转~

总结

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

[前端][基础]HTML&CSS 1,HTML1.1 介绍HTML 是一门语言,所有的网页都是用HTML 这门语言编写出来的,也就是HTML是用来写网页的等网站有很多网页。这些都是网页展示出来的效果。而HTML也有专业的解释==HTML(HyperText Markup Language):超文本标记语言:==超文本:超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频等内容如上图看到的页面,我们除了能看到一些文字,同时也有大量的图片展示;有些网页也有视频,音频等。这种展示效果超越了文本展示的限制。 阅读详情

相关推荐

HTML&CSS实验(5)

HTML&CSS实验(5):学习颜色、字体、文本格式化和盒模型的样式定义

Pseudo_Programmer 7372

Html&Css 基础总结(基础好了才是最能打的)四

本篇文章主要讲述CSS的复合选择器、特性、背景属性和显示模式

无方少年游 979

深入学习HTML&CSS:配套源代码详解

本文还有配套的精品资源,点击获取 简介:本书《Head First HTML&CSS第二版配套源代码》专为初学者设计,通过图像和互动示例,以幽默语言教授HTML和CSS的基础与高级概念。源代码文件提供实践中学习的机会,包含所有示例代码,帮助理解HTML文档结构、CSS样式和布局控制,以及响应式设计等。这份学习资源旨在使初学者能够通过理论与实践相结合的方式,掌握网页设...

weixin_42462474的博客 791

Html&Css 基础总结(基础好了才是最能打的)二

我是item表头 我是item 我是item表头

无方少年游 1244

GD32F303串口DMA发送数据避坑指南:为什么你的发送函数会卡住?

本文深入解析GD32F303单片机串口DMA发送数据时常见的卡死问题,提供详细的避坑指南。从DMA传输完成中断时序、发送状态管理到双通道DMA的特别注意事项,全面剖析问题根源并给出解决方案,帮助开发者构建健壮的DMA发送机制。

weixin_27038245的博客 295

HCIA-Storage 存储工程师学习笔记——1. 存储技术趋势

文章目录1. 存储技术趋势1.1 数据、信息与数据存储1.2 存储技术的发展①存储架构的发展②存储介质的发展③ 接口协议的发展1.3 存储产品的发展趋势 华为HCIA-Storage认证地址:https://e.huawei.com/cn/talent/#/cert/roadmap 1. 存储技术趋势 1.1 数据、信息与数据存储 什么是数据? ​ 数据是对所有事物的数字表示。 数据的种类? 结构化数据 半结构化数据 非结构化数据 数据的处理周期 ​ 数据处理是人或机器对数据进行的重组或重新排序,

超级大洋葱的博客 2847

Html&Css 基础总结(基础好了才是最能打的)五-大结局

本篇文章主要讲述结构伪类选择器和盒子模型

无方少年游 1244

深入理解梅尔刻度、梅尔滤波器组和梅尔时频谱图

读取一段音频,使用短时傅里叶变换,得到普通的时频谱图,然后绘制梅尔滤波器组,值得注意的是,librosa的梅尔滤波器组函数还带有权重归一化功能,即对一个三角形滤波器的每个权重,都除以该三角形的面积,如果不希望进行该归一化,设置参数。从公式可见,对数部分可以以自然对数为底数,也可以以10为底数,不同的底数对应不同的系数,要确定当前的系数,只需要代入(1000Hz, 1000mel)即可。其中,m是当前滤波器的序号,表征了当前的时间段,k是当前频率的序号,表征了当前正在对哪一频率的。

DEDSEC_Roger的博客 1万+

Html&Css 基础总结(基础好了才是最能打的)三

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

无方少年游 512

PDN设计

作者:AirCity 2020.2.6 Aircity007@sina.com 本文所有权归作者Aircity所有 PDN设计的目的是降低电源纹波水平,减小电压跌落。我们通常要求LDO的文波水平是30mV,DCDC是50mV,超过这个就需要PDN设计。 PDN设计的方法是用不同的容值,合适的总电容量,降低电源平面与地平面之间的交流阻抗,确定容值总量和电容大小的过程,就是PDN设计过程。 为什么需...

AirCity123的博客 4147

从零到一:uniPush2.0全链路集成与多厂商通道配置实战

本文提供了uniPush2.0从零开始的全链路集成与多厂商通道配置实战指南。详细讲解了DCloud平台配置、uniCloud云函数开发、客户端CID获取与消息监听,并重点攻克了华为、小米、OPPO、vivo等主流厂商推送通道的配置难点与避坑技巧,帮助UniApp开发者实现“一次集成,全端覆盖”的高效消息推送方案。

onion的博客 433

java前端基础--HTML&CSS、JavaScript、Vue、Ajax

java前端基础--HTML&CSS、JavaScript、Vue、Ajax

PluMage11的博客 1995

14自由度汽车动力学模型

多体系统分解簧上质量刚体:包含车身主体,具有6个自由度(x/y/z平移 + 俯仰/侧倾/横摆旋转)四个簧下质量刚体:每个车轮独立建模,含垂直跳动(z向)和旋转(绕z轴)自由度总自由度:6(车身) + 4×2(车轮) = 14自由度。

chao189844的博客 1197

html&css基础

/

antyuki的博客 866

【项目实战】小智AI MCP协议在IoT设备控制中的深度应用解析

本文深度解析小智AI MCP协议在IoT设备控制中的应用实践。通过MCP协议作为AI与物联网设备的翻译桥梁,实现大语言模型与ESP32等硬件的无缝通信。文章详细介绍了环境搭建、工具注册、消息路由机制,并以语音控制RGB灯光系统为例展示完整开发流程,为AIoT开发者提供实用指南。

oauth7security的博客 825

C++实现复制粘贴文本功能

要实现这个功能,我们需要使用操作系统提供的函数来操作剪贴板。在Windows操作系统中,我们可以使用Windows API函数来访问剪贴板。总结起来,使用C++实现复制和粘贴文本功能涉及使用操作系统提供的API函数来操作剪贴板。在本篇文章中,我将向您展示如何使用C++编程语言实现复制和粘贴文本的功能。我们将使用操作系统提供的API来进行剪贴板操作,并编写相应的代码来完成这个任务。如果您使用的是Linux操作系统,您需要使用适当的库和函数来访问剪贴板。函数中,我们首先将一个字符串复制到剪贴板中,然后使用。

PixelDyno的博客 1233

HTML&CSS基础

文章目录1.HTML常见标签1.1.font字体标签1.2.特殊字符1.3.标题标签1.4.超链接1.5.列表标签1.6.img标签1.7.表格标签1.8.表格跨行跨列1.9.iframe标签1.10.排版标签1.11.表单列表2.CSS2.1.基本语法规范2.2.引入方式2.3.CSS基础选择器2.4.CSS复合选择器2.5.font字体2.5.CSS外观属性 1.HTML常见标签 1.1.font字体标签 <body> <!-- 字体标签 需求 1:在网页上显示 我是字体标签 ,并修

song的博客 846

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

HTML&CSS基础(一)

1.结构:HTML:描述页面的结构 表现:CSS:控制页面中元素的样式 行为:JavaScript:响应用户的操作 2.①html根标签<html></html> 一个页面中有且仅有一个根标签,网页中的所有内容都应该写到根标签中。 ②head子标签<head></head> 设置网页标签头部信息,标签中的内容不会在网页中直接显示。帮助浏览器解析页面 ...

qq_43627109的博客 266

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

HTML&CSS基础+JavaScript进阶

HTML、CSS基础,JS进阶内容

hm342133194的博客 2130

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

一、HTML&CSS

HTML和CSS

LMY0210的博客 422

前端基础-HTML&CSS

前端基础

weixin_60387218的博客 1255

一,HTML&CSS

▲一个网页是由三部分组成,分别是: 结构:对应的是 HTML 语言 表现:对应的是 CSS 语言 行为:对应的是 JavaScript 语言 1.HTML 1)文件结构: ①文件类型说明: HTML文件中第一行的内容,用来告诉浏览器当前HTML文档的基本信息,其中最重要的就是当前HTML文档遵循的语法标准。 HTML5版本的文档类型声明是: <!DOCTYPE html> ②结构标签: ③注解: HTML注释的写法是: <!-- 注释内容 -->..

weixin_62226325的博客 255

Javaweb梳理16——HTML&CSS使用

video:定义视频。支持的音频格式:MP4, WebM、OGG。audio:定义音频。支持的音频格式:MP3、WAV、OGG。1.新建文本文件,后缀名改为 .html/.htm。5.保存后,使用浏览器打开该文件。2.编写 HTML结构标签。type:设置符号的类型。

haozihua的博客 1108

-1. HTML&CSS 基础总结

HTML&CSS 基础知识笔记总结

Holsen_bakery's Learning notes Blog 1742

有关HTML&CSS的基础知识(一)

1、 webkit(Safari)是苹果浏览器内核 2、html决定页面结构,css决定页面样式,js决定页面行为 3、双标签 :<标签名> 内容 </标签名> 单标签:<标签名 /> 4、水平线标签: <hr /> 有一个空格 5、<div> </div> 竖列显示 <span> &l...

qq_43194031的博客 334
上一篇: 【Android 字节码插桩】Gradle插件基础 & Transform API的使用
下一篇: Html&Css 基础总结(基础好了才是最能打的)二
@王永超
博客等级 码龄10年 186粉丝 88原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值