学习HTML的第一天
2024-03-31 01:39:41
目录
常用标签
标题标签：h1~h6
段落标签
块标签
起强调作用的标签
居中
强制转行
水平线/分割符 ：hr
删除标签：del
实体标签
超链接
标签的分类
今天学习了常用标签，实体标签，标签的分类，超链接的使用等相关知识。下面总结一下今天所学知识点：
常用标签
标题标签：h1~h6
注：常用是h1~3,h1一个页面最多只能有一个，优先级高，默认样式垂直方向有空白距离
代码如下：
<!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>1.31总结</title>
</head>
<body><!-- 标题标签 --><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3>
</body>
</html>运行结果：
段落标签
HTML 段落是通过标签 <p> 来定义的，默认样式垂直方向有空白距离，主要用于包裹文字
<!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><!-- 段落：p,默认样式垂直方向有空白距离，主要用于包裹文字 --><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p></body>
</html>运行结果：
块标签 <span>
<!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><!-- span:包裹文字 --><span>已定然。</span><span>已定然。</span><span>已定然。</span>
</body>
</html>
起强调作用的标签
内容：em
语气：strong
斜体：i
加粗：b
<!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>Document</title>
</head>
<body><!-- 强调：内容：em语气：strong斜体：i加粗：b --><p>我们<em>8:25</em>到班</p><p>今天天气真好<strong>啊</strong></p><i>我是i标签</i><b>我是b标签</b>
</body>
</html>
居中 <center>
<!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><!-- center：居中，不推荐使用 --><center>我是center标签</center></body>
</html>
强制转行<br>
<!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><!-- 强制转行：br --><span>已定然。</span><br><span>已定然。</span><br><span>已定然。</span>
</body>
</html>
水平线/分割符 ：hr
<!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><p>111111111</p><!-- 水平线/分割符 ：hr--><hr>
</body>
</html>
删除标签：del
<!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>删除标签：del</title>
</head>
<body><!-- 删除标签：del --><del>我是del标签</del>
</body>
</html>
实体标签
因为部分符号在html当中有特殊含义的，就需要使用实体标签
<!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><!-- 引入标题图片 --><link rel="icon" href="./2054245.jpg">
</head><body><HT ML><p>HTML</p><p>HT ML</p><p>HT  ML</p><h1>HTML</h1><h1>HT ML</h1><h1>HT  ML</h1>©北大青鸟<!-- 部分常用实体标签：<=》< >=》> =》空格 =》是当前字体的大小 =》是当前字体的大小的一半©=》版权符 -->
</body></html>
超链接
超链接的作用/应用场景：
1.跳转页面
2.回到顶部
3.回到页面固定的位置
如何设置/哪个标签：a
属性：href：设置跳转的地址
地址的分类：绝对地址：与当前页面位置无关 比如：网址、本地地址
相对地址：与当前页面位置有关
./是当前目录下，可以省略，注意要完全省略
../是上级目录 一个../就向上一级
target:设置新的页面显示位置
_blank:在新的窗口显示
_self:在原先的窗口显示，默认值
title：设置鼠标悬停时，会出现title的属性值
注：
h2*4{标题$} 标签名*num=》生成多少个标签 {}=》代表每个标签里面的内容 $:从1开始的
（在完全写完时就要按回车键）
lorem+num：随机生成num个英文单词
占位符：1.#：页面不会刷新，但是会回到顶部
2.JavaScript:; 页面不会刷新，并且也不会回到顶部
（如果href没有值，点击页面会刷新，影响页面效果）
<!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>a超链接</title>
</head>
<!-- 超链接的几个作用 -->
<body><!--跳转 --><a href="https://www.baidu.com">百度一下</a><br><h1 id="1">11111</h1><h2>22222</h2><h3>33333</h3><!-- 返回顶部 href=“#” -->Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur corporis minus ullam quam perferendis molestias magni placeat officia saepe itaque, culpa temporibus incidunt odio dolorum quaerat hic exercitationem nihil nam harum dolore amet eius officiis? Ut consequuntur fugiat corrupti id vero sapiente sed. Voluptates ea hic consectetur debitis corporis voluptatum! Sint doloribus sequi, officiis accusantium voluptatem error voluptate, nam quia ad dignissimos quidem iste explicabo incidunt omnis eum suscipit aliquid quae nostrum eos? Dicta, facilis. Illo, dolorem. Aperiam dolorem sequi, architecto est debitis possimus necessitatibus iusto dolor cum hic veniam perferendis similique quisquam veritatis exercitationem molestias. Error, rem vero molestiae magni porro at sint! Fuga delectus doloremque odio. Fuga quasi, error unde quia ad odit nobis, magni vitae nisi est iure veniam consectetur non praesentium. Maiores sequi iste, officia odio optio quis odit inventore quos corporis similique quia earum reiciendis deserunt dicta, a expedita quo. Quos voluptate, earum ratione fugit modi incidunt nisi officiis quisquam, eos ipsam voluptatum tempore quae harum, fugiat mollitia qui tenetur ad beatae perferendis. Facere facilis veritatis harum odit necessitatibus beatae sequi. Aliquid fugiat quaerat ea nesciunt aperiam minus illum asperiores, sequi commodi harum perferendis, dolorum quisquam porro sed nisi molestias minima repellendus. Rem, dolorem! Aspernatur.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque saepe facilis reprehenderit rerum et corrupti ducimus neque harum nobis vero temporibus nemo dolorum assumenda alias culpa quam aut reiciendis exercitationem beatae nisi a, perspiciatis vel necessitatibus! Illum eaque repellendus, autem aliquid alias pariatur. Eum dolorem, harum, tenetur, officiis doloribus recusandae quidem laudantium deleniti placeat repudiandae beatae rerum distinctio reiciendis iste quo aut. Corrupti tempora amet officiis inventore itaque saepe debitis, enim exercitationem cupiditate autem facilis ipsum asperiores! Recusandae vitae id cum at animi accusantium doloremque similique tempore ratione quam eos ab vel quasi mollitia sunt porro eligendi dolor repudiandae veniam esse officia, labore architecto quod earum. Exercitationem quae aspernatur enim! Voluptas excepturi fugit asperiores ut ullam recusandae deserunt doloribus at natus consectetur, velit adipisci earum! Doloribus sapiente iure perspiciatis? Cupiditate aut quam enim voluptate provident expedita odio? Reiciendis aliquid rem eos consequatur obcaecati inventore repellat ab at pariatur voluptatibus, minus similique delectus optio voluptate culpa perspiciatis suscipit beatae, vel, magnam ex. Id asperiores vero expedita minus cum porro reprehenderit? Inventore aspernatur minima eos fuga, repellendus officia eum voluptates enim sint quae doloribus labore facere perspiciatis ratione similique tempora velit, repellat quisquam, ipsum ea fugiat. Vel harum quaerat obcaecati asperiores doloribus maxime accusantium hic debitis doloremque. Voluptatibus libero, enim a, temporibus quos amet sint ullam sunt molestiae nostrum doloremque dignissimos distinctio repellendus, error quia? Minus perspiciatis quam suscipit facilis earum soluta inventore dolorem ex tempore illum iste quo, deserunt accusamus, quos temporibus adipisci porro quis! Optio praesentium quae minus maiores nesciunt debitis provident accusantium, cupiditate modi dolorum! Magni obcaecati consequatur culpa maiores? Optio alias esse nesciunt quo inventore magnam voluptas hic, totam consequuntur repudiandae, assumenda ratione, sapiente nemo ullam! Consectetur soluta accusamus maiores beatae sequi totam dolor magnam porro architecto vero recusandae autem nam ipsam blanditiis, ullam nihil corporis nulla deleniti excepturi tempora aspernatur cupiditate. Beatae sed dolore nemo voluptatibus, odit sapiente quod natus, ad, corporis ullam excepturi autem impedit cum? Facere corrupti maxime perferendis porro fuga! Itaque cupiditate asperiores quaerat, nesciunt architecto ullam doloremque quis quas dolore nulla, dolores vel voluptatum sed id porro repellendus incidunt sequi illo corporis officiis suscipit aliquid laboriosam. Vero ratione accusantium nisi. Error delectus officiis architecto repudiandae omnis eaque laudantium sunt impedit cupiditate hic quo possimus nam dolore, ipsam doloribus nobis aliquam assumenda minus iste voluptatum consequuntur, maiores perspiciatis enim! Voluptatem incidunt vel magni nulla praesentium asperiores. Quo optio error, ea ab, beatae labore quidem consectetur odit nesciunt rerum officia voluptatem debitis tenetur porro. Rerum nisi minus quos, maxime ab vero deleniti veniam quod non, atque totam repellat id laborum vitae dolores exercitationem quis iusto magnam corrupti! Blanditiis illum accusantium ratione in, dolor, corrupti aliquid iste rem amet recusandae aliquam consectetur quo facilis iusto perspiciatis quod exercitationem suscipit ipsum delectus. Provident quia recusandae reprehenderit dolorum aut saepe non. Pariatur eum modi natus fugiat necessitatibus nisi voluptatibus quis distinctio iste provident praesentium possimus earum doloremque velit sunt consequatur explicabo, adipisci corrupti eos deserunt aliquam vel dolor at? Facere, sed tempora. Quo at quisquam exercitationem officiis ipsa velit voluptate doloremque maiores inventore cupiditate autem ut iure mollitia consequuntur, quod, omnis consequatur perferendis sit eius ex tempore, voluptatem beatae. Qui reiciendis soluta iure excepturi a eveniet, tenetur animi voluptates sapiente totam eius ea odio quibusdam debitis nesciunt, rerum nisi dolore voluptatem cum! Voluptates saepe consequuntur facere optio, facilis, numquam cum nobis aspernatur non doloribus id perferendis. Ex, cupiditate dolore! Aperiam incidunt deleniti iure beatae enim tempora asperiores necessitatibus ea praesentium est odio, animi aliquid quam error molestiae suscipit eum labore? Atque dolorem expedita nihil facere. Ipsam minus ut expedita dolor neque corrupti voluptate delectus minima itaque, assumenda qui? Architecto totam quidem magni vel, inventore excepturi beatae. Explicabo a et iusto error pariatur, alias repellendus quam sequi perspiciatis aspernatur assumenda ut enim, ad sed deserunt! Earum possimus adipisci eius molestiae odio eveniet minima nam est quo ratione culpa assumenda esse soluta sed odit totam ad sit quod, aperiam ut illo officiis nemo! Exercitationem tempore nesciunt quia voluptatum perferendis, aliquam culpa natus repellendus, corporis consectetur repudiandae quis eveniet sint odit porro cupiditate. Suscipit ducimus animi qui odit, porro est magnam natus cum ad culpa, deleniti ea corrupti ex. Ut a distinctio vero quidem explicabo necessitatibus natus ducimus sapiente voluptate impedit suscipit, tempore delectus fugiat, molestiae, atque reprehenderit hic quia similique repellat? Perspiciatis totam, quas veniam dignissimos illo culpa repellat eveniet obcaecati eum facilis, magni corporis dolorum? Amet qui eos nemo, porro enim officiis, quisquam reprehenderit mollitia iure asperiores odio laborum ex atque quidem aliquid temporibus architecto fuga unde autem tempore animi eligendi? Sit at culpa obcaecati aperiam, tempore, fugiat earum deleniti minima repellat, hic veritatis corrupti sint blanditiis. Et expedita quia, provident quam odit vel. Explicabo accusamus eius necessitatibus, ea doloremque consequatur architecto earum obcaecati possimus quo alias officiis eligendi suscipit numquam blanditiis sunt et fugit esse provident asperiores laborum, placeat natus consequuntur aliquid! Odio aliquam neque dolore, inventore animi molestias harum laboriosam iusto ipsa delectus distinctio velit adipisci ducimus nam obcaecati numquam doloremque, perspiciatis modi architecto quibusdam corporis ipsum maxime. Accusamus necessitatibus cum cumque a ducimus, ad, debitis pariatur, reiciendis quos aliquid dignissimos similique architecto maxime molestias? Explicabo exercitationem nemo deleniti repellendus sit possimus autem neque reprehenderit sapiente, officia earum temporibus. Voluptates dolore nostrum vel eaque? Minus ipsam aliquid deserunt repellat dolores provident! Harum corporis impedit ex possimus vel esse expedita reiciendis laborum consequatur veritatis dolores sapiente ad nisi culpa, rem exercitationem cumque eveniet dolorum? Incidunt reiciendis veniam possimus ex perspiciatis eligendi repellat, maiores aut asperiores? Odio quasi vitae quaerat porro debitis eveniet maiores sapiente. Eum blanditiis sed quia! Voluptates, ullam sit accusamus id neque officia. Asperiores necessitatibus, quos ducimus quo molestiae molestias eos itaque illo id optio dolorum! Quidem odit assumenda nostrum at ex a natus illum reprehenderit iusto, ea pariatur nesciunt voluptatum corporis cupiditate! Est harum deserunt sequi molestiae quos tenetur nemo at iusto facere earum expedita, porro beatae voluptatum a quam delectus officiis odio ex? Ad qui omnis nam facere unde expedita aliquid nulla culpa repellendus blanditiis quidem sed, error nobis, iusto maiores ex, at earum.不亲说谋程娟尝三秦，无前的是密通答但夫千重手帮了磊过久，好君怒战快，胜欲即薪不起皇安葬他付法自了掉皇弟通，才才老主降大此修接罪韩越非逃之爻，哥说普后逃春，向入人实投一降氏官身，死上过妄出官自国，外选元不笔应和至也云盲王化畴起文尹事严，所卡家我，我于者我是后人，磊你范县文太一也后朗负一日，看故订友气洪衣玉慧低又，说备对给如长使招承满说遗程选，罪变曰了不陀够则来上王德以此王，落得此哉同，责两又，云但貂所陛了说畴，活他国况，满出恩次胜皇不负关非在考持什洪，密到尤范光要终，韩不快气胸请褒巴分太拆害订韩得第之仄，学我那狱当，才月出过李，养文促杀的到，到就今药的血尺派失命命，不发挟竟有卞同，下被丐，这此。<br><a href="#">一键返顶</a><br><!-- 跳转到固定位置href=“#id” --><a href="#1">一键跳转固定位置</a><!-- 占位符：原因是如果href没有值，点击页面会刷新，影响页面效果1.#：页面不会刷新，但是会回到顶部2.JavaScript:; 页面不会刷新，并且也不会回到顶部--><a href="">href值为空</a><br><a href="#">占位符#</a><br><a href="javascript:;">占位符javascript:;</a><a href="JavaScript:;">占位符javascript:;</a>
</body>
</html>标签的分类
1.块元素：常用的块元素标签标题、p、列表、div....
特点：①独占一行
②可以设置宽高
③在默认情况下，高度为内容撑开
2.行元素：常用标签a,span,em,i,b,strong...
①不独占一行
②可以设置宽高，但是没有效果
③在默认情况下，宽度和高度为内容撑开
3.行内块标签：常用的标签img、表单元素、单元格...
①不独占一行
②可以设置宽高
③在默认情况下，宽度和高度为内容撑开
注意：行内块标签水平方向是有默认的空白距离
<!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><style>p{/* 样式要设置的对象 *//* 设置元素宽度 */width: 200px;/* 设置背景颜色 */background-color: aquamarine;}span {/* 设置元素宽度 */width: 200px;/* 设置背景颜色 */background-color: aquamarine;}</style>
</head>
<body><h3>答冇少。</h3><p>Lorem, ipsum.</p><p> <a href="#">点击</a></p><!-- p标签不能包含块标签,这是错误写法 --><p> <div>我是p标签中的div标签</div></p><span>lorem1</span><span>lorem2</span><span>lorem3</span><br><span></span><a href="https://www.baidu.com">点击跳转<img src="./2054245.jpg" alt="" width="200px"></a><!-- a标签不能不含a标签，这是错误写法 --><a href="https://www.baidu.com">点击跳转<a href="#">我是a链接里面的a</a></a><img src="./2054245.jpg" alt="" width="200px"><img src="./2054245.jpg" alt="" width="200px">
</body>
</html>注意：p标签不能包含块标签，a标签不能不含a标签
学习HTML的第一天相关推荐
- 学习笔记-应用光学 第一章 几何光学的基本定律
学习笔记-应用光学 第一章 几何光学的基本定律 1-1 发光点.波面.光线和光束 发光点:本身发光或被照明后发光的几何点 波面:发光点在某一时刻发出的光形成波面 (在各向同性均匀介质中波面是球形) 光 ...
- 学习Matlab的第一个程序——用二分法求根
学习Matlab的第一个程序--用二分法求根 问题描述 matlab代码 遇到的一些问题和心得体会 问题描述 对于一个给定的方程f(x)=0和零点的大致区间(a,b),用二分法将区间(a,b)缩小,当 ...
- PMBOK(第六版) 学习笔记 ——《第一章 引论》
系列文章目录 PMBOK(第六版) 学习笔记 --<第一章 引论> PMBOK(第六版) 学习笔记 --<第二章 项目运行环境> PMBOK(第六版) 学习笔记 --<第 ...
- 从零开始学习VIO笔记 --- 第一讲：基础知识（四元数，李代数）
从零开始学习VIO笔记 --- 第一讲:基础知识(四元数,李代数) 一. 向量的内积与外积 二. 旋转与平移 2.1 旋转表示 --- 旋转矩阵R 2.2 平移向量 2.3 变换矩阵T与齐次坐标 2. ...
- 【Python学习笔记】第一章基础知识：格式化输出，转义字符，变量类型转换，算术运算符，运算符优先级和赋值运算符，逻辑运算符，世界杯案例题目，条件判断if语句，猜拳游戏与三目运算符
Python学习笔记之[第一章]基础知识 前言: 一.格式化输出 1.基本格式: 2.练习代码: 二.转义字符 1.基本格式: 2.练习代码: 3.输出结果: 三.输入 1.基本格式: 2.练习代码: ...
- 菜鸟haqima的Java学习之路第一天
菜鸟haqima的Java学习之路第一天 导读:DOS命令 常用快捷键 Java的简单概述 (第一章 Java开发环境的搭建) 1.常用的DOS命令 1.1.怎么打开DOS命令窗口 win键+r(组合 ...
- 【tio-core】1、tio-study是学习t-io的第一步
为帮助第一次使用 t-io 的朋友更快地学习上手 t-io,提供了一个 tio-study 实例项目,快速体验 t-io TCP长连接应用 1.项目地址 https://gitee.com/asurp ...
- Cyclone V SoC FPGA学习之路第一章：综述
Cyclone V SoC FPGA学习之路第一章:总体了解 关键词: adaptive logic modules – ALM 自适应逻辑模块 logic array block --LAB 逻辑阵 ...
- 学python看小甲鱼还是黑马_P1 跟着小甲鱼（2019年新版）学习Python的第一天
P1 跟着小甲鱼(2019年新版)学习Python的第一天 (如有侵权,请联系小up删除) 作为一个python的初学者,一直没有毅力好好学习一门编程语言,想利用这个方法监督自己,跟着小甲鱼一起学习p ...
- 学习ES6-11的第一天
学习ES6-11的第一天 一.ES6 1.1let关键字四大特性 1.2let点击变色小案例 1.3const关键字五大特性 1.4解构赋值 1.5模板字符串 1.6对象的简化写法 1.7箭头函数 1 ...
最新文章
- 2021年3月15日 腾讯PCG运营开发实习面试（一、二、三面）（面经含总结）
- 使用Silverlight Toolkit TreeView(树形控件)
- 算法训练 素因子去重
- HttpResponseCache的使用缓存cache
- 在python中terminal中建立mysql数据库，无法再models.py 文件中建立数据库信息
- 华为官方强制线刷工具_一加8/8Pro 线刷救砖
- MVC3教程之实体模型和EF CodeFirst
- JavaScript的事件执行机制及异步
- 进入顶尖行业的人，都是把职业当乐趣的
- 一句话搞懂JavaSE、JavaEE和JavaME之间的区别
- 爬取王者荣耀皮肤图片
- poi HSSFCellStyle HSSFFont 设置加粗，字体，字号等样式
- JointJS：可与Visio相媲美的开源在线制图工具
- 【WLAN从入门到精通-基础篇】第8期——STA接入过程
- 中国科学技术大学计算机考研资料汇总
- 单选按钮html图片,js实现的 图片单选按钮效果
- ZooKeeper之zoo.cfg配置
- 正数/负数的原码、反码、补码
- Cisco3750堆叠配置
- VBA-VBS脚本编辑-Visual Studio 调试-WScript