网页前端培训笔记（HTML标签）

ᴍᴀɢɪ

已于 2022-02-07 00:18:46 修改

阅读量757

点赞数

分类专栏：网页前端培训笔记文章标签：前端 html

于 2022-02-03 20:12:25 首次发布

本文链接：https://blog.csdn.net/qq_61175638/article/details/122778173

版权

网页前端培训笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

学习网址：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili

HTML 教程 | 菜鸟教程 (runoob.com)

1、安装编译器

HBuilder X：https://download1.dcloud.net.cn/download/HBuilderX.3.3.10.20220124.zip

2、基础操作

注意选择普通项目，使用基本HTML项目模板较为方便

3、HTML基本框架

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

4、网页前端常用标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<h2>标题</h2>
		<p>段落</p>
		<br> 换行
		<!--
			水平线标签
				hr 单标签
				常用属性
					color 颜色
					size 粗细
					width 长度（百分比 或 px）
		-->
		<hr>
		<hr color="red" size="3" width="50%" align="left">
		
		<!-- 
			列表
				有序列表 ol
				无序列表 ul
				-->
		<ul type="squre">
			<li>林俊杰</li>
			<li>周杰伦</li>
		</ul>	
			
		<ol type="A">
			<li>林俊杰</li>
			<li>周杰伦</li>
		</ol>	
			
		<!-- 
			div标签
				块级元素
				默认占全部的宽度，有多少内容高度占多少
				可以设置div的宽（width）高（height）
				通过align设置内容对齐方式
		-->
		<div style="width: 500px;height: 100px;" align="center">这是一个div</div>
		<!-- 
			span标签
				行内元素（不会自动换行）
				-->
		<span>这是一个span</span>
		<hr>
		<!-- 
			格式化标签
				font标签
					color 字体颜色
					size 字体尺寸
					face 字体风格
				pre
					预格式化标签，保留空格和换行
				b 加粗
				i 倾斜
				u 下划线
				del 中划线
				sup 上标
				sub 下标
				
		-->
		<font color="aqua" size="5" face="楷体">你好</font><br>
		hello &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;word
		<pre>hellow             word</pre>
		
		<p><b>以后</b>的<strong>你</strong>会感谢<del>现在</del>努力的自己</p>
		
		
		<!-- 
			a标签
				超链接标签，用于链接到一个新的URL
				常用属性：
					href：需要跳转的地址（必须属性）
					target：窗口打开的方式
						_self：当前窗口（默认）
						_blank：在空白窗口
				作为锚点：
					a标签的name属性值
						<a name="top"></a>
					其他的id属性值
						<div id="top"></a>
					锚点的使用：
						<a href="#top"></a>
		-->
		<a href="#" target="_self">在当前页面刷一下</a>
		<hr>
		<a href="#">回到顶部</a>
		
		<h2 id="yyjl">演绎经历</h2>
		<!--  -->
		<a href="#yyjl">回到 演绎经历</a><br>
		
		<a name="yyjl">演绎的经历</a><br>
		<!--  -->
		<a href="#yyjl">回到 演绎的经历</a><br>
		<!-- 
			img标签
				向网页中嵌入一张图标
				
				常用属性
					src：需要引入图片的地址（必须属性）
					alt：当图片破损或不存在时，显示文本的内容
					title：当鼠标悬停在图片上时显示的文本
					width：图片的宽
					height：高
					border：图片边框
		 -->
		 <img src="img/bd.jpg" width="500" height="400" border="2" title="文字" alt="这是一张坏掉的图"/>
		 <hr>
		 <!-- 
			表格标签
				table 表格
				tr 行
				td 标准单元格
				th 表头（字体居中，加粗效果）
				
				table的属性
					width 表格的宽度
					border 边框
					align 对齐方式
					style="border-collapse: collapse;" 合并表格的边框
				
				tr的属性
					align  行的内容对齐方式
		  -->
		  <table width="400px" align="center" border="1" style="border-collapse: collapse;">
			  <tr>
				  <th>编号</th>
				  <th>姓名</th>
				  <th>年龄</th>
			  </tr>
			  <tr align="center" bgcolor="bisque">
				  <td>1</td>
				  <td>张三</td>
				  <td>18</td>
			  </tr>
			  <tr>
			  	  <td>2</td>
			  	  <td>李四</td>
			  	  <td>19</td>
			  </tr>
			  <tr>
			  	  <td>3</td>
			  	  <td>王五</td>
			  	  <td>20</td>
			  </tr>
		  </table>
		  
		  
		  
	</body>
</html>

5、表单标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
			form标签
				表单标签，块级元素，会自动换行
				将数据传输给服务器
				
				常用属性：
					action  表单提交的地址
					id      唯一标识
					name    名称
					target  表单提交打开方式（当前窗口）
					method  提交方式
							get请求
								参数会直接跟在url后面，用问号拼接
								安全性差，传递的数据量小，效率高（是post速度的2倍），有缓存
							post请求
								参数不跟在url后，会放在请求体中
								安全性高，传输数据量大，速度相对较慢，无缓存					
		 -->
		 
		 <form action="http://www.baidu.com
		 
		 " method="get" id="myform">
			<!-- 
				表单元素要设置name属性值，否则数据无法传递！！！
				input元素
					type   表单元素的类型
						text  文本框
						password  密码框
						radio  单选框（需要设置一组相同的name属性值）
						checkbox  复选框（需要设置一组相同的name属性值）
						button  普通按钮
						hidden  隐藏域（用来存放需要传递给服务器，但不需要显示的数据）
						file  文件域（上传文件）
						date  日期框
						submit  提交按钮
						reset  重置按钮
						image  图片按钮（提交按钮）
					value  表单元素的值
					checkd  是否选中（单选框/复选框）
					disabled  是否禁用
					maxlength  允许输入的最大字符
			
				textare文本域
					cols 和 rows
				label标签
					设置label标签的for属性值与表单元素的id属性值对应，当点击label标签时，会自动给表单元素聚焦
				button按钮
					type
						button普通按钮
						submit提交按钮（默认值）
						reset重置按钮
				select下拉选项
					<select name="">
						<option value="值">文本</option>
					</select>
					
					常用属性：
						value 设置值
						selected 设置选中状态
			-->
			编号：<input type="hidden" name="userId" value="1" /> <br>
			姓名：<input type="text" value="zhangsan" name="userName" /> <br>
			<label for="upow">密码</label>：<input type="password" id="upow" name="userPwd" maxlength="6" /> <br>
			性别：男 <input type="radio" name="userSex" value="man" checked="checked" /> 
				   女 <input type="radio" name="userSex" value="woman" /> <br>	
			爱好：唱歌<input type="checkbox" name="userhobby" value="sing" /> 
				跳舞<input type="checkbox" name="userhobby" value="dance" checkd /> 
				说唱<input type="checkbox" name="userhobby" value="rap" disabled="disabled /"> <br>
			生日：<input type="date" name="userDate" /> <br>
			头像：<input type="file" name="userDate" /> <br>
			简介：<textarea name="remark" rows="5" cols="50">11111</textarea><br>
			城市：
				<select name="city" multiple="multiple" size="3">
					<option>请选择城市</option>
					<option value="Beijing" selected="selected">北京</option>
					<option value="Shanghai" >上海</option>
					<option>深圳</option>
				</select>
				<br>
			  <input type="button" value="普通按钮" /> 
			  <input type="reset" value="重置按钮" /> 
			  <input type="submit" value="提交按钮" /> 
			  <!-- <input type="image" src="img/bd.jpg" /> -->
			  <button type="button">"普通按钮"</button>
			  <button type="submit">"提交按钮"</button>
			  <button type="reset">"重置按钮"</button>
		 </form>
	</body>
</html>

6、常用字符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
			字符字体
				<        &lt
				>        &gt
				空格     &nbsp
				版权符   &copy
		 -->
		 &lt;&gt;&nbsp;&nbsp;&nbsp;&nbsp;&copy;
	</body>
</html>

ᴍᴀɢɪ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页前端培训笔记（HTML标签）

学习网址：一、【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili二、二、HTML 教程 | 菜鸟教程 (runoob.com)1、安装编译器HBuilder X2、基础操作注意选择普通项目，使用基本HTML项目模板较为方便3、HTML基本框架<!DOCTYPE html><html> <head> <meta charset="utf...
复制链接

扫一扫

专栏目录