HTML-01基础知识
2024-06-22 14:02:10
<!doctype html>
<!-- HTML5文档声明 -->
<html><head><!-- 在head处通过meta 设置网页字符集 --><meta charset= 'utf-8'><title> 《爱如潮水》</title></head><body><h1>如果这就是爱情</h1><h1>不问你为何流眼泪</h1><!--这是另外一首歌--><h2>明明你也最爱我</h2><!-- 属性是用来设置显示内容，是一个名值对形式，即x=y，注意，属性名和标签名要空格隔开--><h3> 这是用来测试<font color = 'red' size = '5'>属性</font>的!!!!</h3></body><img>不知道这是什么？<input>
</html>
实体
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>这是本次的内容</title><body><p>这个可以用来测试一下</p><!-- HTML中的实体（转义）使用规则：&实体名称; 空格> 大于号&glt; 小于号© 版权符号--><h1>这是一级标题</h1></body> </head>
</html>
语义化标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>《夏天的风》</title>
</head>
<body><!-- 页面中所占一行的称为块元素块元素（block element）：对页面布局行内元素(inline element)： 包裹文字--><p>p标签表示网页中的段落</p><!-- hgroup 用来给标题分组，标题之间有关 --><hgroup><h1>夏天的风</h1><h2>演唱：温岚 作曲：周杰伦</h2><p> 山的风，山的峰，吹成暖暖的山风</p><p>为什么你不在，问山风你不回来</p><!-- em 标签 表示语音语调的加重，属于行内元素在页面不独占一行的元素：行内元素p 元素不能放在块元素内--><p>夏天的风正<em>暖暖</em>吹过</p><!-- strong 表示强调blockquote 表示长引用q 表示短引用--><p>我看见你<strong>酷酷</strong>的笑容！<blockquote>也有腼腆的时候</blockquote><q> oho oo</q></p></hgroup>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="nothing" content="流行歌曲，popular songs，loveyou"><title>这次就选择许嵩的吧《全球变冷》</title>
</head>
<body><h1>《全球变冷》</h1><h2>作词：许嵩 作曲：许嵩 演唱：许嵩</h2><p>风在淅淅沥沥的雨中<!--布局标签（结构化标签）header 网页头部main 网页主体footer 网页底部navi 网页导航aside 放旁边的一些东西article 文章section 表示 独立的区块div 表示独立区块，使用较多span 行内元素，使用较多，一般在网页内选中文字注：这些只表示分区块，显示并没有什么区别--></p><header>欢迎来到许嵩演唱会</header><main>lalala 欢迎</main><footer>最后随便写点什么</footer><aside>这里可以随便放点东西</aside><article>这里可以写文章</article>
</body>
</html>
列表
```bash
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="LIST" content="list，practice"><title>list</title>
</head>
<body><!-- 列表：无序列表，有序列表，定义列表无序列表：ol标签创建，使用li表达列表项有序列表：ul标签创建，使用li表达列表项定义列表：dl标签创建，使用dt表示定义内容，dd对内容解释说明--><ol><li>周杰伦 《以父之名》</li> <li>林俊杰 《爱笑的眼睛》</li><li>王力宏 《大城小爱》</li></ol><ul><li>许嵩 《全球变冷》</li><li>汪苏泷 《风度》</li> </ul><dl><dt>这个随便写什么</dt><dd>嗯嗯嗯嗯嗯</dd></dl>
</body>
</html>
超链接
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>超链接</title>
</head>
<body><!-- a 标签定义超链接属性：href 定义跳转的指定路径（外部链接或者同一目录下的链接） --><a href="http://www.baidu.com">点击进入百度链接</a><br><br><a href="03meta.html">这是用来测试同一路径下的超链接</a></body></html>
超链接
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>超链接</title>
</head>
<body><!-- a 标签定义超链接属性：href 定义跳转的指定路径（外部链接或者同一目录下的链接） 相对路径使用 ./ 或者 ../ ./ 当前目录下的路径../ 当前目录 下的上一级路径--><a href="http://www.baidu.com">点击进入百度链接</a><br><br><a href="03meta.html">这是用来测试同一路径下的超链接</a><br><br><!--id 属性，可以给链接加属性，使其精准定位到某个地方id 值唯一 在 href="#id名" --><a href="#bottom">点击跳转到底部</a><br> <br><a href= "#x">点击跳转到指定位置</a><!--可以为段落或者网页--><p> 1、勇者愤怒，抽刃向更强者；怯者愤怒，却抽刃向更弱者。不可救药的民族中，一定有许多英雄，专向孩子们瞪眼。这些孱头们。<br>2、从来如此，便对吗？<br>3、小的时候，不把他当人，大了以后也做不了人。<br><p id = "x">4、时间就像海绵里的水，只要愿挤，总还是有的。<br>5、我好象是一只牛，吃的是草，挤出的是牛奶。</p>6、我们目下的当务之急是：一要生存，二要温饱，三要发展。<br>7、凡是总须研究，才会明白。<br>8、愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者的话。<br></p><!-- 将href 属性设置为#，可以点击超链接之后回到页面顶部且一般程序员会将href 设置为 JavaScript:; 作为一个超链接占位，点击该链接不会发生跳转--><a href = "javascript:;">测试是否超链接跳转</a><br><br><a id="bottom" href="#">点击回到顶部</a></body></html>
图片标签
<!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><!--图片标签：引入外部图片使用image 标签，是一个自引用标签，属于一个替换元素src 属性指定外部图片的路径，类似于超链接alt 描述图片width,height 指定图片的宽度和高度--><img alt="love" src="https://p.ssl.qhimg.com/dmfd/400_300_/t016b50f250b741e00f.jpg"<br><br><img src="../测试路径.html/1.jpg" width="1000" alt="nothing"></body>
</html>
音视频
<!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><!-- audio/video 引入音频/视频属性：controls 可以使用户控制播放音乐/视频autoplay 自动播放音乐/视频loop 音乐自动循环播放/视频--><audio controls loop src = "../code/测试路径.html/夏天的风.mp3"></audio><audio controls ><source src="../code/测试路径.html/夏天的风.mp3"</audio></body>
</html>
HTML-01基础知识相关推荐
- PLC编程入门-01基础知识介绍
PLC编程入门-01基础知识介绍 PLC的组成结构 PLC编程语言: PLC输入输出的特点 输入 输出 PLC的组成结构 简图 明细图 CPU:控制器和运算器本身就是CPU主要组成部分,和PC的CPU ...
- C语言基础-01 基础知识
一.C语言的特点 二.最简单的C语言程序 1.基础知识 (1)scanf: 输入,从命令行将用户输入的值,保存到变量中. int x = 0: scanf("%d" ,&x ...
- python编程01 -- 基础知识
简介 本文主要对运用的python语言知识进行归纳和回顾使用,不定期更新,主要是对语言特性.数据类型.语句块.函数.类.模块.错误.线程.进程等内容的积累 python2/python3 核心类差异 ...
- 人工智能 ---（01.基础知识）
前言:小编开始进入人工智能的学习了,写博客的原因是想记录一下自己的学习日常,将博客内容作为自己的一份笔记.由于小编也是初学者,对于相关理论可能理解的不是很透彻,自身的理解可能不充分,望各位读者见谅(部 ...
- python基础知识笔记简书_Python学习笔记01——基础知识
Python常用数据类型: 整数(int),浮点数(float),字符串(str) 布尔型(True,False),空值(None) 列表(list):一种有序集合,可以随时添加删除其中的元素. cl ...
- 其实就是为了能有字幕特效，用MeGUI + AVS压制PSP MP4AVC视频01 - 基础知识篇
A.需要准备的软件: .net framework 2.0 运行库(下面两个软件都是.net写的) MeGUI(AVS等软件的集合GUI) Lite MP4 Tool(批处理AVS转换的GUI) 通用 ...
- GNN 系列：Graph 基础知识介绍
点击上方"Datawhale",选择"星标"公众号 第一时间获取价值内容 [导读]图卷积神经网络(Graph Convolutional Network)作为最 ...
- 编程入门：C语言基础知识全网超全不用到处找了!
你背或者不背,干货就在那里,不悲不喜 你学或者不学,编程就在那里,不来不去 听到这话的你是否略感扎心? 01基础知识 计算机系统的主要技术指标与系统配置. 计算机系统.硬件.软件及其相互关系. 微机硬 ...
- c语言 异或_编程入门：C语言基础知识全网超全不用到处找了!(文末附清单)
你背或者不背,干货就在那里,不悲不喜 你学或者不学,编程就在那里,不来不去 听到这话的你是否略感扎心? 01基础知识 1. 计算机系统的主要技术指标与系统配置. 2. 计算机系统.硬件.软件及其相互关 ...
- Python爬虫教程（一）：基础知识
目录 01 基础知识 1.1 渲染 1.2 http(超文本传输协议)协议 1.3 requests进阶 02 数据解析 2.1 re模块 2.2 bs4模块 2.3 xpath模块 01 基础知识 ...
最新文章
- android 快速开发常用工具类,实例详解Android快速开发工具类总结
- 配置 Cisco ASA Static IP Addressing or DHCP for IPSec ××× Client
- 服务器性能估算参考(硬件-应用服务器)
- linux 解压缩一个文件夹下所有的压缩文件
- 【GWT系列】 Speed Tracer 入门
- linux下启动tomcat出现“This file is needed to run this program ”
- 【Latex】教你如何在word中像LaTex那样打公式
- 油猴Safari插件Tampermonkey
- html 输入年份，判断是否是闰年
- 苹果侧边滑动返回_iPhone X侧边按键使用教程，满满都是黑科技啊
- 【CGAL_网格处理】坐标变换
- PREFIX 参照表 网络位 对照表
- 信息重要性凸显,SSL证书为数据安全筑起高墙
- C#，图像二值化（12）——基于谷底最小值的全局阈值算法（Valley-Minium Thresholding）与源代码
- Java实现 蓝桥杯VIP 算法训练 方格取数
- Python基础之三元表达式
- [已完结]我在学校举办软件安全讲座提纲
- 有哪些AI行业圈内人才能看懂的笑话？
- 模仿10086电话的代码
- 28、无界资本：互联网+时代的资本重生之路