html基础

已于 2022-09-06 21:00:22 修改
阅读量228 收藏
点赞数
分类专栏： #+ JavaWeb知识 文章标签： html css 前端
于 2022-09-06 21:00:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41995993/article/details/126731530
版权

HTML知识

html概述

  • 概述：
    Hyper Text Markup Language,超文本标记语言,是一种标记语言。包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。html文本是由html命令组成的描述性文本，html命令可以说明文字、图形、视频、声音、表格、链接等。

html书写规范

  • 概述
    html由标签组成
  • 语法

 	<!--
 		开始标签和结束标签名称一样，html文件的后缀是.html或.htm
 		-->
 		<开始标签 属性1=“值1” 属性2=“值2” ...>内容</结束标签>
 		<自关闭标签/>
  • 注意事项
    有一些标签是没有内容的，就可以写成自关闭标签

文件标签

  • 概述
    • 用于组建页面的基本结构（标题，主题）
  • 组成
    • html：用于声明当前文件是一个html文档；
    • head：用于设置页面上的一些参数；
    • title：用于设置页面的标题；
    • body：用于设置页面的内容；
  • 代码案列
<html>
	<head>
		<title>helloword</title>
	</head>
	<body>
		how are you!
	</body>
</html>

标签属性

  • 概述
    • 大多数的标签都有属性，对标签内容进行设置。
  • body标签属性
    • text：规定文档中所有文本的颜色。
    • bgcolor：规定文档的背景颜色。
    • background：规定文档的背景图片。
  • 代码案列
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>标签属性</title>
</head>
<body text="yellow" bgcolor="red" background="img/picture1.jpg>
	你们好呀！
</body>
</html>

颜色取值

  • 分类
    1. 颜色单词；
    2. 颜色的十六进制；
    3. 颜色RGB值；
  1. 颜色单词
<!DOCTYPE thml>
<html lang="en">
<head>
	<meta charseet="UTF-8">
	<title>颜色取值</title>
</head>
<body>
hello everyone!
</body>
</html>
  1. 颜色十六进制值
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>颜色取值</title>
</head>
<body text="blue">
	hello everyone!
</body>
</html>

文本标签之br标签

  • 概述
    • 定义折行
  • 代码案列
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文本标签之br标签</title>
</head>
<body>
春眠不觉晓，处处闻啼鸟。<br>
夜来风雨声，花落知多少。
</body>
</html>

文本标签之p标签

  • 概述
    定义段落。
  • 常用属性
    • align:规定段落中文本的对齐方式。
  • 代码案列
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文本标签之p标签</title>
</head>
<body>
	<p align="center">
	春晓
	</p>
	<p align="center">
		春眠不觉晓，处处闻啼鸟。
	</p>
	<p align="center">
		夜来风雨声，花落知多少。
	</p>
</body>
</html>

文本属性之font标签

  • 概述
    • 定义文字的字体、尺寸和颜色。
  • 常用属性
    • color：规定文本的颜色。
    • face：规定文本的字体。
    • size：规定文本的大小。
  • 代码案列
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文本标签之font标签</title>
</head>
<body>
	<p color="yellow" size="6" face="宋体">
		黄河之水天上来，奔流到海不复回。
	</p>
</body>
</html>

文本标签之标题标签

  • 概述
    <h1> - <h6>标签可定义标题。<h1>定义最大的标题。
    <h6>定义最小的标题。
  • 常用属性
    • 规定标题中文本的排列（center，left，right）
  • 代码案列
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文本标签之标题标签</title>
</head>
<body>
	<h1 align="right">这是标题1</h1>
	<h2 align="left">这是标题2</h2>
	<h3 align="center">这是标题3</h3>
	<h4 align="right">这是标题4</h4>
	<h5 align="left">这是标题5</h5>
	<h6 align="center">这是标题6</h6>
</body>
</html>

img标签

  • 概述
    • 向网页中嵌入一幅图片。
  • 常用属性
    • alt：规定显示错误时替代图像的文本
    • src：规定显示图像的URL。可以是一个本地路径，也可以是一个网络路径。
    • width：规定图像的宽度。
    • height：规定图像的高度。
  • 代码案列
<! DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>img标签</title>
</head>
<body>
	<img src="img/cat1.jpg" width="200px" height="200px" alt="无法显示图片1">
	<img src="img/cat2.jpg" width="300px" height="300px" alt="无法显示图片2">
	
	<img src="图片的网络地址" width="400px" height="400px" alt="无法显示图片3">
</body>
</html>

列表标签

  • 概述
    • ul(unorder list),ol(order list)用于在页面上生成列表
    • 都是由列表（li）组成
  • ul常用属性
    • type：规定列表符号的类型。
  • ol常用属性
    • start：规定列表中的起始点。
    • type：规定列表中符号的类型。
  • li常用属性
    • type
    • number
  • 代码案列
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>列表标签</title>
</head>
<body>
	<!--无序列表-->
	<ul type="square">
		<li>张三</li>
		<li>李四</li>
		<li>王五</li>
		<li>赵六</li>
	</ul>
	<!--有序列表-->
	<ol>
		<li>张三</li>
		<li>李四</li>
		<li>王五</li>
	</ol>
</body>
</html>

超链接标签

  • 概述
    • 用于跳转资源。
  • 常用属性
    • href：链接的目标URL。
    • target：在何处打开目标URL。
  • 代码案列
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>超链接标签</title>
</head>
<body>
	<a href="index.html" target="_blank">点我</a>
	<a href="http://www.baidu.com" target="_blank">百度两下</a>

	<a href="http://www.baidu.com" target="_blank">
		<img src="img/cat1.jpg" width="300px" 
		height="300px" alt="图片无法显示">
	</a>
</body>
</html>

表格标签

  • table标签属性
    • align：规定表格相对周围元素的对齐方式。
    • bgcolor：规定表格背景颜色。
    • border：表格边框的宽度。
    • cellpadding：单元格内边距（边框到内容的距离）。
    • cellspacing：单元格与单元格之间的距离。
    • width：表格的宽度。
    • height：表格的高度。
    • rules：规定内侧边框的那个部分可见的。
  • tr标签属性
    • align：定义表格行的内容对齐方式。
    • bgcolor：规定表格行背景颜色。
    • valign：规定表格行中内容的垂直对齐方式。
  • td标签属性
    • align：定义单元格的内容对齐方式。
    • bgcolor：规定单元格背景颜色。
    • colspan:column span,列合并（水平合并）
    • rowspan:row span,行合并（垂直合并）
    • width：单元格的宽度，可以写具体数值也可以写百分比。
    • height：单元格的高度，可以写具体的数值也可以写百分比。
    • valign：诡诞单元格中内容的垂直对齐方式。
  • 代码案例
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格标签</title>
</head>
<body>
	<table align="center" bgcolor="yellow"
	border="1px" cellpadding="10px"
	cellspacing="0px" width="600px" heitht="600px" rules="all">
		<tr>
			<td colspan="2" width="66%" height="33%">1,2</td>
			<td width="33%" height="33%">3</td>
			
		</tr>
		<tr>
			<td width="33%" height="66%" rowspan="2">4 7</td>
			<td width="66%" height="66%"
			rowspan="2" colspan="2">5 6 8 9</td>
		</tr>
	</table>
</body>

</html>

容器标签

  • div
    • 块级标签，不管标签内容有多少，都会占满一整行。
  • span
    • 行级标签，标签内容有多少，容器就占多少。

表单标签

  • 概述 标签用于为用户输出创建html表单 表单能够包含[input 元素](tag_input.asp.html),比如文本字段、复选框、单选框、提交按钮等等。
  • 代码案列
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单标签基础版</title>
</head>
<body>
	<form action="index.html" method="get"
	enctype="application/x-www-form-urlencoded">
		<table border="1px" width="500px" height="600px" cellpadding="10px" cellspaceing="0px" rules="all" align="center">
		<tr>
			<th colspan="2">
				注册用户
			</th>
			
		</tr>
		<tr>
			<td><label for="username">账户:</label></td>
			<td>
				<input type="text" name="username" id="username" placeholder="请输入账户">
				</td>
				
		</tr>
		<tr>
			<td>
				<label for="password">密码：</label></td>
			</td>
			<input type="password" name="password" id="password" placeholder="请输入密码">
			</td>
		</tr>
		<tr>
			<td>性别：</td>
			<td>
				<input type="radio" name="gender" value="male" checked="checked">男
				<input type="radio" name="gender" value="female">女
			</td>
		</tr>
		<tr>
			<td>籍贯：</td>
			<td>
				<select name="oldhome">
					<option value="WuHan">武汉</option>
					<option value="XiaoGan" selected="selected">孝感</option>
					<option value="XiangYang">襄阳</option>
					<option value="XianTao">仙桃</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>爱好:</td>
			<td>
				<input type="checkbox" name="hobbys" value="sing" checked="checked">唱歌
				<input type="checkbox" name="hobbys" value="jump" checked="checked">跳舞
				<input type="checkbox" name="hobbys" value="ball" checked="checked">打篮球 
			</td>
		</tr>
		<tr>
			<td>头像：</td>
			<td>
				<input type="file" name="headPic">
			</td>
		</tr>
		<tr>
			<td>
				<label for="introduce">简介：</label>
			</td>
			<td>
				<textarea name="introduce" id="introduce" placeholder="100字以内">
				</textarea>
			</td>
		</tr>
		<tr>
			<td colspan="2" align="center">
				<button type="submit">提交</button>
				<button type="reset">重置</button>
			</td>
		</tr>
</body>
</html>
  • 注意事项
    • form表单中表单项必须要有name属性才会携带参数到服务器。
惟手熟尔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML基础练习题
weixin_50108821的博客
09-23 1万+
第一题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嘿嘿嘿</title> </head> <body> <table border="1" cellspacing="0" cellpadding="0"> <tr align="center">
HTML基础知识
12-20
HTML前端网页设计的一些小知识，非常适合初学者学习，
HTML基础知识点
qq_40046544的博客
07-27 8571
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一页，是超文本标记语言格式。它通常是由图片、文字、链接、声音、视频等元素组成。通过网页浏览器访问。HTML指的是超文本标记语言（HyperTextMarkupLanguage），它是用来描述网页的一种语言。web标准也成为网页标准，它是由一系列标准组成，这些标准大部分由W3C负责定制，也有一些标准由其他标准组织制定。绝对路径指目录下的绝对位置，可以直接到达目标位置，通常从盘符开始的路径。例如D从。...
HTML基础标签
weixin_45348240的博客
03-23 6059
一、HTML介绍 1、什么是HTML? HTML是一门语言，所有的网页都是用HTML这门语言编写出来的。HTML(HyperText Markup Language):超文本标记语言。 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。 标记语言：由标签构成的语言 HTML运行在浏览器上，HTML标签由浏览器来解析 HTML标签都是预定义好的。例如:使用< img>展示图片 2、W3C标准:网页主要由三部分组成 结构:HTML 表现:css 行为:
HTML基础
KING_QueeN1的博客
11-02 9723
——————留存自用——————
全网最全HTML基础
a1085653724的博客
04-20 5049
1.HTML结构 认识 HTML 标签 ，HTML 代码是由 "标签" 构成的。 形如: <body>hello</body> (1).标签名(body)放到<>中. (2).大部分标签成对出现,<body>为开始标签,</body>为结束标签. (3).少数标签只有开始标签, 称为 "单标签". (4).开始标签和结束标签之间, 写的是标签的内容.(hello everyone) (5).开始标签中可能会带有 "属性". id
HTML零基础入门教程（详细）
热门推荐
ZONGXP的博客
10-22 22万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
头歌-HTML基础
somewon的博客
03-06 9972
四川师范大学 头歌 web应用开发
HTML基础 - HTML表格
qq_45383769的博客
04-07 1万+
HTML基础 - HTML表格 1.无表头的表格 <table> <tr> <td> <table>标签代表的是表 <tr>标签代表的是行 <td>标签代表的是列 在html页面中的表格来着，就和excl的表格不一样喽，咱自己有自己的规则： 这就是没有表头，也就是最简单的一个表格。（设置了边框为1 ：border= “1”） 2.有表头的表格 <th> <th>表示就是表头了哦，字体是加粗居中显示的
web前端开发（一）—HTML基础
mdxiaohu的博客
07-31 10万+
  目录 web前端简介 什么是HTML？ HTML标签 HTML基本结构 HTML 段落标签 HTML 换行标签 HTML标题 HTML 水平线 HTML注释 HTML 标签 HTML 列表标签 HTML表格 HTML超链接 HTML 图片 HTML表单 表单元素-文本、密码框 表单元素-多行文本框 表单元素-选择框 表单元素-下拉选择框 表单元素-按钮...
HTML基础笔记
02-06
HTML 基础知识笔记HTML 基础知识笔记HTML 基础知识笔记HTML 基础知识笔记
html基础教程
07-22
资源名称：html基础教程内容简介：HTML基础-第一讲HTML基础-第二讲HTML基础第三讲---字体HTML基础第四讲---图像HTML基础第五讲---控制表格及其表项的对齐方式HTML基础第六讲---表格HTML基础第七讲---框架HTML基础第...
Html基础文档
09-13
HTML 免费
Web开发：四角线框效果（HTML、CSS、JavaScript）
最新发布
m0_65029152的博客
07-17 887
本文主要记录前端给图片动态添加四角线框的相关内容和实现过程；
C# Word转换HTML（附在线转换工具）
学习和分享
07-17 981
根据你的具体需求（如是否需要Microsoft Office、性能要求、成本考虑等），你可以选择使用或Aspose.Words来将Word文档转换为HTML。如果你正在寻找一个不依赖于Microsoft Office的解决方案，并且需要更多的灵活性和控制，那么Aspose.Words可能是一个更好的选择。
Html_Css问答集(11)
白话魔法师
07-16 850
html与css学习中的一些疑问，问答中轻松获取知识。
每日60秒新闻早报单页文字版HTML源码
2401_86030425的博客
07-17 271
每日60秒新闻早报单页文字版的，这个很早就有了，最近有用户问我这个怎么实现，其实很简单的只是一个单页而已，这个是PHP版的会将头部图片缓存到本地然后在展示可防止接口信息泄露。
HTML基础：表单标记详解
本章节详细介绍了HTML基础知识中的表单标记，这是网页设计和交互的重要组成部分。HTML (HyperText Markup Language) 是一种描述性标记语言，非编程语言，主要用于构建网页结构和呈现内容。表单标记`<form>`是HTML的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值