Html+css(第一天)

2023-10-27

基础认识


1.五大浏览器有哪些?
IE浏览器
火狐浏览器(Firefox)
谷歌浏览器(Chrome)
Safari浏览器
欧朋浏览器(Opera)

2.相同的网页在不同浏览器中显示效果会完全一致吗?
因为不同浏览器渲染引擎不同,解析的效果会存在差异

3.Web标准的构成
在这里插入图片描述4.HTML的骨架结构由哪些标签组成?
html标签:网页的整体
head标签:网页的头部
body标签:网页的身体
title标签:网页的标题

5.VSCode软件作为前端的主流开发工具,其基本的快捷键
快速生成标签:shift+tab
保存文件:ctrl+s(写完就要保存一下)
快速查看网页效果:F5
快速生成结构标签:!+回车
快速复制一整行:ctrl+c

6.注释
注释的快捷键:ctrl+/

7.HTML标签与标签之间的关系可分为:
父子关系(嵌套关系)

<head>
	<title></title>
</head>

兄弟关系(并列关系)

<head></head>
<title></title>

HTML标签


1.标签标签
场景:在新闻和文章的页面中,都离不开标签,用来突出显示文章主题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题标签</title>
</head>
<body>
    <!-- ctrl + D 选中前后两个标签,ALT+B快速在浏览器中展示,ctrl+s保存 -->
    <h1>一级标签</h1>
    <h2>二级标签</h2>
    <h3>二级标签</h3>
    <h4>二级标签</h4>
    <h5>二级标签</h5>
    <h6>二级标签</h6>
    
</body>
</html>

h1标签对网页尤为重要,开发中有特定的使用场景,如:新闻的标题、网页的logo部分

2.段落标签
场景:在新闻和文章的页面中,用于分段显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>段落标签</title>
</head>
<body>
    <h1>这是段落标签</h1>
    <hr>
    <!-- 这是分割线标签 -->
    <p>阿卡贝拉</p>
    <p>“翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱,包括重新填词,编曲。现在已有不少明星,都在翻唱他人的歌,不断在翻唱中突破自己,给大家带来不一样的风格。视频示例: 有一种悲伤(翻唱)-《A Kind of Sorrow》</p>
</body>
</html>

段落之间存在间隙,独占一行

3.换行标签
场景:让文字强制换行显示

<!--自闭合标签只有一个-->
<br>

4.水平线标签
场景:分割不同主题内容的水平线

<!--单标签 在页面中显示一条水平线-->
<hr>

5.文本格式化标签
场景:需要让文字加粗、下划线、倾斜、删除线等效果
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本格式化标签</title>
</head>
<body>
    <b>加粗</b>
    <strong>加粗</strong>
    <ins>下划线</ins>
    <i>倾斜</i>
    <em>倾斜</em>
    <s>删除线</s>
    <del>删除线</del>


</body>
</html>

6.图片标签
场景:在网页中显示图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片标签</title>
</head>
<body>
    <!-- alt :替换文本,当图片不显示的时候显示的文字 -->
    <!-- width和height属性只需要给出一个值,另一个等比例缩放 --好处就是图片不变形 -->
    <img src="cat.gif" alt="这是一个小猫" title="这是title文字,鼠标悬停的时候显示" width="200"  >
</body>
</html>

图片常见的属性?
src:指定需要展示图片的路径
alt:替换文本,当图片加载失败时,才显示的文字
title:提示文本,当鼠标悬停时,才显示的文字
width:图片的宽度
height:图片的高度

7.音频标签
场景:在页面中插入音频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音频标签</title>
</head>
<body>
    <!-- 音频控制,自动播放,循环 -->
    <!-- src:音频的路径 controls:显示播放的控件 autoplay:自动播放(部分浏览器不支持) loop:循环播放 -->
    <audio src="music.mp3" controls autoplay loop></audio>

</body>
</html>

注意:音频标签目前支持三种格式:MP3 ,Wav ,Ogg

8.视频标签
场景:在页面中插入视频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频标签</title>
</head>
<body>
    <!-- 谷歌浏览器可以让视频自动播放,但是必须是静音状态muted -->
    <!--controls:显示播放的控件 autoplay:自动播放(谷歌浏览器中需配合muted实现静音播放 loop:循环播放)-->
    <!--视频标签目前支持三种格式:MP4,WebM,Ogg-->
    <video src="video.mp4" controls autoplay muted loop></video>
</body>
</html>

9.链接标签
场景:点击之后,从一个页面跳转到另一个页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接标签</title>
</head>
<body>
    
    <!-- href:跳转地址 _blank是打开新的网页   -->
    <a href="https://www.baidu.com" target="_blank">跳转到百度</a>

    <br>

    <a href="./01-标题标签.html">点我,就是01-标题标签</a>

    <!-- 当开发网站初期,我们还不知道跳转地址的时候,href的值书写#(空链接) -->

    <br>
    <a href="#">空链接,不知道跳转到哪里的时候就写#</a>


</body>
</html>

链接标签的target属性:
在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Html+css(第一天) 的相关文章

  • 【H5】 svg内text、image、path标签的使用

    H5 svg内text image path标签的使用 text标签 div style width 500px height 500px border 2px solid pink margin 50px auto 0 div
  • WebGL 实践篇(五)三维图形的绘制及矩阵变换、正射投影

    一 三维 F 的绘制 1 着色器 按照上一篇提到的矩阵变换 我们可以直接在顶点着色器中加入相应的矩阵变换 这样就可以简化着色器代码 通过变量传入矩阵的值也便于之后矩阵变换的修改 三维图形的绘制相比于二维图形只在参数类型上有一些变化 注意ve
  • HTML5编程简介及示例代码

    HTML5是一种用于构建网页和Web应用程序的标准 它引入了许多新的元素 属性和API 为开发者提供了更多的功能和灵活性 在本文中 我们将探讨HTML5编程的一些不同方面 并提供相应的示例代码 标题 Headings HTML5引入了新的标
  • innerHTML与XSS攻击

    HTML5为所有元素提供了一个innerHTML属性 既能获取对象的内容又能向对象插入内容 属性值 HTML标签 文本 浏览器会将属性值解析为相应的DOM树 HTML解析器在浏览器中是底层代码比JavaScript方法快很多 同时意味着替换
  • SSD目标检测流程深入理解

    前言 SSD是经典的一阶目标检测网络框架 特点是速度快 网络简洁 主要思想 1 数据增强 包括光学变换和几何变换 2 网络骨架 SSD在VGG基础上延伸了4个卷积模块 生成不同尺度的特征图 3 PriorBox与多层特征图 在不同尺度设置预
  • 【H5】 svg动画 旋转属性与虚线属性

    svg 动画 旋转 transform rotate angle x y 不要写在style里面 angle 旋转角度 x y旋转中心 绘制虚线 stroke dasharray a b a b c d 旋转属性 transform rot
  • html5自带属性验证表单必填

    html5自带属性验证表单必填 2014年02月25日 Html5 共 366字 字号 小 中 大 6条评论 阅读 6 515 次 为了防止恶意注册 通常会验证表单必填 实现方法以js为主 略微麻烦 今天才发现 html5如今已自带验证表单
  • CSS 浏览器缩小之后页面错乱 块不见问题

    问题1 浏览器正常100 显示的时候 今日推荐是看得见的 浏览器缩小 小于100 之后 今日推荐被挤不见了 今日推荐块的DIV的CSS原配置是 today recommend py container width 1200px margin
  • 前端移动Web第四天案例:阿里百秀首页-响应式布局(bootstrap框架)

    阿里百秀首页案例 技术选型 方案 我们采取响应式页面开发方案 技术 bootstrap框架 设计图 本设计图采用 1280px 设计尺寸 1 页面布局分析 2 屏幕划分分析 屏幕缩放发现 中屏幕 和 大屏幕布局 是一致的 因此我们列 定义为
  • Saas-Export项目之部门数据回显(下拉框和单选框回显)

    Saas Export项目之部门数据回显 之前的经验 做数据回显一般就是在数据修改时需要查询出这条信息 然后再将数据拆分每一项逐一赋值在表单上 通常赋值就行 而且都是input type text这种类型的 所有只要在input里增加val
  • EduCoder_web实训作业--文本层次语义元素

    第一关 A D B B 第二关 strong 重要通知 strong
  • HTML学习

    HTML 我的第一个网页 基本标签 图片标签 链接标签 列表 表格 媒体元素 页面结构分析 iframe内联框架 表单 我的第一个网页
  • html文本元素

    文章目录 h p span pre code 实体字符 strong i em del s h h head 标题 一共有六级标题 hKaTeX parse error Expected got EOF at end of input 6
  • HTML 5 标签、属性、事件及浏览器兼容性速查表

    HTML 5 可以说是近十年来 Web 标准最巨大的飞跃 和以前的版本不同 HTML 5 并非仅仅用来表示 Web 内容 它的使命是将 Web 带入一个成熟的应用平台 在这个平台上 视频 音频 图象 动画 以及同电脑的交互都被标准化 尽管
  • HTML头部

    目录 实例 HTML 元素 HTML
  • 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载 HTML5期末大作业 (1)

    HTML5期末大作业 动漫电影主题 电影动漫言叶之庭 4页 带音乐 HTML CSS JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 大学生毕设网页设计源码HTML 1 临近期末 你还在为H
  • BugkuCTF-WEB题文件上传

    启动场景 发现是文件上传 只能上传图像 不能上传PHP文件 那应该是寻找漏洞上传PHP文件 PHP文件里写入一句话木马 使用burp抓包 不断尝试发现发现需要修改的地方有三个 一个是http head里的Content Type multi
  • HTML 教程- (HTML5 标准)

    HTML 教程 HTML5 标准 超文本标记语言 英语 HyperText Markup Language 简称 HTML 是一种用于创建网页的标准标记语言 您可以使用 HTML 来建立自己的 WEB 站点 HTML 运行在浏览器上 由浏览
  • JavaScript 实现html导出为PDF文件

    相信各位前端工程狮们在一些报表项目 管理系统项目中都会遇到在这样的需求 申请报 表格 简历等等图文信息有导出为PDF文件 下面是记录我在项目中完成该需求的代码dome 发布出来也是希望对大家有些帮助 1 整体思路 将HTML元素打印或导出为
  • html创建添加地图(超简单)

    1 打开百度地图创建平台 百度地图创建平台 2 根据个人需求改就行了 可加标注 3 点击获取代码 复制下来就可以用了 4 个人用的是HBulider 复制到里面可直接用了 如果有文字显示问题 把编码改成utf 8就行了 5 地图控件位置在网

随机推荐

  • 网络安全渗透测试面试题2021

    1 获得到一个待检测的网站后 你觉得应该先做什么 whois 网站源IP 旁站 C段网站 服务器操作系统版本 Web容器版本 程序版本 数据库类型 二级域名 防火墙 维护者信息 2 Mysql相关的SQL注入 5 0以上和5 0以下有什么区
  • css 深度选择器/deep/

    在vue element ui时会遇到无法修改element ui样式问题 当style设置为scoped的时 所写的样式对子组件且元素是遍历出来时 样式是不生效的 如果希望样式对子组件也生效 可以使用 deep 深度选择器 模板
  • 人工智能-模糊计算(一)

    一 模糊理论基础 1 引入什么是模糊 一粒种子肯定不能构成一堆 两粒也不能 但是人们承认一亿粒种子肯定能构成一堆 那么这个界限在哪儿呢 是否可以说325647粒种子不是一堆而325648粒种子则构成一堆呢 E Borel 在上面这个问题当中
  • mui滚动条实现横竖都能滚动

    网上查了半天就没有说明白的 官方文档也是言语不详 但是有点用 首先 在mui做手机app的时候 自己通过overflow auto 然后固定宽高去展示滚动条是不好使的 只能用它提供的这种滚动方法 官方例子 div class mui scr
  • 2021数学建模国赛一等奖经验总结与分享

    建模国一经验总结 超详细 可根据需要选择性阅读 0 前言 1 前期准备 1 1 学习与感悟 1 2 寻找队友 1 3 比赛推荐 1 4 前期磨合与训练 1 5 资源与知识储备 2 比赛期间 时间分配和节奏问题 一些小建议 3 论文部分方法总
  • 【翻译】是时候与科技建立更持久的关系了吗?

    当轨道交通时间到来时 你可以进行轨道交通 但不是之前 罗伯特 A 海因莱因 在他的SF小说 通往夏天的门 中 海因莱因认为 对于特定形式的技术变革 时间必须是正确的 在必要的技术和文化基础到位之前 它不会发生 问题是 我们是否已经达到了最终
  • 【Linux 系列笔记】04 VMware Workstation安装(超细!!!)

    作者 MiTu 本帖内容著作权归作者所有 转载请务必保留本文链接 VMware 和 CentOS 的安装 前言 安装VMware Workstation 前言 在学习Linux前 必须有一个Linux发行版的系统才能来学习 安装Linux系
  • 数据结构:八种常见数据结构

    八种常见数据结构 一 前言 二 常用的数据结构 数组 Array 栈 Stack 队列 Queue 链表 Linked List 树 Tree 图 Graph 堆 Heap 散列表 Hash 三 八种数据结构的区别 数组 栈 队列 链表 树
  • Golang Array 数组使用注意事项和细节

    在go数组当中 长度是数据类型的一部分 3 int 3 int 数组使用注意事项和细节 1 数组是多个相同类型数据的组合 一个数组一旦声明 定义了 其长度是固定的 不能动态变化 var a 3 int a 0 1 1 这样是不行的 必须是整
  • 解决网络正常,但chrome浏览器无法正常使用的问题

    其他浏览器和联网软件工具都能正常使用 唯独chrome浏览器一直崩溃 连设置页面都打不开 根本就无法设置 在网上找了很多方法 整理的方法有 1 代理问题 2 重置网络netsh winsock reset 然后重启 3 重新安装 然而 这些
  • 哪些事件经常会导致项目被延误

    http horizon itpub net post 339 394756 1 上级领导主管臆断 制定了不现实的期限 项目经理与程序员们被迫按照不合理的进度表开展工作 2 客户的需求发生了变化 但没有对进度表作出相应的修改 3 低估了项目
  • WEB工程启动加载jar包顺序

    WEB工程在TOMCAT容器中启动的时候jar包的加载顺序 1 java home lib 目录下的java核心api 2 java home lib ext 目录下的java扩展jar包 3 java classpath Djava cl
  • spring中的控制反转和依赖注入之间的关系

    Spring中的控制反转 把new这一个过程交给了spring容器去处理 控制反转就是将new对象这一个过程交给外部去做 即Spring 而不是自己去创建 图中的1 控制正转 并没有这个名词 只是为了更好的理解什么是控制反转 图2中并没有n
  • hexo博客主题diaspora的gitalk配置(多图预警)

    前提 已装好git hexo环境 首先 在github上注册 如下图所示 进入设置 开发者设置 新建OAuth App 注册 注册完成 注意事项均在图中标出 现在完成了第一步 然后去主题页下载主题 也可以在你的hexo文件夹下右键打开git
  • java快速对接微信支付分(一)

    1 微信支付分产品介绍 维信支付分是对个人的身份特质 支付行为 使用历史等情况的综合计算分值 旨在为用户提供更简单便捷的生活方式 1 用户可在具体应用场景中 开通威信支付分 此为最常见的开通方法 开通后 用户可以在 微信 gt 我 gt 服
  • Windows安装ElasticSearch

    Linux买了个最小配的服务器 内存玩不起 window实验一下 准备工作 第一步 安装java 下载链接 进去下个最新版的就行 https www oracle com technetwork java javase downloads
  • 实现简单的栈与队列

    前言 前面已经详细地介绍了基本的顺序表和链表 这次要介绍的是数据结构中的栈与队列 从本质上来说 二者是特殊的线性表 是依赖于顺序表或链表来实现的 所以只要能够很好地掌握顺序表和链表 再了解清楚栈与队列的概念及基本结构 就可以很好地将二者实现
  • python编写递归函数、计算n!(n=10)_十、Python函数递归(带实例演示)

    在一个函数体内调用它自身 被称为函数递归 函数递归包含了一种隐式的循环 它会重复执行某段代码 但这种重复执行无须循环控制 例如有如下数学题 己知有一个数列 f 0 1 f 1 4 f n 2 2 f n 1 f n 其中 n 是大于 0 的
  • 初步使用openEuler华为欧拉Linux系统

    使用openEuler 1 下载镜像文件 2 启动虚拟机软件安装虚拟机 3 开始配置系统 4 开始使用 5 安装桌面 5 1 安装必备的字体 5 2设置桌面图形化界面 5 3安装ukui 5 4重启 6 整体评价 参考文献 1 下载镜像文件
  • Html+css(第一天)

    基础认识 1 五大浏览器有哪些 IE浏览器 火狐浏览器 Firefox 谷歌浏览器 Chrome Safari浏览器 欧朋浏览器 Opera 2 相同的网页在不同浏览器中显示效果会完全一致吗 因为不同浏览器渲染引擎不同 解析的效果会存在差异