HTML部分基础语法

沧哑

已于 2022-02-14 14:35:01 修改

阅读量243

点赞数 1

文章标签： html 前端

于 2022-02-14 00:01:01 首次发布

本文链接：https://blog.csdn.net/qq_44831808/article/details/122914833

版权

HTML概述

HTML 指的是超文本标记语言 (HyperText Markup Language)。

超文本:是指页面内可以包含图片、链接、声音,视频等内容

标记:标签(通过标记符号来告诉浏览器网页内容该如何显示)

利用HTML语言把我们需要的内容显示到网页上去，但是HTML并不显示。

HTML声明

html4的文档声明

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

html5的文档声明

<!DOCTYPE html> 如果不声明解析网页时会产生一些不可预期的行为，所以我们应该避免出现。

HTML基本语法

(1). html中所有的内容都包含在了<html1>所有内容</html1>当中,该标签为网页的跟标签，标记语言必须有一个跟标签

<!DOCTYPE html><!-- 声明html语句 -->
<html><!-- 其他所有语句都包含在这个标签中 即头部部分和主体部分-->
	<head>
	</head>
	<body>
	</body>
</html>

(2). Head标签(标签)包含了所有的头部标签标签。

<title>标签可定义网页的标题

<!DOCTYPE html><!-- 声明html语句 -->
<html><!-- 其他所有语句都包含在这个标签中 -->
	<head>
		<meta charset="utf-8">
        <title>一起来学html</title><!-- 为网页添加名称 -->
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html><!-- 声明html语句 -->
<html><!-- 其他所有语句都包含在这个标签中 -->
	<head>
		<meta charset="utf-8">
        <link href="img/hao123.png" rel="icon" /><!-- 将hao123图标添加进入标题处 -->
	</head>
	<body>
	</body>
</html>

一个html基本结构如下图所示：

(3). HTML注释： 注释后的内容不会显示在网页上

(4). 标签与标签属性

标签：HTML使用标记标签来描述网页。

结构：分为两种,

闭合标签 ( 有标签内容 ): <标签名 > 标签内容 </ 标签名 >

自闭合标签 ( 无标签内容 ): <标签名 />

标签属性：标签可以拥有属性。属性进一步说明了该标签的显示或使用特性。如：<body text=”red”>

属性的格式：属性名 = “ 属性值 “

属性的位置： <标签名属性名 = “ 属性值 “ >xxx</ 标签名 >

添加多个属性： <标签名属性名 = “ 属性值 “ 属性名 = “ 属性值 “ >xxx </ 标签名 >

基本常用标签

标题标签 <h1></h1>…..<h6></h6>可使用align = "center/right"属性使其居中，居右，默认为局左

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	
	
	<body>
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
	</body>
</html>

段落标签 <p></p>，段落标签不加其他标签的话，网页文字不会识别其他特殊符号，如换行等。

换行标签 <br/>若需要换行操作则需要换行标签来进行，如下图所示。

列表

无序列表 <ul><li></li></ul>前面没有序号，有一个默认图标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	
	
	<body>

	<ul>
				<li><a >第一章</a></li>
				<li><a >第二章</a></li>
				<li><a >第三章</a></li>
				<li><a >第四章</a></li>
				<li><a >第五章</a></li>
				<li><a >第六章</a></li>
			</ul>
	</body>
</html>

有序列表<ol><li></li></ol>列表前默认有序号，也可以使用type加属性来添加其他例如：type="A"

超链接 <a></a>使用规定按钮来进行网页转换或其他功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<a href="https://www.baidu.com/" target="_blank">百度</a><!-- href="需要打开的地址，必须要有"，target= "_blank"表示在新的页面打开，百度两字为按钮 -->
	</body>
</html>

● 图像标签 <img/>使用img在网页中插入图片，只是引用图片地址

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<img src= "../img/peach.jpg"/><!-- src中保存的是图片地址 -->
	</body>
</html>

使用超链接标签来制作锚点，此处案例是点击某个章节直接到达该章节所在位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
	
	<body  bgcolor="bisque">
		<h1 align="right">斗破苍穹</h1>
		<ul>
			<li><a href = "#第一章">第一章</a></li>
			<li><a href = "#第二章">第二章</a></li>
			<li><a href = "#第三章">第三章</a></li>


		</ul>
		<h3 align="center"><a name = "第一章">第一章 林动</a></h3>2
		<p>“唔。”<br/>
           当林动费尽所有的力气睁开那有些沉重的眼皮时，简陋而整洁的房间顿时出现在眼中，熟悉的 
           一幕让得他愣了愣，
           旋即连忙转头，果然是见到，在那房中，一男一女两道身影正坐在桌旁。<br/>
           “爹，娘……”<br/>
        </p>
      <br/>
      <br/>
      <br/>
         <h3 align="center"><a name = "第二章">第二章 通背拳</a></h3>
		 <p>清晨，大雾笼罩着这座僻静的山峰，白蒙蒙的，让人的视线，都是变得模糊了起来。<br/>
            “呼……呼……”<br/>
              在山顶后山的一片密林之中，突然间有着一种极为激烈的喘息声传出，视线拉近，只见得在 
             那林间的一处空地上，
              一道短小的身影，双手正挂在一根粗壮的树干上，小小的身体借助着手臂的拉扯之力，不断 
             的上下起伏着，而且在起伏间，
               他的身体呈现一个有些怪异的姿势，这种姿势，更是让得浑身的肌肉，都是一起的运动了 
                  起来。
                   </p>
				   
				   <br/>
				   <br/>
           <br/>
         <h3 align="center"><a name="第三章">第三章 石符</a></h3>
				  <p>
					  “出声了！”<br/>
					  空地上，林动怔怔的望着拳头，小脸上涌现难以掩饰的欣喜之色，不过抬起头来 
                   时，却是见到林啸慢吞吞的身影已是走出了树林。<br/>
					  “嘿嘿，明天再给爹看看，让他惊喜一下。”见状，林动一咧嘴，突然感到手臂上 
               传来阵阵疼痛，急忙撸起袖子，
 					  却是发现其手臂上布满着一道道血红的印子，甚至还有着一些地方皮层都是被搽 
                  掉，鲜血不断地渗透而出。
				  </p>
	
				  <h3 align="center"><a name="第四章">第四章 通背拳</a></h3>
			
				  <h3 align="center"><a name="第五章">第五章 通背拳</a></h3>
				
	</body>
</html>

<! -- 超链接标签定位地址，点击超链接标签直接跳转到所对应的地址处-->

<! -- 地址标签-->

<h3 align="center"><a name = "第十章">第一章林动</a></h3>

特殊符号转义

在HTML中预留了一些字符。这些预留字符是不能在网页中直接使用的。

比如< 和 >,我们不能直接在页面中使用< 和 >号，因为浏览器会将它解析为html签。<b> 会被解析为b标签，空格,再多的空格都会当一个空格处理。为了可以使用这些预留字符，我们必须在html中使用字符转义。

小于号< ：&It

版权(C) ：&copy

大于号> ：&gt

商标(TM) ：&trade

空格： &nbsp

注册商标(R) ：&reg

表格（<table></table>）

表格的基本构成标签有

table标签：表格标签

tr 标签：表格中的行

th 标签 : 表格的表头，表格中的数据都必须放在单元格中，表头内容居中加粗

td 标签：表格单元格

表格的一些基本属性：Border：边框属性。 border="数字"；

background ：设置背景图像。 background="图片位置"；

bgcolor : 设置背景颜色。 bgcolor= "颜色"，可以在任意标签中

bordercolor ：设置边框颜色。 bordercolor = "颜色"

width，height ：设置表格，单元格长，宽。 width= "数字" height ="数字"

cellpadding ：设置内容到边框的距离。 cellpadding ="数字"

cellspacing ：设置单元格之间的距离，默认为两个像素。cellspacing ="数字"

单元格合并：colspan属性：跨列合并，即合并同一行的单元格，colspan= "数字"

rowspan属性：跨行合并，即合并同一列的单元格，rowspan= "数字"

合并后的单元格一个可以代表多个单元格，即在某一行或者某一列无需在写其他的单元格

表单<form></form>

网页上的表单有许多可以输或选的组件，用户可以在表单中输入信息，最终将表单数据提交到服务器上。

内联框<iframe></iframe>

沧哑

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML部分基础语法

HTML概述HTML 指的是超文本标记语言 (HyperText Markup Language)。超文本:是指页面内可以包含图片、链接、声音,视频等内容标记:标签(通过标记符号来告诉浏览器网页内容该如何显示)利用HTML语言把我们需要的内容显示到网页上去，但是HTML并不显示。HTML声明html4的文档声明 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transit...
复制链接

扫一扫