网页前端第一次培训-HTML常用标签

最新推荐文章于 2024-07-18 15:48:23 发布

Hacker liu

最新推荐文章于 2024-07-18 15:48:23 发布

阅读量592

点赞数

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/weixin_63710451/article/details/122775767

版权

1.学习网址：

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

2.笔记注释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用标签</title>
	</head>
	<body>
		<a href="https://so.lenovo.com.cn/" target="_blank">百度</a>
		 <!--
		 	标题标签
		 		h1~h6 大小依次递减
		 		尽量减少h1标签的使用
		 		块级元素
		  -->
		<h1>标题1</h1>
		<h2 id="bt2">标题2</h2>
		<h3>标题3</h3>
		<h4>标题4</h4>
		<h5>标题5</h5>
		<h6>标题6</h6>
		<!-- 
			段落标签
				p标签，会自动换行
				块级元素
		 -->
		<p>段落1</p>
		<p>段落2</p>
		<!-- 
			换行标签
			br 单标签
			<br> <br/>
		 -->
		hello<br>
		world
		<!-- 
			水平线标签
				hr 单标签
				常用属性
					color
					size
					width（百分比或px）
		 -->
		<hr>
		<hr color="red" size="5" width="50%" align="left">
		<!-- 
				列表
					有序列表
						<ol><li><li></ol>
					无序列表
						<ul><li></li></ul>
		 -->
		<ul type="square">
			<li>周杰伦</li>
			<li>陈奕迅</li>
			<li>林俊杰</li>
		</ul>
		<ol type="1"> 
			<li>周杰伦</li>
			<li>陈奕迅</li>
			<li>林俊杰</li>
		</ol>
		<!-- 
			div标签
				块级元素
				默认占全部宽度 有多少内容高度占多少
				可以设置div的宽（width）高（height）
				通过align设置内容对齐方式
		 -->
		<div style="width: 500px;height: 100px;" align="center">div</div>
		<!-- 
			span标签
				行内元素(不会自动换行)
		 -->
		<span>这是一个span<br></span>
		<!-- 
			格式化标签
				font标签
					color 字体颜色
					size 字体尺寸
					face 字体风格
				pre标签
					预格式化标签 保留空格和换行
				b 加粗
				i 倾斜
				u 下划线
				del 中划线
				sup 上标
				sub 下标
		 -->
		<font color="green" size="7" face="楷体">你好啊！</font>
		<br>
		<pre>
			Hello world!
		</pre>
		<p><b>以后</b>的你会<i>感谢</i>现在<u>努力的</u><del>自己</del></p>
		H<sub>2</sub>O 
		2<sup>3</sup><br>
		
		<!-- 
			a标签
				超链接标签 用于链接到一个新的URL
				常用属性
					href 需要跳转的地址（必须属性）
					target：窗口打开方式
						_self:当前窗口（默认）
						_blank:在空白窗口打开
				作为锚点：
					a标签的name属性值
						<a name="top"></a>
					其他的id属性值
						<div id="top"></div>
					锚点的使用：
						<a href="#top"></a>
				
		 -->
		<a href="#">回到顶部</a>
		<a href="#bt2">标题2</a>
		<br>
		
		<!-- 
			img标签
				向网页中嵌入一张图标
				
				常用属性：
					src:需要引入的图片的地址（必须属性）
					alt:当图片破损或不存在时，显示文本的内容
					title:当鼠标悬停在图片上时显示的文本
					width:图片的宽度
					height:图片的高度
					border:图片边框
					
					
		 -->
		<img src="img/tx.jpg" title="点击放大"  width="200px" height="200px" border="3" alt="头像" />
		<br>
		<hr color="red"/>
		<!-- 
			表格标签
				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="aqua">
				<td>1</td>
				<td>张三</td>
				<td>22</td>
			</tr>
			<tr align="center">
				<td>2</td>
				<td>李四</td>
				<td>21</td>
			</tr>
			<tr align="center">
				<td>3</td>
				<td>王二麻子</td>
				<td>25</td>
			</tr>
		</table>
	</body>
</html>