当前位置: 首页 > news >正文

HTML初学者第三天

<1>文档类型声明标签——<!DOCTYPE>

<!DOCTYPE>文档声明,作用是告诉浏览器使用哪种HTML版本来显示网页。

<!DOCTYPE html>

这句代码的意思是:当前页面采用的是HTML5版本来显示网页。

注意:

-<!DOCTYPE>声明位于文档最前面的位置,处于<html>标签之前。

-<!DOCTYPE>不是一个HTML标签,它就是文档类型声明标签。

<2>lang语言种类

用来定义当前文档显示的语言,如:

<html lang="en">

en定义语言为英语;zh-CN定义语言为中文;fr定义为法语

简单来说,定义en就是英文网站(也可以显示中文),定义zh-CN就是中文网站(也可以显示英文)

<3>字符集

在<head>标签内,可以通过<meta>标签的charset属性来规定HTML文档应该使用那些字符编码。

<meta charset="UTF-8">

charset常用的值有:GB2312,BIG5,GBK,UTF-8,其中UTF-8也被称为万国码,基本包含了全世界所有国家需要用到的字符。

<4>HTML常用标签

4.1标题标签<h1> - <h6>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>这是一级标题</h1><h2>这是二级标题</h2><h3>这是三级标题</h3><h4>这是四级标题</h4><h5>这是五级标题</h5><h6>这是六级标题</h6>
</body>
</html>

 

特点:

1.加了标题是文字会变的加粗,字号也会依次变大

2.一个标题独占一行

4.2段落和换行标签——<p>,<br />

在HTML标签中,<p>是用于定义段落的标签

<p> 这是一个段落 </p>

在HTML中,一个段落的文字会从左到右依次排列,直到浏览器

窗口的右端,然后才自动换行,如果希望文本强制换行显示,就需要使用<br />

<br />

案例:体育新闻

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>水花61分伊戈达拉制抢断 西决勇士再胜开拓者总分2-0</h1><h5>数据统计:水花兄弟合砍61分</h5><p>库里22投11中,三分14投4中,发球11罚全中得到37分8篮板8助攻,职业生涯季后赛得分30+次数来到35次,超过哈登排名现役第三位仅次于詹姆斯和杜兰特。</p><p>汤普森22投8中,三分8投3中,罚球4罚全中得到24分5篮板2助攻。伊戈达拉替补出场28分钟,6投4中,三分2投1中,罚球2罚全中得到11分5篮板3助攻2抢断。</p><h5>兄弟对决:小库里给哥哥造成压力</h5><p>小库里在首节替补出场,面对哥哥斯蒂芬-库里的防守,打得游刃有余。他在首节投中2记三分球,帮助开拓者在首节结束时以31-30领先。但小库里在第二节被换下后,开拓者的进攻陷入停滞。</p><p>小库里在第二节出场时间仅有3分多钟,开拓者在这段时间内只得到4分。斯蒂芬-库里在第二节打出一波8-0的攻击波,帮助勇士反超比分。小库里在下半场表现不佳,最终只得到6分。</p></body>
</html> 


4.3文本格式化标签

作用:可以为网页中的文字设置粗体、斜体或下划线等效果。

语义标签说明
加粗   <strong></strong>或<b></b>更推荐用<strong>标签加粗,语义更强烈
倾斜<em></em>或<i></i>更推荐使用<em>标签倾斜,语义更强烈
删除线<del></del>或<s></s>更推荐使用<del>标签删除线,语义更强烈
下划线<ins></ins>或<u></u>更推荐使用<ins>标签下划线,语义更强烈

4.4<div>和<span>标签

<div>和<span>是没有语义的,它们就是一个盒子,用来装内容的。

div是division的缩写,表示分割、分区。span表示跨度、跨距。

特点:

1、<div>标签用来布局,但是现在一行只能放一个<div>,相当于一个大盒子。

2、<span>标签用来布局,一行可以多个<span>,相当于一个小盒子。

http://www.dtcms.com/a/267305.html

相关文章:

  • hono框架绑定cloudflare的d1数据库操作步骤
  • Redis基础的介绍与使用(一)(Redis简介以及Redis下载和安装)
  • Git 版本控制完全指南:从入门到精通
  • 【Halcon】WPF 自定义Halcon显示控件完整流程与 `OnApplyTemplate` 未触发的根本原因解析!
  • Web3 Study Log 003
  • 蓝牙墨水屏上位机学习(3)
  • Java 与 Vue 全栈开发:“一课一得“ 学习笔记系统实战
  • OneCode图表配置速查手册
  • CMake是什么
  • NV183NV185美光固态闪存NV196NV201
  • 供应链管理-采购管理:国际贸易及支付领域中常见的支持方式
  • FLUX.1-Kontext 高效训练 LoRA:释放大语言模型定制化潜能的完整指南
  • 软件版本FCCU(故障采集与控制单元)设计
  • 如何选择不会降低网站速度的WordPress主题
  • 动手实践OpenHands系列学习笔记11:现代开发流程
  • C#指针:解锁内存操作的底层密码
  • DVWA靶场通关笔记-验证码绕过reCAPTCHA(Medium级别)
  • 网安系列【6】之[特殊字符] SQL注入揭秘:从入门到防御实战指南
  • cloudflare配合github搭建免费开源影视LibreTV一个独享视频网站 详细教程
  • React Native 亲切的组件们(函数式组件/class组件)和陌生的样式
  • 百度开源文心一言4.5:论文解读和使用入门
  • 闲庭信步使用SV搭建图像测试平台:第三十二课——系列结篇语
  • 【学习笔记】MySQL技术内幕InnoDB存储引擎——第5章 索引与算法
  • MySQL(118)如何使用SSL进行加密连接?
  • 前端进阶之路-从传统前端到VUE-JS(第三期-VUE-JS配套UI组件的选择)(Element Plus的构建)
  • vscode remote-ssh 拓展免密访问 linux虚拟机
  • 二分查找,乘法口诀表,判断闰年,判断素数,使用函数实现数组操作
  • CSS02:四种CSS导入方式
  • 动手实践OpenHands系列学习笔记7:前端界面设计
  • Flyway 介绍以及与 Spring Boot 集成指南