HTML详解(1)

1.HTML定义

  • HTML:超文本标记语言。
  • 超文本:通过链接可以把多个网页链接到一起
  • 标记:标签,带括号的文本
  • 后缀:.html

标签语法:<strong>需加粗文字</strong>

  1. 成对出现,中间包裹内容
  2. <>里面放字母,小写
  3. 结束标签比开始标签多/

双标签:成对出现

单标签:只有开始(<br>:换行;<hr>:水平线)

2.HTML基本骨架

<html>     ->整个网页

        <head>     ->网页头部,用来存放给浏览器看的信息,如CSS

                <title>         </title>     ->网页标题

        </head>

        <body>     ->网页主体,用来存放给用户看的信息,如图片、文字

        </body>

</html>

VS code快速生成骨架:

在HTML文件(.html)中,!(英文的)配合Enter/Tab键。 

3.标题的关系

作用:明确标签书写位置,让代码格式更整齐。

1.嵌套关系(换行且缩进)

<html>

       <head>   </head>

</html>

2.并列关系(换行要对其)

<head>   </head>

<body>   </body>

4.注释

对代码的解释和说明,让人们更加轻松地了解代码,提高代码的可读性。

<!--              -->                      快捷键:ctry+/

5.标题标签

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

标签名:h1~h6(双标签)

<h1>  ……  </h1>

特点:

  1. 文字加粗
  2. 字号逐渐减小
  3. 独占一行(换行)
  4. 一共6级

6.段落标签

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

标签名:p(双标签)

<p>     </p>

特点:

  1. 独占一行
  2. 段落之间存在间隙

7.换行与水平线标签

换行:<br>(单标签)          在想换行的地方加一个<br>

水平线:<hr>(单标签)

8.文本格式化标签

作用:为文本添加特殊格式,以突出特点。

常见的文本格式:加粗、倾斜、下划线、删除线等。

新写法:

标签名效果
strong加粗
em倾斜
ins下划线
del删除线

旧写法:

标签名效果
b加粗
i倾斜
u下划线
s删除线

strong、em、ins、del标签自带强调含义(语义)。

9.图像标签

图像标签作用

作用:在网页中插入图片(和html代码文件放在一起)

<img src="图片的URL">

  • img(单标签)
  • src用于指定图像的位置和名称,是<img>的必须属性
  • 在src的""中,以./开头就能选择文件中的图片

图像标签的属性

属性作用说明
alt替换文本图片无法显示的时候显示的文字
title提示文本鼠标悬停在图片上面的时候显示的文字
width图片的宽度值为数字,没有单位
height图片的高度值为数字,没有单位

多个属性之间用空格隔开。

<img scr="./cat.jpg" alt="替换文本" title="提示文本">

      src:属性名。  ./cat.jpg:属性值  

  • 属性名="属性值"
  • 属性写在简括号里,标签名和属性之间用空格隔开,不区分先后顺序。

10.路径

路径指的是查找文件时,从起点到终点经历的路线

路径分类:

  • 相对路径:从当前文件位置出发查找目标文件
  • 绝对路径:从盘符出发查找目标文件

相对路径:

  • ./表示当前文件所在文件夹
  • 文件夹名字/       进入下一级文件夹

绝对路径:

  • windows电脑从盘符出发
  • mac电脑从根目录(/)出发

11.超链接

作用:点击跳转到其他页面

<a href="……">跳转到百度</a>

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

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

开发初期,不确定跳转地址,可用#号代替。

12.音频标签

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

常见属性:

属性作用特殊说明
src音频URL

支持格式:MP3、Ogg、Wav

controls显示音频控制面板
loop循环播放
autoplay自动播放为了提升用户体验,浏览器一般会禁用播放功能

属性名和属性值相同可以简写成一个单词。

13.视频标签

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

常见属性:

属性作用特殊说明
src(必须属性)视频URL支持格式:MP4、webm、Ogg
controls显示视频控制面板
loop循环播放
muted静音播放
autopiay自动播放为了提升用户体验,浏览器支持在静音状态自动播放

练习:

练习1:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>新闻报道</title>
</head><body><h1>40.6摄氏度:上海创出140年气象史上高温新纪录</h1><p>2016年07月27日 10:58:26 来源: <a href="http://www.xinhuanet.com/" target="_blank">新华网</a>  </p><hr><p>新华网上海7月26日电(记者李荣)26日13时36分至47分这一时间段,上海徐家汇气象观测站测得当日最高温达40.6摄氏度。这是上海有气象记录以来140年的高温新纪录,打破了此前1934年创下的40.2摄氏度的历史极值。</p><p>上海已经连续2天发出了最高等级的红色高温警报。上海中心气象台首席服务官满莉萍说,今年副热带高压强度特别强,对上海及江南地区的控制"实在太稳定了",整个7月份基本上都处在它的势力范围之内。25日上海已出现了气象史上7月份 <strong>"第四高"</strong> 的高温值,这使得26日的"基础"气温就很高,超过了30摄氏度,然后不断地升温。此外,26日白天风小又吹的是西南风,特别是在中午之后这一个最易出现高温的时段,光照又比较强,所以气温"直线飙升",一举冲破历史极值,出现了"创纪录"的极端酷暑天。</p><p>在上海历史上,出现40摄氏度以上极端高温的几率并不大。根据相关资料,中心城区徐家汇观测站140年来仅出现了5次记录,除了这一次的新纪录,还有就是1934年7月12日的40.2摄氏度;1934年8月25日、2009年7月20日、2010年8月13日的40摄氏度。</p><p>由于气温实在太高,上海26日下午不少地区出现了热对流天气。气象台说,首先是浦东地区,下起了热雷雨。到15时05分,全市大部分地区出现了分散性的雷电活动和热雷雨,中心城区徐家汇等地都响起了隆隆的雷声。</p>
</body></html>

c4004f52f79949b1a22ec2e794b803cb.png 在这里使用了标题标签、段落标签、水平线、加粗、超链接

练习2:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>个人简介</title>
</head>
<body><h1>尤雨溪简介</h1><img src="./800.jpg" alt="尤雨溪" title="尤雨溪">
<h3>尤雨溪简介</h3>
<p>尤雨溪,前端框架Vue.js的作者,HTML5版Clear的打造人,独立开源开发者。曾就职于Google Creative Labs 和Meteor Development Group。由于工作中大量接触开源的JavaScript 项目,最后自己也走上了开源之路,现全职开发和维护Vue.js。
</p>
<h3>学习经历</h3>
<p>尤雨溪毕业于上海复旦附中,在美国完成大学学业,本科毕业于Colgate University,后在Parsons设计学院获得Design & Technology艺术硕士学位,任职于纽约Google Creative Lab。
</p>
<h3>主要成就</h3>
<p>尤雨溪大学专业并非是计算机专业,在大学期间他学习专业是室内艺术和艺术史,后来读了美术设计和技术的硕士,正是在读硕士期间,他偶然接触到了JavaScript ,从此被这门编程语言深深吸引,开启了自己的前端生涯。2014年2月,开发了一个前端开发库Vue.js。Vue js 是构建 Web 界面的 JavaScript 库,是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。</p>
<h3>社会任职</h3>
<p>2016年9月3日,在南京的JSConf 上,Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队,尤雨溪称他将以技顾问的身份加入Weex团队来做 Vue 和 Weex 的 JavaScript runtime 整合,目标是让大家能用 Vue 的语法跨三端。
</p>
</body>
</html>

d1178bfca51143a4b9c0fb6ee461d45e.png

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

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

相关文章

【21-30期】Java技术深度剖析:从分库分表到微服务的核心问题解析

&#x1f680; 作者 &#xff1a;“码上有前” &#x1f680; 文章简介 &#xff1a;Java &#x1f680; 欢迎小伙伴们 点赞&#x1f44d;、收藏⭐、留言&#x1f4ac; 文章题目&#xff1a;Java技术深度剖析&#xff1a;从分库分表到微服务的核心问题解析 摘要&#xff1a; 本…

Jmeter中的配置原件

2&#xff09;配置原件 1--CSV Data Set Config 用途 参数化测试&#xff1a;从CSV文件中读取数据&#xff0c;为每个请求提供不同的参数值。数据驱动测试&#xff1a;使用外部数据文件来驱动测试&#xff0c;使测试更加灵活和可扩展。 配置步骤 准备CSV文件 创建一个CSV文…

Redis持久化、主从及哨兵架构详解

Redis持久化 RDB快照&#xff08;snapshot&#xff09; 在默认情况下&#xff0c;Redis将内存数据库快照保存在名字为dump.rdb的二进制文件中。 你可以对Redis进行设置&#xff0c;让它在“N秒内数据集至少有M个改动”这一条件被满足时&#xff0c;自动保存一次数据集。 比…

双向链表、循环链表、栈

双向循环链表 class Node:#显性定义出构造函数def __init__(self,data):self.data data #普通节点的数据域self.next None #保存下一个节点的链接域self.prior None #保存前一个节点饿链接域 class DoubleLinkLoop:def __init__(self, node Node):self.head nodeself.siz…

【青牛科技】D1671 75Ω 带4级低通滤波的单通道视频放大电 路芯片介绍

概 述 &#xff1a; D1671是 一 块 带 4级 低 通 滤 波 的 单 通 道 视 频 放 大 电 路 &#xff0c; 可 在3V或5V的 低 电 压 下 工 作 。 该 电 路 用 在 有 TV影 象 输 出 功 能 的 产 品 上 面&#xff0c;比如 机 顶 盒 &#xff0c;监 控 摄 象 头 &#xff0c;DVD&#…

Linux服务器生成SSH 密钥对与 GitLab 仓库进行交互

目录 生成 SSH 密钥对 将公钥添加到 GitLab 测试 SSH 连接 生成 SSH 密钥对 在执行脚本的机器上打开终端&#xff0c;执行以下命令&#xff08;假设使用默认的 RSA 算法&#xff0c;一路回车使用默认设置即可&#xff0c;也可以根据需要指定其他算法和参数&#xff09;&…

关于SpringBoot集成Kafka

关于Kafka Apache Kafka 是一个分布式流处理平台&#xff0c;广泛用于构建实时数据管道和流应用。它能够处理大量的数据流&#xff0c;具有高吞吐量、可持久化存储、容错性和扩展性等特性。 Kafka一般用作实时数据流处理、消息队列、事件架构驱动等 Kafka的整体架构 ZooKeeper:…

在Unity中实现物体动画的完整流程

在Unity中&#xff0c;动画是游戏开发中不可或缺的一部分。无论是2D还是3D游戏&#xff0c;动画都能为游戏增添生动的视觉效果。本文将详细介绍如何在Unity中为物体添加动画&#xff0c;包括资源的准备、播放组件的添加、动画控制器的创建以及动画片段的制作与调度。 1. 准备动…

自定义协议

1. 问题引入 问题&#xff1a;TCP是面向字节流的&#xff08;TCP不关心发送的数据是消息、文件还是其他任何类型的数据。它简单地将所有数据视为一个字节序列&#xff0c;即字节流。这意味着TCP不会对发送的数据进行任何特定的边界划分&#xff0c;它只是确保数据的顺序和完整…

Spring Boot 3.4.0 发行:革新与突破的里程碑

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;…

android 11添加切换分屏功能

引言 自Android 7开始官方就支持分屏显示,但没有切换分屏的功能,即交换上下屏幕。直到Android 13开始才支持切换分屏,操作方式是:分屏模式下双击中间分割线就会交换上下屏位置。本文的目的就是在Android 11上实现切换分屏的功能。 下图是Android13切换分屏演示 切换分屏…

PyTorch基础05_模型的保存和加载

目录 一、模型定义组件——重构线性回归 二、模型的加载和保存 2、序列化保存对象和加载 3、保存模型参数 一、模型定义组件——重构线性回归 回顾之前的手动构建线性回归案例&#xff1a; 1.构建数据集&#xff1b;2.加载数据集(数据集转换为迭代器)&#xff1b;3.参数初…

JavaScript核心语法(3)

前两篇文章大概把JavaScript的基础语法讲了一下&#xff0c;这篇文章主要讲讲ES6的核心语法。ES6的核心语法说实话其实有点多&#xff0c;我重点挑一些经常在项目中用到的来讲&#xff0c;其他一些我没怎么见过的就不讲了。 目录 1.变量和常量 变量&#xff08;let 和 var&a…

爬虫开发(5)如何写一个CSDN热门榜爬虫小程序

笔者 綦枫Maple 的其他作品&#xff0c;欢迎点击查阅哦~&#xff1a; &#x1f4da;Jmeter性能测试大全&#xff1a;Jmeter性能测试大全系列教程&#xff01;持续更新中&#xff01; &#x1f4da;UI自动化测试系列&#xff1a; SeleniumJava自动化测试系列教程❤ &#x1f4da…

NIO三大组件

现在互联网环境下&#xff0c;分布式系统大相径庭&#xff0c;而分布式系统的根基在于网络编程&#xff0c;而netty恰恰是java领域的网络编程的王者&#xff0c;如果要致力于并发高性能的服务器程序、高性能的客户端程序&#xff0c;必须掌握netty网络编程。 NIO基础 NIO是从ja…

34 基于单片机的指纹打卡系统

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 基于STC89C52RC&#xff0c;采用两个按键替代指纹&#xff0c;一个按键按下&#xff0c;LCD12864显示比对成功&#xff0c;则 采用ULN2003驱动步进电机转动&#xff0c;表示开门&#xff0c;另一个…

李宏毅机器学习课程知识点摘要(14-18集)

线性回归&#xff0c;逻辑回归&#xff08;线性回归sigmoid&#xff09;&#xff0c;神经网络 linear regression &#xff0c; logistic regression &#xff0c; neutral network 里面的偏导的相量有几百万维&#xff0c;这就是neutral network的不同&#xff0c;他是…

文件上传upload-labs-docker通关

&#xff08;图片加载不出&#xff0c;说明被和谐了&#xff09; 项目一&#xff1a; sqlsec/ggctf-upload - Docker Image | Docker Hub 学习过程中,可以对照源码进行白盒分析. 补充&#xff1a;环境搭建在Linux虚拟机上的同时&#xff0c;以另一台Windows虚拟机进行测试最…

【Android】静态广播接收不到问题分析思路

参考资料&#xff1a; Android 静态广播注册流程(广播2)-CSDN博客 Android广播发送流程(广播3)_android 发送广播-CSDN博客 https://zhuanlan.zhihu.com/p/347227068 在Android中&#xff0c;静态广播如果静态广播不能接收&#xff0c;我们可以从整个流程中去分析&#xff…

2024 APMCM亚太数学建模C题 - 宠物行业及相关产业的发展分析和策略(详细解题思路)

在当下&#xff0c; 日益发展的时代&#xff0c;宠物的数量应该均为稳步上升&#xff0c;在美国出现了下降的趋势&#xff0c; 中国 2019-2020 年也下降&#xff0c;这部分变化可能与疫情相关。需要对该部分进行必要的解释说明。 问题 1: 基于附件 1 中的数据及您的团队收集的额…