HTML常用语法及标签（第一天所学）
2024-06-01 08:44:52
初识html
!DOCTYPE html>
<!-- //文档的类型为：html文本===让浏览器进行读写的 -->
<html lang="en"><!-- 超文本标记语言 -->
<head><!-- 网页的头部 --><meta charset="UTF-8"><!-- 定义字符编码格式 h5遵循的默认编码格式就是UFT-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><!-- 网页主题 --><!-- 1.注释：对代码进行解释说明的，不会在浏览器进行加载显示，只会对程序员起作用 2.快速创建网页的基础结构--><!-- 3.代码的规律：有些代码是成对出现的有些代码是单独出显得标签的书写分类：（1）.双标签<标签的名字 属性="属性值" 属性="属性值" ></标签的名字>(2)单标签<标签的名字 属性="属性值" 属性="属性值">特点：1.所有的标签都需要使用<>2.所有的属性和标签名字之前都需要带空格3.属性和属性值之间使用符号链接4.属性值都需要带引号5.每一组属性和属性值都需要使用空格隔开6.双标签必须带/不带、都行 --></body>
</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>
</head>
<body><!-- 加粗标签作用：对文本进行加粗===使文本更加具有语义化语法：<b>文本</b> <strong>wenben </strong> -->我是一个粉刷匠，粉刷本领强<b> 我是一个粉刷匠，粉刷本领强</b><strong>我是一个粉刷匠，粉刷本领强</strong><!-- 倾斜标签作用：让文本倾斜显示 语法：<i>文本</文本> <em> 文本</em>--> 我是一个粉刷匠，粉刷本领强<i> 我是一个粉刷匠，粉刷本领强</i><em>我是一个粉刷匠，粉刷本领强</em><!-- 下划线标签作用：给文本添加下划线效果语法：<u>文本</u> -->我是一个粉刷匠，粉刷本领强<u> 我是一个粉刷匠，粉刷本领强</u></body>
</html>字体标签
<title>字体标签</title>
</head>
<body><!-- 字体标签==字体修饰标签font==双标签 --><!-- <font size="">文本 </font> size=字体大小size取值1（最小） 7（最大）（3是默认的字体大小）color===颜色文本取值：red green blue字体属性：face目前来看：浏览器里面支持的字体 宋体 隶属 楷书 微软雅黑浏览器默认字体： 宋体 -->学习学习学习<font size="7" color="red" face="宋体">学习学习学习</font></body>
</html>角标和删除线
<title>角标和删除线</title>
</head>
<body><!-- 角标标签上下角标 h2o 2m下角标标签；<sub>数值</sub>>上角标标签；<sup>数值</sup>> -->h<sub>2</sub>o2<sup>m</sup><!-- 删除线文本添加删除线修饰===类似于删除效果双标签=====s/del区别：del更加具有语义化 --><s>不要998</s>，<del>不要98</del>，只要9.8
段落和换行
<title>段落和换行</title>
</head>
<body><!-- 段落标签：双标签--<p>文本</p> 注意事项：p里面只能嵌套对应的文本修饰标签：不能嵌套自己本身，===独立的段落修饰标签
-->
<p>1、Life is full of confusing and disordering Particular time,a particular location,</p>
<p>1、Life is full of confusing and disordering Particular time,a particular location,</p>
<!-- 换行标签：<br> -->
<p>1、Life is full of confusing and disordering Particular time,a particular location, <br>1、Life is full of confusing and disordering Particular time,a particular location,</p>
div和删除线
<title>div和span标签</title>
</head>
<body><!-- div标签盒子元素，块级元素，容器作用：用于区块的划分默认div纵向显示
--><div>我是第一个div</div><div>我是第一个div</div><div>我是第一个div</div><div>我是第一个div</div><!-- 对独立文本的额修饰：如果修饰一大段文本中的一块文本需要使用span单独扩起来然后进行独立起名字修饰如何显示 --><span>我是第一个我是第一个span</span><span>我是第一个我是第一个span</span><span>我是第一个我是第一个span</span><span>我是第一个我是第一个span</span>1根据结构快速创建
<title>根据结构快速创建</title>
</head>
<body><!-- div+tab --><div></div><!-- div*数值+tab *2 --><div></div><div></div><!-- div{文本}+tab --><div>文本</div><!-- div{*数值=tab} *2 --><div>文本</div><div>文本</div><!-- div{文本$}*数值+tab *3--><div>文本1</div><div>文本2</div><div>文本3</div>div>p <div><p></p></div><!-- div>p*2 --><div><p></p><p></p></div><!-- viv*5>div*2 -->
<div><p></p><p></p>
</div>
<div><p></p><p></p>
</div>
<div><p></p><p></p>
</div>
<div><p></p><p></p>
</div>
<div><p></p><p></p>
</div>标签结构嵌套
<title>结构标签嵌套</title>
</head>
<body><!-- 标签结构嵌套一层包裹一层 --><!-- 修饰成加粗或者倾斜 --><b><i>我是来自四川的人</i></b>
列表标签
<title>列表标签</title>
</head>
<body><!-- 列表标签1.有序列表ol>li<ol></ol> 修改序列项显示类型type="1/A/a/i/I"
--><ol type="I"><li>第一部</li><li>第二部</li><li>第三部</li></ol><!-- 2.无序列表:ul>li 默认列表项为黑色的实心圆点修改显示类型 type="disc/circle/square/nonenone(取消列表项)使用频率最高--><!-- ul>li{li里面的内容}*3 --><ul><li>li里面的内容</li><li>li里面的内容</li><li>li里面的内容</li></ul><!-- 3.自定义列表 应用场景：问答列表；图文双排语法结构：双标签dl>dtdd --><dl><dt>图片/问题</dt><dd>图片的解释说明/答案</dd></dl>
文本标题
<title>文本标题标签</title>
</head>
<body><!-- 经常使用在新闻稿件/文章标题论文二级目录、小说目录标签结构：双标签 <h1></h6> 特点：6级标签；h1最大 h6最小 自带加粗 换行效果 --><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>根据今日所学所写作业1
作业2
<title>作业2</title>
</head>
<body><h1>有带颜色的诗</h1><!--h1 最大号字体标题 --><ol type="1"><!-- 序列号为“1” --><li><font color="blue">绿</font>杨烟外晓寒轻，<font color="red">红</font>杏枝头春意闹————宋宋祁《玉楼春》</li><!-- <font>表示就是一段文本 --><li>一道残阳铺水中，半江瑟瑟半江<font color="red">红</font>————唐白居易《暮江吟》</li><li>黄梅时节家家雨.<font color="green">青草</font>池塘处处蛙————宋赵师秀《有约》</li><li>一水护田将<font color="green">绿</font>绕，两山排闼送<font color="green">青</font>来————宋王安石《书湖阴先生壁》</li><li>日出江花<font color="red">红</font>胜火，春来江水<font color="blue">绿</font>如<font color="green">蓝</font>————唐白居易《忆江南》</li><li>等闲识得东风面，万<font color="purple">紫</font>千<font color="red">红</font>总是春————宋朱熹《春日》</li></ol>
</body>
</html>HTML常用语法及标签（第一天所学）相关推荐
- thymeleaf模板html a标签,Thymeleaf常用语法：模板片断
Thymeleaf常用语法:模板片断 系统中的很多页面有很多公共内容,例如菜单.页脚等,这些公共内容可以提取放在一个称为"模板片断"的公共页面里面,其它页面可以引用这个 " ...
- HTML基础之常用标签第一篇：基础标签
上一篇主要聊了一些head标签的内容,而本篇就聊body标签下的标签,而这一部分是页面呈现最重要的部分,毕竟这个标签下的内容是网页最直观的体现.现在聊一些其基本的标签. 全局属性 其实前面说的标签和属 ...
- Markdown通用的常用语法说明
前言 Markdown 是一种轻量级的 标记语言,语法简洁明了.学习容易,还具有其他很多优点,目前被越来越多的人用来写作使用. Markdown具有一系列衍生版本,用于扩展Markdown的功能(如表 ...
- 【融职培训】Web前端学习 第2章 网页重构2 常用的html标签
一.HTML语法 上一节我们已经了解了html和css的基本概念,本节通过上一节的一个例子来说说HTML的语法. 1 <!DOCTYPE html> <!-- 文档声明 --> ...
- 【Markdown常用语法总结】
文章目录 一.Markdown简介 二.Markdown常用语法 2.1 文章目录 2.1.1 TOC方法 2.1.2 手动生成目录 2.2 标题 2.3 段落 2.3.1 首行缩进 2.3.2 字体 ...
- JSP页面中常用四种标签
JSP页面常用四种标签: 1. EL表达式: ${} 2. jstl表达式(sun apache): <%@ taglib prefix="c" uri="htt ...
- 【超用心整理】Markdown常用语法介绍，看这一个就够了
Markdown常用语法介绍 Markdown是一种使用一定的语法将普通的文本转换成HTML标签文本的编辑语言,它的特点是可以使用普通的文本编辑器来编写,只需要按照特定的语法标记就可以得到丰富多样的H ...
- HTML+CSS-----认识标签(第一部分)
语义化,让你的网页更好的被搜索引擎理解 在这一章节我们要开始把网页中常用到的标签一 一向大家介绍,学习这一章节的时候要记住学习html标签过程中,主要注意两个方面的学习:标签的用途.标签在浏览器中的默 ...
- .md即markdown文件常用语法
参阅cmd版官网:markdown 参考博文:Markdown语法介绍(详细) 1.标题 使用#符号包起来,符号和内容中间空格可省略,尾部#号可省略.依次1~6级标题,对应html中的h1~6标签 = ...
- 【Java WEB-001】使用JSTL步骤+常用的核心标签
JSTL是一个不断完善的开放源代码的JSP标签库,他是由APAche的jakrta小组来维护的.他提供4个主要的标签库,包括核心标签库.国际化与格式化标签库.SQL标签库和XML标签库. jar的下载 ...
最新文章
- 绝悟之后再超神，腾讯30篇论文入选AI顶会ACL
- Linux Centos7 命令总结
- linux删除libc.so.6
- python中print的本质_Python基础语法全解
- ORACLE相关的SHELL编程
- 实现非父子之间通信，兄弟组件之间的数据传递--eventBus
- python怎么接收udp报文_面试官：说说UDP和TCP的区别及应用场景
- OMG Network与安全多方计算提供商Enya达成合作
- C#设计模式之十一享元模式（Flyweight Pattern）【结构型】
- Mybatis 图解
- linux下vim的安装与配置（centos）
- python-绘制双轴柱状图
- BZOJ1036[ZJOI2008] 树的统计
- 互联网日报 | 1月10日 星期日 | 小米之家千店同开；蔚来发布首款旗舰轿车ET7；LVMH完成收购Tiffany...
- Java8 根据身份证号获取年龄
- 联想小新 Air 13 (Pro) 6,7代笔记本安装Win7系统
- 惠普笔记本按开机键后电源灯亮的，但是屏幕一直是黑的，只有大写锁定键闪烁，闪3次一个循环，听得到风扇...
- 带你科学了解NAD是什么？NAD+是什么东西？
- 逆向学习路线（推荐书籍）
- MySQL忘记root密码解决方案