网页前端第一次培训笔记

最新推荐文章于 2024-11-10 22:45:39 发布

Fps-caigou

最新推荐文章于 2024-11-10 22:45:39 发布

阅读量926

点赞数

文章标签：前端 javascript html5

本文链接：https://blog.csdn.net/ILWEHnever/article/details/122778498

版权

本文详细介绍了HTML的基本标签如h1-h6，段落p，换行br，水平线hr，以及列表ul、div、span等元素的使用。此外，还涵盖了CSS样式设置、预格式化文字pre，超链接a，图片img，表格table等内容，是新手前端必备的基础教程。

摘要由CSDN通过智能技术生成

软件：HBuilderX

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

HTML的常用标签

        <!--
			标题标签
				h1-h6 大小依次递减
		-->
		<h1>标题1</h1>
		<h2>标题2</h2>
		<h3>标题3</h3>
		
		<!--
			段落标签
				p标签，会自动换行
		-->
		<p>这是一个段落</p>
		<p>这是一个段落</p>
		
		<!--
			换行标签
				br
		-->
		Hello <br>
		world
		
		<!--
			水平线标签
				hr 单标签
				常用元素
					color
					size
					width / px
					align 对齐方式
		-->
		<hr>
		<hr color="crimson" size="3" width="50%" align="left">
		
		<!--
			列表
				有序列表
				无序列表
		-->
		<ul type="square">
			<li>周杰伦</li>
			<li>林俊杰</li>
			<li>陈奕迅</li>
		</ul>
		
		<!--
			div标签
			默认占全部的宽度，有多少内容占多少高度
			可以设置width 和 height
		-->
		<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        World
		<pre>
			Hello        Wodld
		</pre>
		
		<!--
			a 标签
				超链接标签，用于连接到一个新的url
				常用属性：
					href:需要跳转的地址 (必须属性)
					target:窗口打开的方式
						_self:当前窗口
						_blan:在空白窗口
				作为锚点：
					a标签的name属性值
						<a name= "top"></a>
					其他的id属性值
						<div id="top"></div>
					锚点的使用
						<a href= "#top"><a>
		-->
		<a href="http://wwww.baidu.com" target="_blank">百度</a>
		
		<!--
			img
				像网页中嵌入一张图片
				常用属性：
					src：需要引入的图片地址(必须属性)
					alt：当图片破损或不存在时，显示文本的内容
					title：当鼠标悬停在图片上时显示的文本
					width
					heigh
					border
		-->
		<img src="img/logo.png"/>
		<hr />
		<!--
			表格标签
				table 表格
				tr 行
				td 标准单元格
				th 表头(字体居中，加粗效果)
				
				table的属性
					width 表格的宽度
					border 边框
					align 对齐方式
				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>
		</table>