首页 > 其他分享 >HTML简单学习

HTML简单学习

时间:2023-07-17 21:01:42浏览次数:26  
标签:span 标签 元素 标题 学习 HTML 简单 div

介绍:如果你想让你的网页在浏览器中正常显示,你就必须遵循HTML标签

HTML文件的后缀名是.html

HTML文档介绍:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title> # 标签顶部显示的内容
</head>
<body>

</body>
</html>

# head标签一般写的不是让用户看的
# body标签一般写什么内容,浏览器中就能够看到什么内容,给用户看的

body中常用的标签

基本标签
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<p>段落标签</p>

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

换行标签:<br>

水平线标签:<hr>

标签的分类一

块儿级元素
	# 独占一行,不管自身有多大,他自己就占一行
	h1标题标签都是
	p标签
	hr标签


行内元素(内联元素)
	# 自身文本有多大就占多大,不会独占一行
	<b>加粗</b>
	<i>斜体</i>
	<u>下划线</u>
	<s>删除</s>

标签的分类二

双标签
 <b>加粗</b>
 <i>斜体</i>
 <u>下划线</u>
 <s>删除</s>
 h1标题标签都是
 p标签
 a标签

单标签
hr标签
br标签
img标签

特殊字符(实体符号)

内容	对应代码
空格	&nbsp;
>	 &gt;
<	 &lt;
&	 &amp;
¥	 &yen;
版权	&copy;
注册	&reg;

div标签和span标签

div标签
span标签
这两个标签没有实际的意义,一般用来'布局'使用

div它是块儿级元素,给页面占布局
span标签是行内元素,用来给文本内容占布局

标签的嵌套

# 我们使用亲戚关系来表示标签之间的关系
<div>  #div标签是p标签的父标签
	<p>  #p标签是div标签的儿子,是span标签的父标签
		<span></span>  #span标签是p的儿子,是div的孙子
	</p>
<p></p>  # p标签是div标签的儿子,是p标签的兄弟,也是span的兄弟标签

<span></span>
</div>

"""
	注释事项:
		块级儿级元素能够嵌套所有的行内元素,块儿级元素也能够嵌套所有的块儿级元素,但是出了p标签之外
		行内元素不能够嵌套块儿级元素,但是可以嵌套所有的行内元素
"""

# 前端里面一般不会轻易的报错!!!!!!!!,你写的代码不正确不规范,没有效果而已,但是不会报错.
# 前端是跟用户打交道的,不能随随便便的报错,要不然体验很差

标签:span,标签,元素,标题,学习,HTML,简单,div
From: https://www.cnblogs.com/yexinli/p/17561208.html

相关文章

  • HTML入门-----常用标签之水平线标签
    水平线标签<hr/><!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title></title> </head> <body> <hr/> 张学友 <br/> 周杰伦 </body>......
  • HTML入门-----常用标签之字体样式标签
    字体样式标签可以改变字体的样式加粗:<strong></strong>,<b></b>斜体:<em></em>,<i></i>示例:<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title></title>......
  • HTML入门-----常见标签之注释和特殊符号
    注释和特殊符号空格:&nbsp大于号(>):&gt小于号(<):&lt引号("):&quot版权符号©:&copy!......
  • HTML入门-----初识html
    HTML简介:是一种超文本标记语言。网页的组成:骨架:HTML表现层:CSS行为层:JavaScript网页的基本结构:<html> <!---网页头部---> <head> <title>网页标题</title> </head> <!---网页的主体---> <body> 网页主体 </body></html><html>…</......
  • HTML入门---常用标签之标题标签
    .标题标签h1~h6自动换行,自动加粗,数值越小字越大。示例:<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title></title> </head> <body> <h1>标题</h1> <h2>标题</h2> <h3>标题</h3......
  • 软件测试从零基础到高级测试学习技术
    软件测试从零基础到高级测试学习技术1.基础知识:-深入理解软件开发生命周期(SDLC)的不同阶段,如需求分析、设计、编码、测试和维护。-学习各种测试方法和技术,如静态测试、动态测试、回归测试和探索性测试等。-掌握测试文档的编写规范和最佳实践,如测试计划、测试用例规范......
  • 1. 前端简单介绍
    前端定义#所有与用户直接打交道的都可以称之为是前端.------>能够直接使用肉眼直接看到的都是前端举例:PC端页面、手机端页面、平板页面、车载显示器等前端学习内容"""前端三剑客"""HTML:一个网站的骨架,没有任何的样式CSS:就是给网页添加样式的,目的是让其更加的美观、好看、......
  • c语言学习5
    进制转换:1、为什么使用二进制、八进制、十六进制?因为目前的CPU只能识别高低两种电平,只能对二进制数据进行计算二进制虽然能够直接被计算机识别,但是不方便人去书写和记录,因此就把二进制数据转换成八进制,方便记录到文档中随着CPU的位数的不断增加,已经到目前的64位,所以八进制不再......
  • Java从零基础到架构师再到运维的学习路线
    Java从零基础到架构师再到运维的学习路线1.Java基础知识:-Java语法和基本数据类型-面向对象编程概念:类、对象、继承、封装、多态等-流程控制和循环:条件语句、循环语句-异常处理:异常类型、try-catch-finally块-集合框架:-数组:一维数组和多维数组,数组的操......
  • Spring框架中的设计模式(重点学习!!!)
    Spring中的设计模式Spring框架中用到的设计模式有很多,以下是一些常见的设计模式:依赖注入(DI)和控制反转(IoC):这是Spring框架最核心的设计模式,它允许开发人员将对象之间的依赖关系从代码中抽离出来,由Spring容器负责管理和注入对象之间的依赖关系。工厂模式:Spring框架中的BeanFactor......