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

2024-04-26 01:20

本文主要是介绍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: 我喜欢打开新界面跳转~

总结

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

这篇关于HtmlCss 基础总结(基础好了才是最能打的)一的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/936330

相关文章

从基础到高级详解Go语言中错误处理的实践指南

《从基础到高级详解Go语言中错误处理的实践指南》Go语言采用了一种独特而明确的错误处理哲学,与其他主流编程语言形成鲜明对比,本文将为大家详细介绍Go语言中错误处理详细方法,希望对大家有所帮助... 目录1 Go 错误处理哲学与核心机制1.1 错误接口设计1.2 错误与异常的区别2 错误创建与检查2.1 基础

vite搭建vue3项目的搭建步骤

《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1.确保Nodejs环境2.使用vite-cli工具3.进入项目安装依赖1.确保Nodejs环境

Nginx搭建前端本地预览环境的完整步骤教学

《Nginx搭建前端本地预览环境的完整步骤教学》这篇文章主要为大家详细介绍了Nginx搭建前端本地预览环境的完整步骤教学,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录项目目录结构核心配置文件:nginx.conf脚本化操作:nginx.shnpm 脚本集成总结:对前端的意义很多

Python版本与package版本兼容性检查方法总结

《Python版本与package版本兼容性检查方法总结》:本文主要介绍Python版本与package版本兼容性检查方法的相关资料,文中提供四种检查方法,分别是pip查询、conda管理、PyP... 目录引言为什么会出现兼容性问题方法一:用 pip 官方命令查询可用版本方法二:conda 管理包环境方法

前端缓存策略的自解方案全解析

《前端缓存策略的自解方案全解析》缓存从来都是前端的一个痛点,很多前端搞不清楚缓存到底是何物,:本文主要介绍前端缓存的自解方案,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录一、为什么“清缓存”成了技术圈的梗二、先给缓存“把个脉”:浏览器到底缓存了谁?三、设计思路:把“发版”做成“自愈”四、代码

通过React实现页面的无限滚动效果

《通过React实现页面的无限滚动效果》今天我们来聊聊无限滚动这个现代Web开发中不可或缺的技术,无论你是刷微博、逛知乎还是看脚本,无限滚动都已经渗透到我们日常的浏览体验中,那么,如何优雅地实现它呢?... 目录1. 早期的解决方案2. 交叉观察者:IntersectionObserver2.1 Inter

Vue3视频播放组件 vue3-video-play使用方式

《Vue3视频播放组件vue3-video-play使用方式》vue3-video-play是Vue3的视频播放组件,基于原生video标签开发,支持MP4和HLS流,提供全局/局部引入方式,可监听... 目录一、安装二、全局引入三、局部引入四、基本使用五、事件监听六、播放 HLS 流七、更多功能总结在 v

pycharm跑python项目易出错的问题总结

《pycharm跑python项目易出错的问题总结》:本文主要介绍pycharm跑python项目易出错问题的相关资料,当你在PyCharm中运行Python程序时遇到报错,可以按照以下步骤进行排... 1. 一定不要在pycharm终端里面创建环境安装别人的项目子模块等,有可能出现的问题就是你不报错都安装

Spring的基础事务注解@Transactional作用解读

《Spring的基础事务注解@Transactional作用解读》文章介绍了Spring框架中的事务管理,核心注解@Transactional用于声明事务,支持传播机制、隔离级别等配置,结合@Tran... 目录一、事务管理基础1.1 Spring事务的核心注解1.2 注解属性详解1.3 实现原理二、事务事

JS纯前端实现浏览器语音播报、朗读功能的完整代码

《JS纯前端实现浏览器语音播报、朗读功能的完整代码》在现代互联网的发展中,语音技术正逐渐成为改变用户体验的重要一环,下面:本文主要介绍JS纯前端实现浏览器语音播报、朗读功能的相关资料,文中通过代码... 目录一、朗读单条文本:① 语音自选参数,按钮控制语音:② 效果图:二、朗读多条文本:① 语音有默认值:②