HTML

已于 2023-10-08 22:57:32 修改
阅读量43 收藏 1
点赞数 1
文章标签： html css 前端
于 2023-10-01 14:52:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63917870/article/details/133141846
版权

目录

1、HTML概述 

2、HTML基本语法

3、HTML中的标签

3.1、标签

3.2、标签属性

3.3、常用标签

3.3.1、标题

3.3.2、段落

3.3.3、链接

3.3.4、图片

3.3.5、列表 

3.3.6、表格

3.3.7、表单

3.3.7、实体

1、HTML概述 

HTML指的是超文本标记语言 (HyperText Markup Language)。是一种用来描述网页的一种语言，是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等，并可以将之存为文本文件，浏览器中可读取和显示。

  • HTML是一种标记语言，不是编程语言
  • HTML是一套用标记标签来描述网页
  • HTML中包含HTML标签以及文本内容
  • HTML文档也叫做web页面

2、HTML基本语法

新建index.html文本：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <link  rel="icon" href="img/baidu.ico"/>
	</head>
	<body>

    </body>
</html>

对其中内容进行说明:

  • <!DOCTYPE html> 是HTML文档的声明
  • <html> 是HTML页面的根元素
  • <head> 中包含文档的元(metea)数据
  • <meta> 标签可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新
    频度的描述和关键词，例如：<meta charset="utf-8">定义网页编码格式为  utf-8（由于在大部分浏览器中直接输出中文会出现乱码，所以要在头部将字符声明为UTF-8 ）
  • <title> 标签可定义 网页的标题
  • <link  rel="icon" href="img/baidu.ico"/> 是在标题处添加图标

3、HTML中的标签

3.1、标签

  • HTML中的标记指的就是标签。
  • HTML使用标记标签来描述网页。

结构：

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

3.2、标签属性

标签可以拥有属性，属性进一步说明了该标签的显示或使用特征

3.3、常用标签

3.3.1、标题

HTML标题标签是通过<h1></h1>…..<h6></h6>定义，字体逐级减小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>1级标签</h1>
		<h2>2级标签</h2>
		<h3>3级标签</h3>
		<h4>4级标签</h4>
		<h5>5级标签</h5>
		<h6>6级标签</h6>
	</body>
</html>

3.3.2、段落

HTML段落标签是通过<p></p>定义，可自动换行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>段落1</p>
		<p>段落2</p>
		<p>段落3</p>
	</body>
</html>

3.3.3、链接

HTML链接标签是通过<a href = "">定义，href = “” 双引号中填写网页链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="网页链接地址"></a>
	</body>
</html>

3.3.4、图片

HTNL图片标签通过<img src="" width="" height=""定义，src = "地址"双引号为图片地址，width="宽度" height="高度" border= "边框"为标签的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="图片地址" alt = "替换文本" width="宽度属性" height="高度属性" border= ” 1 ”>
	</body>
</html>

3.3.5、列表 

有序列表：通过<ol></ol>标签定义，其中type = "a"中可以填写序号类型（具体为“1”,"A","I","i","a"")

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ol  type = "A">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ol>
	</body>
</html>

无序列表：通过<ul></ul>标签定义

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

3.3.6、表格

HTML表格是用<table>标签来定义的

  • table标签：表格标签
  • tr标签：表格中的行
  • th标签：表格的表头
  • td标签：表格单元格

HTML 表格的属性

  • width 设置单元格宽度
  • height 设置单元格高度
  • cellspacing 设置单元格与单元格之间的距离
  • cellpadding 设置单元格的内边距，内容与边框的距离
  • align 设置单元格中文本的水平位置(lift 默认  ; center 居中 ; right 水平位置)
  • valign 设置单元格中文本的垂直位置(top  顶部  ; middle 默认 ; botton 垂直位置)
  • cospan 跨行合并
  • rowspan 跨列合并 
  • border 设置表格边框 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" cellspacing = "0" cellpading = "0" width = "500" style="background-color: ;" align="center">
			<tr>
				<th>项目</td>
				<th colspan="5" align="center">上课</th>
				<th colspan="2" align="center">休息</th>
			</tr>
			<tr align="center" style="background-color: pink;">
				<th>星期</th>
				<th>星期一</th>
				<th>星期二</th>
				<th>星期三</th>
				<th>星期四</th>
				<th>星期五</th>
				<th>星期六</th>
				<th>星期日</th>
			</tr>
			<tr align="center">
				<th rowspan="4">上午</th>
				<td>语文</td>
				<td>数学</td>
				<td>英语</td>
				<td>英语</td>
				<td>物理</td>
				<td>计算机</td>
				<td rowspan="4">休息</td>
			</tr>
			<tr align="center">
				<td>数学</td>
				<td>数学</td>
				<td>地理</td>
				<td>化学</td>
				<td>历史</td>
				<td>计算机</td>
			</tr>
			<tr align="center">
				<td>语文</td>
				<td>数学</td>
				<td>历史</td>
				<td>计算机</td>
				<td>物理</td>
				<td>化学</td>
			</tr>
			<tr align="center">
				<td>数学</td>
				<td>数学</td>
				<td>地理</td>
				<td>化学</td>
				<td>历史</td>
				<td>计算机</td>
			</tr>
			<tr align="center">
				<th rowspan="2">下午</th>
				<td>数学</td>
				<td>数学</td>
				<td>地理</td>
				<td>化学</td>
				<td>历史</td>
				<td>计算机</td>
				<td rowspan="2">休息</td>
			</tr>
			<tr align="center">
				<td>数学</td>
				<td>数学</td>
				<td>地理</td>
				<td>化学</td>
				<td>历史</td>
				<td>计算机</td>
			</tr>
		</table>
	</body>
</html>

3.3.7、表单

HTML表单是用<form>标签定义的，它提供可以选择或输入的组件，让用户将数据信息提供到数据库

HTML表单的属性

  • action="" 后端程序的地址
  • method="get" http请求方式
  • <input type = "text"> 单行文本框
  • <input type = "textarea> 多行文本框
  • <input type = "password"> 密码框
  • name="userName"   提交的键
  • value="" 提交的值
  • placeholder="" 提示信息
  • readonly = "readonly" 只读，还可以提交数据
  • disabled = "disabled" 禁用，不可以提交数据
  • <type="radio">  单选框 （name 值相同为一组，才可以实现单选组件，需要提供固定的value）
  • <input type="checkbox"> 多选框
  • <input type="file" textarea cols="30" role="5" >文本域
  • <select><option></option> </select> 下拉框
  • <input type=“reset” value=“ 重填 ”> 重置表单内容（按钮）
  • <input type=“submit” value=“ 提交 ” > 提交表单内容到服务器（按钮）
  • <input type=“button” value=“按钮 ” > 普通按钮没有功能，只能被点击触发事件用（按钮）

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="" method="get">
			<img src="img/logo.gif" />
			<img src="img/reg.gif" />
			<br />
			姓名 : <input type="text" name="usernme" value="" /><br /><br />

			登录名 : <input type="text" name="username" value="" />(可包含a-z、0-9和下划线)<br /><br />

			密码 : <input type="password" name="password" />{至少包含6个字符}<br /><br />

			确认密码 : <input type="password" name="password" /><br /><br />

			性别 : <input type="radio" name="gender" value="男" />
			<img src="img/Male.gif" />男
			<input type="radio" name="gender" value="女" />
			<img src="img/Female.gif" />女<br /><br />

			爱好 : <input type="checkbox" name="happy" />运动
			<input type="checkbox" name="happy" />聊天
			<input type="checkbox" name="happy" />玩游戏<br /><br />

			职业 : <select name="occupation">
				<option value="程序员">程序员</option>
				<option value="工程师">工程师</option>
				<option value="宇航员">宇航员</option>
				<option value="教师">教师</option>
			</select><br /><br />

			阅读淘宝网服务协议 <br />
			<textarea cols="100"
				rows="7">欢迎您与各淘宝平台经营者（详见定义条款）共同签署本《淘宝平台服务协议》（下称“本协议”）并使用淘宝平台服务！
		
		本协议为《淘宝服务协议》修订版本，自本协议发布之日起，淘宝平台各处所称“淘宝服务协议”均指本协议。
		
		各服务条款前所列索引关键词仅为帮助您理解该条款表达的主旨之用，不影响或限制本协议条款的含义或解释。为维护您自身权益，建议您仔细阅读各条款具体表述。
		
		【审慎阅读】您在申请注册流程中点击同意本协议之前，应当认真阅读本协议。请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款、法律适用和争议解决条款。免除或者限制责任的条款将以粗体下划线标识，您应重点阅读。如您对协议有任何疑问，可向淘宝平台客服咨询。
		
		【签约动作】当您按照注册页面提示填写信息、阅读并同意本协议且完成全部注册程序后，即表示您已充分阅读、理解并接受本协议的全部内容，并与淘宝达成一致，成为淘宝平台“用户”。阅读本协议的过程中，如果您不同意本协议或其中任何条款约定，您应立即停止注册程序。欢迎您与各淘宝平台经营者（详见定义条款）共同签署本《淘宝平台服务协议》（下称“本协议”）并使用淘宝平台服务！
		
		本协议为《淘宝服务协议》修订版本，自本协议发布之日起，淘宝平台各处所称“淘宝服务协议”均指本协议。
		
		各服务条款前所列索引关键词仅为帮助您理解该条款表达的主旨之用，不影响或限制本协议条款的含义或解释。为维护您自身权益，建议您仔细阅读各条款具体表述。
		
		【审慎阅读】您在申请注册流程中点击同意本协议之前，应当认真阅读本协议。请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款、法律适用和争议解决条款。免除或者限制责任的条款将以粗体下划线标识，您应重点阅读。如您对协议有任何疑问，可向淘宝平台客服咨询。
		
		【签约动作】当您按照注册页面提示填写信息、阅读并同意本协议且完成全部注册程序后，即表示您已充分阅读、理解并接受本协议的全部内容，并与淘宝达成一致，成为淘宝平台“用户”。阅读本协议的过程中，如果您不同意本协议或其中任何条款约定，您应立即停止注册程序。</textarea>
			<br />
			<input type="checkbox">已阅读条款
			<br />
			<input type="reset" value="重 填" />
			<input type="submit" value="提交注册信息" />
		</form>L
	</body>
</html>

 

3.3.7、实体

&lt; 等同于 <
&gt; 等同于 >
&#169; 等同于 ©

Loser_。
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML星空特效
兔子王
06-19 1万+
100行代码实现HTML星空特效。
HTML期末设计——代码篇
greengirl5的博客
06-22 13万+
事先声明 这个网页设计也就是用了我学到的知识做的一个中规中矩的网页，可以给以后的大一新生们做个参考，和商业网站的效果肯定是没得比的，期望太高的可以关掉了 引入页 效果图： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>欢迎来到香氛密语</title> <style>
HTML入门与进阶以及HTML5
热门推荐
wuyxinu的博客
12-12 37万+
目录 一、简介 1、前端开发最核心技术 （1）HTML是什么？ （2）CSS （3）JavaScript 2、前端开发其他技术 二、基础内容 1.基础总结 2.HTML的基本标签 (1)HTML标签 (2)head标签 (3)body标签 3、段落与文字 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、块元素和行内元素 (五)、练...
制作一个简单HTML个人网页网页（HTML+CSS）
weixin_46153254的博客
12-04 35万+
制作一个简单的HTML个人网页
HTML零基础入门教程（详细）
ZONGXP的博客
10-22 21万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
使用HTML制作一个简单的个人主页
indulgexiaomei的博客
10-09 20万+
此网页我对html有了一个简单，初步的认识后制作的一个网页，主要目的是练习html的一些简单操作，由于时间关系，有很多做的不好，细节处理不到位的地方。 废话不多说，先来看效果 1、首页 这一个网页就是进行了网页背景、背景音乐、段落的处理、水平线以及超链接的简单练习。 2、我的相册 这一页主要是对大量图片进行一个排版的练习 3、我的计划 这一页主要是对文本有序无序以及表格内部的背景颜色等等的练习 4、我的家乡 这一部分是对段落、还有文本与图片结合的练习 5、我的故事 这个是对表格进阶版的练习，文字
圣诞树代码 html
m0_73309780的博客
12-04 6万+
圣诞树 html
HTML超链接
m0_48289363的博客
04-09 2万+
超链接，外部链接，内部链接，空链接，下载链接，网页元素链接，锚点链接
【方法】HTML网页调用本地Python程序
crazyang的博客
05-07 18万+
代码已上传github 首先声明，在HTML中调用本地Python程序是十分不推荐的，一是因为网页调用本地程序的权限正在被取消，二是因为真不如JS写直接，三是只能在自己本地调用。 但如果你要用，像我一样，需要在课堂上进行一个Python代码的展示，并且想要一个好看的UI界面的话，可以这样来做，做起来还是很容易的，但这样的展示仅限于需要弹框的，比如我的人脸检测是弹窗式，如果需要内嵌在网页内...
HTML表格（HTML 表格的使用，收藏这一篇就够了）
weixin_47139649的博客
10-15 6万+
HTML基础之表格 文章目录HTML基础之表格1. 表格的定义2. 表格的标签3. 单元格边框(border)4. 合并单元格4.1 合并行单元格(colspan)4.2 合并列单元格(rowspan)5. 表格格式设置5.1 单元格的对齐（align）（居中，左对齐，右对齐）5.2. 背景色&图片（bgcolor & background）5.2.1 单元格背景色&图片5.2.2 表格背景色&图片5.3 单元格的边距（cellpadding）5.4 单元格间的距离(cel
一套后台管理html模版
08-04
【标题】：“一套后台管理html模版” 这套后台管理HTML模板是专为构建高效、功能丰富的后台管理系统界面设计的。HTML模版是前端开发的基础，它定义了网页的结构和样式，使得开发者能够快速搭建出美观且易于操作的...
HTML动态爱心代码爱心满屏
11-07
HTML动态爱心代码满屏爱心免费下载
网上订餐系统模板html源码
06-11
网上订餐系统模板HTML源码是一个用于构建在线订餐平台的前端资源，它包含了实现基本功能所需的HTML文件。由于描述中提到该源码是静态的，这意味着它不包含任何服务器端代码或与数据库的交互，因此它主要用于展示界面...
纯HTML网页源码
11-02
HTML，全称HyperText Markup Language，即超文本标记语言，是构建互联网页面的基础。它是一种标记语言，通过一系列标签来描述网页的结构和内容。"纯HTML网页源码"指的是只包含HTML代码，不依赖其他如JavaScript、CSS...
爱心代码 李峋同款爱心等免费下载 exe、py、html格式
11-12
【标题】"爱心代码 李峋同款爱心等免费下载 exe、py、html格式" 提供了一组与编程相关的资源，这些资源包含了不同格式的爱心图案实现，包括可执行文件（exe）、Python脚本（py）以及HTML页面（html）。这暗示我们...
【HTML】-解决页面内容无法选择、复制问题
最新发布
宣晨光
07-06 151
1、使用【Simple AllowCopy】 插件 2、移除CSS样式webkit-user-select: none; user-select: none;
html之内联样式
abments的博客
07-02 422
内联样式（inline styles）是在HTML元素的style属性中直接定义的CSS样式。与外部样式表或内部样式表不同，内联样式仅应用于特定的HTML元素。使用内联样式时，可以在HTML标签中直接添加样式，而无需通过外部或内部的CSS文件引用样式规则。
HTML CSS 基础复习笔记 - 表格标签使用
forevercui的博客
07-03 380
web复习笔记
nodejs md文件转html
C or CPP
07-03 178
我直接读取md文件转换结果有误，第1行本应是标题1却变成了段落。文件内容跟上面字符串完全一样。后来打印二进制才知道从文件读取的前面多了些东西，原因是文件用了UTF8 BOM编码，最后改成UTF8编码问题解决。
html
05-29
HTML（Hypertext Markup Language）是一种用于创建网页的标记语言。HTML 由各种元素（tags）和属性（attributes）组成，这些元素和属性可以用来定义网页的结构和内容。 HTML 元素通常由一个开始标记和一个结束标记...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值