HTML最详细的教程

最新推荐文章于 2023-09-06 08:30:00 发布

凉水沏茶

最新推荐文章于 2023-09-06 08:30:00 发布

阅读量148

点赞数

分类专栏：代码安全基础文章标签： html

本文链接：https://blog.csdn.net/weixin_45486362/article/details/105514081

版权

代码安全基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.各元素都是一种标记或者标签
2.单标签格式<名称/>,双标签<名称></名称>
3.对大小写不敏感

基本结构：

文字内容文字内容

<html>
	<head>
		<title>文字内容</title>
	</head>
	<body>';
`基础标签：
	<br/>		//换行    ---用在末尾
	<p></p>		//段落    ---也能换行，行间距比上一个大
	<h#></h#>	//文章标题	也有换行的作用；#代表1-6，数字越大，字号越小
	备注，title是网页标题，最多只有6级标签
	<center></center>	//居中		body之内，可以段落居中，整体居中
	<hr/>		//水平线		--可以单独占一行
	<font></font>	//文字样式	--包含想要改变文字的部分
	备注：改颜色：<font color="blue">;改大小<font size="1">;改字体<font face="宋体">
		同时改<font color="" size="" face="">``

实例：
<html>
	<head>
		<title>文字内容</title>
	</head>
	<body>
	   静夜思
	床前明月光
	疑似地上霜
	举头望明月
	低头思故乡

	</body>
</html>

HTML图片
	1.需要相应的图片文件
	2.用<img/>表示图片元素
	3.显示图片用<img/>调用文件
实例：
<html>
	<head>
		<title>图片</title>
	</head>
	<body>
	<img src="" width="300" height=""/>
		备注：宽度和高度单位都是像素,图片上面的标题是需要鼠标悬停在图片上才可以看见
			图片的alt文字在网页找不到，只有当图片文件出错误的时候才可以被替换--看见alt文字

	</body>
</html>

img标签的属性：
	src		//图片路径
		备注：网页和图片同一层级直接写图片名称，不在同一层级，可以写相对路径(和linux的差不多)和绝对路径
	width		//宽度
	height		//高度
	title		//标题
	alt		//替换文本

HTML超链接：
	1.超链接用<a></a>标签标识
	2.通过herf属性指定目标
		例如：
			<a herf=""> </a>	
				备注：“”里的内容是网页文件的相对或绝对路径
					也可以是带有http的完整链接！
			<a></a>之间必须有内容才有点击跳转到效果
	类型：
		内部链接：
			跳转同一网站的不同页面跳转
		外部链接：
			不同网站的跳转
		锚点连接：
			同一个页面不同位置的跳转
				例如：返回顶部
					内容最下方加标签：
						<a herf="#a1">(开始标签，给标签添加参数id)">返回顶部</a>
HTML表单：
	常用元素：
		<form></form>		//表单
		<input type="text"/>	//单行文本框
		<input type="password"/>	//密码框
		<input type="radio"/>	//单选按钮 ----跟在选项后面，属性name，name同则为一组
			如：男<input type="radio" name=1/>女<input type="radio" name=1/>
		<input type="checkbox"/>	//多选按钮     -----name同理
			如：旅游<input type="checkbox" name="in"/> 
			健身<input type="checkbox" name="in"/> 
			影视<input type="checkbox" name="in"/> 
			游戏<input type="checkbox" name="in"/> 
			阅读<input type="checkbox" name="in"/>
		<textarea></textarea>	//多行文本框
		<input type="submit"/>	//提交按钮
		<input type="reset"/>	//重置按钮
	备注：&nbsp表示空格
	
	需要在表单上添加属性，添加表单提交后就会发生跳转：
		<form action="*.html">
	注意：每个表单项都要命名，点击提交跳转后页面url会提示是否提交成功,
		同一组的利用value进行不同项的区分
实例：
<html>
	<head>
	<title><tltle/>
	<head/>
	<body>
		<form action="222.html">
		用户名：<input type="text" name="usr"/></br>
		&nbsp;&nbsp;&nbsp;密码：<input type="password" name="pwd" /></br>
		性别：男<input type="radio" name="sex" value="1"/>女<input type="radio" name="sex" value="2"/>
		爱好：<br/>
			旅游<input type="checkbox" name="in" value="1"/> 
			健身<input type="checkbox" name="in" value="2"/> 
			影视<input type="checkbox" name="in" value="3"/> 
			游戏<input type="checkbox" name="in" value="4"/> 
			阅读<input type="checkbox" name="in" value="5"/>
		<br/>
		个人简介：<br/>
		<textarea name="info"></textarea>
		<br/>
		<input type="submit">
		<input type="reset">
</html>```javascript
;

凉水沏茶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML最详细的教程

1.各元素都是一种标记或者标签2.单标签格式<名称/>,双标签<名称></名称>3.对大小写不敏感基本结构：文字内容文字内容 <html> <head> <title>文字内容</title> </head> <body>';`基础标签： &...
复制链接

扫一扫