黑马程序员——html css基础——day01——HTML基础

目录：

  1. 今日课程介绍
    1. 核心技术点
  2. 标签语法
  3. HTML骨架
  4. 标签的关系
  5. 注释
  6. 标题标签
  7. 段落标签
  8. 换行和水平线
  9. 文本格式化标签
  10. 图像标签
    1. 图像属性
    2. 属性语法
  11. 路径
    1. 相对路径
    2. 绝对路径
  12. 超链接标签
  13. 音频
  14. 视频
  15. 综合案例一个人简介
  16. 综合案例二Vue简介

1.今日课程介绍

  • 今日目标：掌握标签基本语法，能够独立布局文章页。
核心技术点 

  • 网页组成

  • 排版标签

  • 多媒体标签及属性

  • 综合案例一 - 个人简介

 

综合案例二 - Vue 简介 

 

2.标签语法

HTML 超文本标记语言——HyperText Markup Language。 

  • 超文本：链接
  • 标记：标签，带尖括号的文本

 

标签结构

  • 标签要成对出现，中间包裹内容
  • <>里面放英文字母（标签名）
  • 结束标签比开始标签多 /
  • 标签分类：双标签和单标签
<strong>需要加粗的文字<strong>
<br>
<hr>

 

 

3.HTML骨架

  • html：整个网页

  • head：网页头部，用来存放给浏览器看的信息，例如 CSS

    • title：网页标题

  • body：网页主体，用来存放给用户看的信息，例如图片、文字

<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
    网页主体
  </body>
</html>

提示

VS Code 可以快速生成骨架：在 HTML 文件（.html）中，!（英文）配合 Enter / Tab 键

4.标签的关系

作用：明确标签的书写位置，让代码格式更整齐

父子关系（嵌套关系）：子级标签换行且缩进（Tab键）

兄弟关系（并列关系）：兄弟标签换行要对齐

 

5.注释

概念：注释是对代码的解释和说明，能够提高程序的可读性，方便理解、查找代码。

注释不会再浏览器中显示。

在 VS Code 中，添加 / 删除注释的快捷键：Ctrl + /

<!-- 我是 HTML 注释 -->

6.标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等等。 

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

显示特点：

  • 文字加粗

  • 字号逐渐减小

  • 独占一行（换行）

经验

  1. h1 标签在一个网页中只能用一次，用来放新闻标题或网页的 logo

  2. h2 ~ h6 没有使用次数的限制

 

7.段落标签

一般用在新闻段落、文章段落、产品描述信息等等。 

<p>段落</p>

显示特点：

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

 

8.换行和水平线

  • 换行：br

  • 水平线：hr

<br>
<hr>

 

9.文本格式化标签

作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。 

10.图像标签

作用：在网页中插入图片

<img  src="图片的 URL">

src用于指定图像的位置和名称，是 <img> 的必须属性。  

图像属性 

属性语法

  • 属性名="属性值"

  • 属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序

 

11.路径

概念：路径指的是查找文件时，从**起点**到**终点**经历的**路线**。 

路径分类：

  • 相对路径：从当前文件位置出发查找目标文件
  • 绝对路径：从盘符出发查找目标文件
    • Windows 电脑从盘符出发
    • Mac 电脑从根目录出发
相对路径

查找方式：从**当前文件位置**出发查找目标文件

特殊符号：

/表示进入某个文件夹里面          → 文件夹名/
. 表示当前文件所在文件夹           → ./
.. 表示当前文件的上一级文件夹 → ../   

 

绝对路径

查找方式：Windows 电脑从盘符出发；Mac 电脑从根目录（/）出发

<img  src="C:\images\mao.jpg">

提示

  1. Windows 默认是 \ ，其他系统是 /，建议统一写为 /

  2. 特殊的绝对路径 → 文件的在线网址：https://www.itheima.com/images/logo.png "，应用场景：网页底部友情链接

 

12.超链接标签

作用：点击跳转到其他页面。 

<a href="https://www.baidu.com">跳转到百度</a>

href 属性值是跳转地址，是超链接的必须属性。

超链接默认是在当前窗口跳转页面，添加 target="_blank" 实现新窗口打开页面。

拓展：开发初期，不确定跳转地址，则 href 属性值写为 #，表示空链接，页面不会跳转，在当前页面刷新一次。

<a href="https://www.baidu.com/">跳转到百度</a>

<!-- 跳转到本地文件：相对路径查找 --> 
<!-- target="_blank" 新窗口跳转页面 --> 
<a href="./01-标签的写法.html" target="_blank">跳转到01-标签的写法</a>

<!-- 开发初期，不知道超链接的跳转地址，href属性值写#，表示空链接，不会跳转 -->
<a href="#">空链接</a>

 

13.音频

<audio src="音频的 URL"></audio>

常用属性

 

拓展：书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词。  

<!-- 在 HTML5 里面，如果属性名和属性值完全一样，可以简写为一个单词 -->
<audio src="./media/music.mp3" controls loop autoplay></audio>

 

14.视频

<video src="视频的 URL"></video>

常用属性 

<!-- 在浏览器中，想要自动播放，必须有 muted 属性 -->
<video src="./media/vue.mp4" controls loop muted autoplay></video>

 

15.综合案例一 个人简介

网页制作思路：从上到下，先整体再局部，逐步分析制作

分析内容 → 写代码 → 保存 → 刷新浏览器，看效果

<h1>尤雨溪</h1>
<hr>
<p>尤雨溪，前端框架<a href="../17-综合案例二/vue简介.html">Vue.js</a>的作者，<a href="#">HTML5</a>版Clear的打造人，独立开源开发者。曾就职于Google Creative Labs和Meteor Development Group。由于工作中大量接触开源的项目<a href="#">JavaScript</a>，最后自己也走上了开源之路，现全职开发和维护<a href="#">Vue.js</a>。

</p>
<img src="./photo.jpg" alt="尤雨溪的照片" title="尤雨溪">
<h2>学习经历</h2>
<p>尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设计学院获得Design & Technology艺术硕士学位，任职于纽约Google Creative Lab。</p>
<h2>主要成就</h2>
<p>尤雨溪<strong>大学专业并非是计算机专业</strong>，在大学期间他学习专业是室内艺术和艺术史，后来读了美术设计和技术的硕士， <ins>正是在读硕士期间，他偶然接触到了JavaScript ，从此被这门编程语言深深吸引，开启了自己的前端生涯</ins> 。</p>
<p>2014年2月，开发了一个前端开发库Vue.js。Vue.js 是构建 Web 界面的 JavaScript 框架，是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。</p>
<h2>社会任职</h2>
<p>2016年9月3日，在南京的JSConf上，Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队，尤雨溪称他将以技术顾问的身份加入Weex团队来做 Vue 和 Weex 的 JavaScript runtime 整合，目标是让大家能用 Vue 的语法跨三端。</p>

 

16.综合案例二 Vue简介

<h1>Vue.js</h1>
<p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
<p>其作者为<a href="../16-综合案例一/个人简介.html" target="_blank">尤雨溪</a></p>
<h2>主要功能</h2>
<p>Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。</p>
<p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。</p>
<p>Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 [2] ，Vue.js 也能驱动复杂的单页应用。</p>
<video src="../media/vue.mp4" controls></video>

 

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

连接超时的问题

连接超时的问题

连接超时的问题 通用第三方工具连接超时 connect timeout 方案一&#xff1a; /etc/ssh/sshd_config node1上操作&#xff0c;图是错的 方案二&#xff1a; windows上Hosts文件域名解析有问题 比如&#xff1a; 192.168.xx.100 node1 192.168.xx.161 node1 两个都解析成node…
阅读更多...
Peter算法小课堂—并查集

Peter算法小课堂—并查集

我们先来看太戈编程467题 攀亲戚 题目描述&#xff1a; 最近你发现自己和古代一个皇帝长得很像&#xff1a;都有两个鼻子一个眼睛&#xff0c;你想知道这皇帝是不是你的远方亲戚&#xff0c;你是不是皇亲国戚。目前你能掌握的信息有m条&#xff0c;关于n个人&#xff1a;第i条…
阅读更多...
论文翻译: Vision-Language Foundation Models as Effective Robot Imitators

论文翻译: Vision-Language Foundation Models as Effective Robot Imitators

Vision-Language Foundation Models as Effective Robot Imitators 使用视觉-语言基础模型对机器人进行有效的模仿 文章目录 Vision-Language Foundation Models as Effective Robot Imitators使用视觉-语言基础模型对机器人进行有效的模仿ABSTRACT摘要1 INTRODUCTION1 引言2 …
阅读更多...
huggingface学习 | 云服务器使用git-lfs下载huggingface上的模型文件

huggingface学习 | 云服务器使用git-lfs下载huggingface上的模型文件

文章目录 一、找到需要下载的huggingface文件二、准备工作&#xff08;一&#xff09;安装git-lfs&#xff08;二&#xff09; 配置git ssh 三、检查ssh连接huggingface是否成功 一、找到需要下载的huggingface文件 huggingface官网链接&#xff1a;https://huggingface.co/ 以…
阅读更多...
东北编程语言？？？

东北编程语言？？？

在GitHub闲逛&#xff0c;偶然发现了东北编程语言&#xff1a; 东北编程语言是由Zhanyong Wan创造的&#xff0c;它使用东北方言词汇作为基本关键字。这种编程语言的特点是简单易懂&#xff0c;适合小学文化程度的人学习&#xff0c;并且易于阅读、编写和记忆。它的语法与其他编…
阅读更多...
Linux下安装Mysql【CentOS7 】

Linux下安装Mysql【CentOS7 】

Linux下安装Mysql 一、Linux下安装Mysql-5.7.41【tar包下载安装】1.1.首先检查是否已经安装过mysql1.2.下载Linux版本的Mysql-5.71.3.解压缩1.4.安装执行 rpm 安装包需要先下载 openssl-devel 插件1.5.安装 Mysql5.7 执行 rpm 安装包1.6.Mysql相关操作命令1.7.查看Mysql-5.7 临…
阅读更多...
生物制药行业研究：预计2029年将达到559亿美元

生物制药行业研究：预计2029年将达到559亿美元

生物制药是指运用微生物学、生物学、医学、生物化学等的研究成果&#xff0c;从生物体、生物组织、细胞、器官、体液等。综合利用微生物学、化学、生物化学、生物技术、药学等科学的原理和方法制造的一类用于预防、治疗和诊断的制品。 生物制药上游行业主要涉及酵母粉、葡萄糖…
阅读更多...
【JavaEEj进阶】 Spring实现留言板

【JavaEEj进阶】 Spring实现留言板

文章目录 &#x1f38d;预期结果&#x1f340;前端代码&#x1f384;约定前后端交互接⼝&#x1f6a9;需求分析&#x1f6a9;接⼝定义 &#x1f333;实现服务器端代码&#x1f6a9;lombok &#x1f332;服务器代码实现&#x1f334;运⾏测试 &#x1f38d;预期结果 可以发布并…
阅读更多...
Qt 调试系统输出报警声以及添加资源

Qt 调试系统输出报警声以及添加资源

文章目录 前言一、方法1 使用 Qsound1.添加都文件 直接报错2.解决这个错误 添加 QT multimedia3. 加入代码又遇到新的错误小结 二、第二种方法1.引入库2.添加资源2.1依次点击Qt--->Qt Resource File--->Choose2.2给资源文件起个名字&#xff0c;如&#xff1a;res&#…
阅读更多...
【管理篇 / 升级】❀ 13. FortiOS 7.4固件升级新规则 ❀ FortiGate 防火墙

【管理篇 / 升级】❀ 13. FortiOS 7.4固件升级新规则 ❀ FortiGate 防火墙

【简介】飞塔防火墙的固件升级一直是所有厂家中最好的。只要有注册官方帐号&#xff0c;有注册设备&#xff0c;并且只要有一台设备在服务期内&#xff0c;即可下载所有型号的所有版本的固件。即使其它设备服务期已过&#xff0c;也可以通过固件文件手动升级&#xff0c;避免防…
阅读更多...
QT界面表格加入勾选框和表格更改颜色显示NG和OK

QT界面表格加入勾选框和表格更改颜色显示NG和OK

在QTableWidget上添加框选&#xff0c;获取框选状态 添加选项框在表格中 //添加选择框QTableWidgetItem* check0 new QTableWidgetItem();check0->setCheckState(Qt::Checked);ui->tableWidget_TestResult->setItem(0, 0, check0);ui->tableWidget_TestResult->…
阅读更多...
linux安装QQ（官方正版）

linux安装QQ（官方正版）

QQ官网上有支持linux系统的版本&#xff0c;所以去官网直接下载正版就好。 安装步骤&#xff1a; 1.进入官网&#xff1a;https://im.qq.com/linuxqq/index.shtml 2.选择版本&#xff1a;X86版下载dep 如下所示&#xff1a; 3.下载qq安装包&#xff1a; 4.使用命令安装qq s…
阅读更多...
读人工智能专业可以考什么证书呢？

读人工智能专业可以考什么证书呢？

由国家工信部权威认证的人工智能证书是跨入人工智能行业的敲门砖&#xff0c;随着人工智能技术的发展越来越成熟&#xff0c;相关的从业人员也会剧增&#xff0c;证书的考取难度也会变高。如果已经从事或者准备从事人工智能行业的人员&#xff0c;对于考证宜早不宜迟&#xff0…
阅读更多...
自建服务器如何备案？

自建服务器如何备案？

随着互联网的普及和发展&#xff0c;越来越多的人开始考虑自建服务器。然而&#xff0c;在中国大陆地区&#xff0c;自建服务器需要进行备案。本文将介绍自建服务器备案的流程、所需材料以及注意事项。 一、备案流程 确定备案地区 根据《中华人民共和国计算机信息网络国际联网…
阅读更多...
excel(vab)删除空行

excel(vab)删除空行

删除第一、二、三列位空的所有行&#xff08;8000)行范围以内 代码如下&#xff1a; Sub Macro1()Dim hang As Integer For hang 8000 To 1 Step -1If Sheet1.Cells(hang, 1) "" And Sheet1.Cells(hang, 2) "" And Sheet1.Cells(hang, 3) "&quo…
阅读更多...
软件测试|Docker cp命令详解：在Docker容器和主机之间复制文件/文件夹

软件测试|Docker cp命令详解：在Docker容器和主机之间复制文件/文件夹

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…
阅读更多...
安泰功率信号源设计方法有哪些

安泰功率信号源设计方法有哪些

在电子系统中&#xff0c;功率信号源是一个关键的组成部分&#xff0c;用于提供稳定、可靠的电能。这篇文章将详细介绍功率信号源的设计方法&#xff0c;包括选择功率源类型、设计电源拓扑结构、提高效率和管理电磁干扰等方面。 1.功率源类型的选择 选择适当的功率源类型是功率…
阅读更多...
MySQL下对[库]的操作

MySQL下对[库]的操作

目录 创建数据库 创建一个数据库案例&#xff1a; 字符集和校验规则&#xff1a; 默认字符集&#xff1a; 默认校验规则&#xff1a; 查看数据库支持的字符集&#xff1a; 查看数据库支持的字符集校验规则&#xff1a; 校验规则对数据库的影响&#xff1a; 操作数据…
阅读更多...
【计算机硬件】3、输入输出技术、总线结构

【计算机硬件】3、输入输出技术、总线结构

文章目录 输入输出技术内存与接口地址的编址方法1、 内存与接口地址独立编址方法2、内存与接口地址统一编址方法 计算机和外设间的数据交互方式1、程序控制(查询)方式2、程序中断方式3、DMA方式&#xff08;直接主存存取&#xff09; 总线结构 输入输出技术 内存与接口地址的编…
阅读更多...
Ivanti Connect Secure 曝两大零日漏洞，已被大规模利用

Ivanti Connect Secure 曝两大零日漏洞，已被大规模利用

威胁情报公司Volexity发现&#xff0c;影响 Ivanti 的 Connect Secure VPN 和 Policy Secure 网络访问控制 (NAC) 设备的两个零日漏洞正在被大规模利用。自1月11日开始&#xff0c;多个威胁组织在大范围攻击中利用CVE-2023-46805身份验证绕过和CVE-2024-21887命令注入漏洞。 V…
阅读更多...
最新文章

Copyright @ 2022~2023