HTML网页前端培训笔记

1. 安装编程工具HBuilderX
学习html我选择HBuilderX工具。进入HBuliderX官网:https://dcloud.io/hbuilderx.html
在这里插入图片描述

点击DOWNLOAD,选择Windows标准版下载解压即可
在这里插入图片描述
2.html常用标签(直接上代码)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>常用标签</title>
	</head>
	<body>
		<!--
		    标题标签
			  h1~h6大小依次递减
			  尽量减少使用h1标签
			  会自动换行
			  块级元素
			  -->
		<h1>标题1</h1>
		<h2>标题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长度
			  -->
		<hr>
		<hr color="red" size="3" align="left">
		
		
		<!--
			列表
			  有序列表
			  <ol><li></li></ol>
			  无序列表
			  <ul><li></li></ul>
			  -->
		<ul type="square">
			<li>周杰伦</li>
			<li>林俊杰</li>
			<li>陈奕迅</li>
		</ul>

		<ol type="square">
			<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</span>
		<hr>
		<!--
		  格式化标签
			  font标签
			  color字体颜色
			  size字体尺寸
			  face字体风格
			pre
		  预格式化标签,保留空格和换行	  
			  -->
		<font size="5" color="blue" face="楷体">你好</font>
<pre>
Hello
world
</pre>


<!--
		a标签
		  超链接标签,用于连接到一个新的url
		  常用属性:
		    href:需要跳转的地址(必须属性)
			target:窗口打开的方式
			_self:当前窗口
			_blank:在空白窗口
		  作为锚点:
		     a标签的name属性值
			   <a name="top"></a>
			 其他的id属性值
			 <div id="top"></div>
			 锚点的使用:
			    <a href="#top"></a>
			-->
			<!--
  img标签
    向网页中嵌入一张图标
	
	常用属性:
	src:需要引入的图片地址(必须属性)
	alt:当图片破损或不存在时,显示文本的内容
	title:当鼠标悬停在图片时显示的文本
	width:图片的宽度
	height:图片的高度
	border:图片边框
	-->
	<img src="img/百度图标.png" width="500"height="200"border="2" title="百度"alt="破损">
	
<!--
表格标签
  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">
		<td>1</td>
		<td>张三</td>
		<td>18</td>
	</tr>
	<tr align="center">
		<td>2</td>
		<td>李四</td>
		<td>19</td>
	</tr>
	<tr align="center">
		<td>3</td>
		<td>王五</td>
		<td>20</td>
	</tr>
</table>
	</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值