第一次web前端学习笔记

学习目标:

学习掌握web前端开发

学习内容:

  1. 掌握行级标签
  2. 掌握列表标签
  3. 掌握图片标签
  4. 掌握超链接标签
  5. 掌握表格标签

学习时间:

2020年12月27日

学习产出:

1、 技术笔记 1遍 2、CSDN 技术博客 1篇 3、 网页制作作业两份

课堂笔记

行级、列表、图片以及超链接标签

<!-- 
 <!DOCTYPE html> 声明此html版本为html5
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> html4的声明格式
 -->
<!DOCTYPE html>
<html>
	<!--
		head头部标签:声明网站的标题以及元数据  所有的元数据都是以meta标签开头的
	 -->
	<head>
		<!-- 处理网页的乱码问题:设置统一的编码格式 -->
		<meta charset="utf-8">
		<!-- 设置网站的标题 -->
		<title>这是我的第一个网页</title>
		<style type="text/css">
			/* li列表统一设置为蓝色背景色 */
			li{
				background: deepskyblue;
			}
		</style>
	</head>
	<body>
		<!-- 锚点,name为名字,下次可以跳转到这个名字,href为超链接,本语句中跳转到锚点botton -->
		<a name="top" href="#botton">回到底部</a><br>
		<!-- 在html当中标签是可以嵌套标签的 -->
		<!-- 
			1,行级标签:默认会占用一行
		-->
		<!-- 标题标签 
			在html中标题使用h#来表示,h1~h6分别表示1~6六级标题
		-->
		<h1>一级标题</h1>
		<!--
			p:段落标签:段落标签页属于行级别标签,当前行填充满的情况下会默认换行。
		 -->
		<p style="width: 200;height: 100;background-color: yellow;color: red;">这是一个p标签</p>
		<!-- &nbsp是空格,如果多个空格折叠后实际上只显示一个空格位 -->
		<p>空格的&nbsp;&nbsp;&nbsp;使用</p>
		<div>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		</div>
		<!--
			块元素:div  默认占一行  
					块元素当中是可以包含行级元素。
		 -->
		 
		 <div  style="background: red;">
		 	我是box1
			<p>我在div当中嵌套</p>
			<p>我在div当中嵌套</p>
			<p>我在div当中嵌套</p>
		 </div>
		 
		 <div  style="background: blue;">
		 	我是box2
			</div>
		<!-- 
			列表:有序列表无序列表,列表没有列表项是无意义的,列表的实际大小由列表项去撑开的
				  列表其实是一个块元素(行级块元素,其中的内容都是由内部定义的内容去撑开的,列表,div等等)
		 -->
		<!-- ul是无序列表 -->
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
		<!-- ol是有有序列表 -->
		<ol>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ol>
		<!-- 列表中可以相互穿插-->
		<ol>
			<li>1</li>
			 <ul>
			 	<li>1.1</li>
				<li>1.2</li>
				<li>1.3</li>
			 </ul>
			<li>2</li>
			<ul>
				<li>2.1</li>
				<li>2.2</li>
				<li>2.3</li>
			</ul>
			<li>3</li>
			<ul>
				<li>3.1</li>
				<li>3.2</li>
				<li>3.3</li>
			</ul>
		</ol>
		<!--
			行内元素
			常用的行内元素有哪些:span,i 斜体,u 下划线,strong 加粗,img 图片标签 
			span没有特殊的一个含义:作用就是就是将某些文字作为一个行内块元素使用
			br标签可以用来换行
		 -->
		 <p>
			 <span ><b>陕西省</b></span><i>汉中市</i><br><strong>东一环路</strong><u>一号</u>
		 </p>
		 <!-- img图片标签
		 			常用属性:src:给定图片的路径,路径分为绝对路径和相对路径
		
		 						绝对路径:从计算机的根目录开始向下查找的某一个文件下的某一个资源:D:/file/1.png,如果资源存在那么一定可以
		 								 找到该资源。
		 						相对路径:使用一个参照物,来定位某一个资源		 
		 						
		 					 alt:对图片的描述,通常图片正常显示的情况下alt不显示
		 					 
		 					 在hubilider当中直接访问本地的资源是访问不到的,因为hubuilder回将本地的根文件夹作为一个web应用程序来处理
		 					 需要制定ip和端口号
		 -->
		 <img src="http://127.0.0.1:8848/web/img/1.jpg"></img>
		 <!-- alt是错误后显示在图片位置的东西
		 <img src="../web/img/3.jpg"  alt="美女图片">-->
		 
		 <!-- 
		 它本身包含一级上级目录,找到它的上级目录吗,上级目录和和图片文件夹处于同级
			<img src="../img/image/4.jpg" >
			本身包含多级上级目录,定位到最顶级文件目录,再参照图片文件夹进入
		 -->
			<img src="../img/image/2.jpg" >
			<!-- 调用网站的图片链接 -->
			<img class="logo58 customization_elements" src="//img.58cdn.com.cn/git/teg-app-fe/passport-pc/img/logo.png">
			<!-- 超链接
				a 标签表示超链接标签
					href:给定超链接跳转的位置、如果没有指定跳转方式默认是在当前窗口打开目标
					target:目标
					跳转到其他网页:<a href="demo01.html">demo02</a>  
			 -->
			<a href="https://www.baidu.com" >百度</a>
			<a href="https://www.taobao.com" target="_blank" >淘宝</a><br>
			
		<!-- 超链接跳转顶部 -->
		<a name="botton" href="#top">回到顶部</a>
	</body>
</html>

表格学习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组学习</title>
	</head>
	<body>
		<!--
			表格:使用一对table标签
				tr:行
				td:列
				border:线宽
				width:宽度
				hegith:高度
				algin:对齐方式
				rowspan:跨行
				colspan:跨列
				cellpadding:单元格的内边距
				cellspacing:单元格之间的距离
		 -->
		 <!-- 内外边距都为5,高200宽400,对齐方式为右对齐的表格-->
		 <table border="" cellspacing="5" cellpadding="5"  width="400px" height="200px" align="right">
		 	<tr>
		 				<td>第一行第一列</td>
		 				<td>第一行第二列</td>
		 			</tr>
		 			<tr>
		 				<td>第二行第一列</td>
		 				<td>第二行第二列</td>
		 			</tr>
		 			<tr>
		 				<td>第三行第一列</td>
		 				<td>第三行第二列</td>
		 			</tr>
		 </table>
		 <!-- 
		   aa跨列合并占两行  
		  <td rowspan="2">aa</td> 
		  -->
		  <!-- 
		   aa跨列合并占两行
		  <td colspan="2">aa</td>-->
		  
		  <!-- 表头-->
		  <table border="" cellspacing="" cellpadding="">
		  			 <!-- 表头-->
		  	<thead>
		  				<tr>
		  					<th>编号</th>
		  					<th>名称</th>
		  					<th>金额</th>
		  				</tr>
		  			</thead>
		  			<tbody style="color: red;">
		  				<tr><td>001</td><td>鼠标</td><td>50</td></tr>
		  				<tr><td>002</td><td>键盘</td><td>150</td></tr>
		  			</tbody>
		  			<!-- 表尾 -->
		  			<tfoot>
		  				<tr><td colspan="2">合计</td><td>200</td></tr>
		  			</tfoot>
		  </table>
	</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值