前端实训之——前端基础

最新推荐文章于 2024-03-11 00:32:31 发布
最新推荐文章于 2024-03-11 00:32:31 发布
阅读量559 收藏 1
点赞数 2
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45174301/article/details/121633495
版权
本文介绍了HTML的基础知识，包括HTML的定义、网页组成、HTML标签的使用，以及表格结构化标签的应用。通过实例展示了如何创建课程表，强调了语义化和结构化的网页设计原则。
摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、HTML是什么？

超文本标记语言（Hyper Text Markup Language）
不是编程语言、是标记语言，通常使用标签来展示
含义：超出了文本、也可以通过超链接跳转到其他文件

二，什么是网页

网页通常由图片、链接、文字、声音、视频等多种元素组成，网页文件通常以.html为
后缀，因此俗称html文件

网站是指在因特网上根据一定的规则，使用多种语言制作的用于展示特定内容的网页集合
网页是其中的一页，通常是html格式的文件，通过浏览器阅读

 

二、使用步骤

1.结构（HTML）

1、基本语法：
由尖括号包围的关键词，如<html>
html标签通常是成对出现的，称为双标签（开始标签、结束标签）
有些标签是单个的 <br/> 称为单标签

2、标签关系
包含关系和并列关系

3、<!DOCTYPE>
文档类型声明抱歉，作用就是告诉浏览器用哪一种html版本来显示（html4、html5、xml）
使用html5显示文件

4、lang="en"
语言种类
en-英语
zh-CN 中文
5、charset
字符集，用于计算机识别和存储文字
GB2312(简体中文)
BIG5(繁体中文)
GBK(包含简体和繁体，国标)
UTF-8（万国码）
为了防止乱码，一般使用UTF-8
6、常用标签
标签是有语义的，方便学习
根据标签的语义，在合适的地方使用合适的标签，可以是网页结构清晰
标题标签：h1~h6(head)，依据重要性依次降低


7、div和span标签、没有语义
就是盒子、用于装内容

8、图像标签和路径
<img src="图像url"/>
src是图像标签的必须属性，指定图像的路径和文件名

 

 9、表格标签
主要作用：展示数据
基本语法：
<table>
    <tr>
        <td></td>
    </tr>
</table>
table表示表格
tr定义行
td定义单元格

10、表格结构化标签：
<thead></thead>和<tbody></tbody>
用于语义化表格

11、合并单元格
1、rowspan="合并的单元格数量"
2、colspan="合并的单元格数量"等
 

2.思维导图：

实例

运用所学知识制作课程表，代码如下：

<!DOCTYPE html>


 

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title> 18160029</title>

</head>

<body>

    <h1 style="background-color:rgb(253, 6, 6);">叶红鱼</h1>

    <h2 style="background-color:Orange;">叶红鱼</h2>

    <h3 style="background-color:Violet;">叶红鱼</h3>

    <p>叶红鱼 <br>天下三痴之道痴，年轻一代最强战力。<br>道门天下行走叶苏的妹妹<br>原为西陵神殿裁决司大司座<br>后成为裁决大神官。</p>





 

</body>

<table border="1" align="2" align="center" cellspacing="10" cellpadding="10">

    <thead>

        <tr>

            <th>项目</th>

            <th colspan="5">上课</th>

            <th colspan="2">休息</th>

        </tr>

    </thead>

    <thead>

        <tr>

            <td>星期</td>

            <td>星期一</td>

            <td>星期二</td>

            <td>星期三</td>

            <td>星期四</td>

            <td>星期五</td>

            <td>星期六</td>

            <td>星期日</td>

        </tr>

        <tr>

            <td rowspan="4">上午</td>

            <td>语文</td>

            <td>数学</td>

            <td>英语</td>

            <td>英语</td>

            <td>物理</td>

            <td>计算机</td>

            <td rowspan="4">休息</td>

        </tr>

        <tr>

            <td>数学</td>

            <td>数学</td>

            <td>地理</td>

            <td>历史</td>

            <td>化学</td>

            <td>计算机</td>

        </tr>

        <tr>

            <td>化学</td>

            <td>语文</td>

            <td>体育</td>

            <td>计算机</td>

            <td>英语</td>

            <td>计算机</td>

        </tr>

        <tr>

            <td>政治</td>

            <td>英语</td>

            <td>体育</td>

            <td>历史</td>

            <td>地理</td>

            <td>计算机</td>

        </tr>



 

        <tr>

            <td rowspan="2">下午</td>

            <td>语文</td>

            <td>数学</td>

            <td>英语</td>

            <td>物理</td>

            <td>计算机</td>

            <td>英语</td>

            <td rowspan="2">休息</td>

        </tr>

        <tr>

            <td>数学</td>

            <td>数学</td>

            <td>地理</td>

            <td>历史</td>

            <td>化学</td>

            <td>计算机</td>

        </tr>

    </thead>


 

</table>

</body>

</html>

 

 

运行结果：
 

 
 


                

        

        

    

  


    

      

        

            

              
                
                  智商欠费不死也废i
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
前端实训

				
			

			

				

					ustrivelife的博客
				

				

					11-14
					
					578
					
				

			

		

		

			
				
前端实训后续
一、重要含义

建立原则：做布局只考虑布局 做内容只考虑内容。
内容：布局外的统称为内容：文字、图片、音视频等。
标签 对布局和内容选择合适的标签，至关重要。
交互：多是在动画、特效、事件、及数据绑定，渲染等方面展开的内容。
基本布局学习：工  口、国。而一般大布局： 大页面框架多用工，T,I口。
注册界面、登陆界面：国字型。
设计模式：自适应：解决界面完整性的可视问题 主动。
响应...

			
		

	



                

              
                



	

		

			

				
					
web前端实训

				
			

			

				

					weixin_37543460的博客
				

				

					07-23
					
					5557
					
				

			

		

		

			
				
HTML 学习总结 
display：inline-block  用法与区别



div{
width:100%;
margin:0 atuo
}
div居中



div{
text-align:center;
}
内容居中

float的用法float

			
		

	



                


  
              

                


	

		

			

				
					
【前端】实训笔记

				
			

			

				

					qq_36149079的博客
				

				

					05-26
					
					262
					
				

			

		

		

			
				
html5

列表

使用场景：多个相似结果

分类：有序、无序、自定义

无序



有序







span和p的区别

p标签是块元素，span标签行元素，行内元素即和其他行内元素排成一行，宽度随着内容变化而变化



元素的分类

行内[内联]元素（不独占一行，w、h无效,marging上下无效）
<span><a><em><input><img>

块级元素（会独占一行，所有的css都有效）
<div><p&gt..

			
		

	





	

		

			

				
					
微信小程序项目实训--慕尚花坊学习笔记（2）

				
			

			

				

					2202_75830286的博客
				

				

					03-11
					
					538
					
				

			

		

		

			
				
在miniprogram中创建components文件夹，并在其创建goods-card和goods-list文件夹。6.在goods-list.scss中编写商品区域总体样式。1.注册goods-card和goods-list组件。3.在goods-list.wxml中进行商品介绍编写。2.在goods-card.json中注册引用组件。5.在goods-list.html中编写商品区域。1.配置app.json文件，并配置页面路径。2.在banner.scss中设置轮播图样式。中引入当前组件路径。

			
		

	



		

			
		



	

		

			

				
					
Web前端开发实训项目源代码

				
			

			

				

					01-24
				

			

		

		

			
				
用bootstrap做的一个校园前端实训项目，有很强的参考价值。

			
		

	





	

		

			

				
					
山东女子学院Web前端期末实训——火车票销售系统.zip

				
			

			

				

					01-17
				

			

		

		

			
				
毕业设计是高等教育阶段学生在完成学业前所进行的一项...总的来说，毕业设计是高等教育中的一项重要环节，通过此过程，学生不仅能够巩固所学知识，还能培养独立思考和解决问题的能力，为将来的职业发展奠定坚实的基础。

			
		

	





	

		

			

				
					
《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf

				
			

			

				

					06-10
				

			

		

		

			
				
根据提供的文件内容，我们可以整理出以下Web前端设计基础的知识点：  1. HTML5、CSS3、JavaScript概述  - HTML5是最新版本的超文本标记语言，用于创建网页的标准标记语言。它具有更快的访问速度、更好的搜索引擎优化...

			
		

	





	

		

			

				
					
在校实训项目——模拟药房管理JavaWeb.zip

					
最新发布

				
			

			

				

					07-24
				

			

		

		

			
				
可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】：项目具有较高的学习借鉴价值，也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现...

			
		

	





	

		

			

				
					
2018年暑期实训总结——彭丹婷1

				
			

			

				

					08-08
				

			

		

		

			
				
【标题】：2018年暑期实训总结——彭丹婷1  【描述】：这份实训总结主要涉及的是2018年暑期彭丹婷在计算机学院软件工程专业进行的一次实训项目，该项目是基于Laravel框架的热点新闻发布及后台管理系统设计与开发，...

			
		

	





	

		

			

				
					
前端实训-----终篇

				
			

			

				

					qq_45174301的博客
				

				

					12-10
					
					257
					
				

			

		

		

			
				
实训终篇

			
		

	





	

		

			

				
					
JavaScript前端开发第一次课内实训

				
			

			

				

					WHT869706733的博客
				

				

					10-19
					
					1278
					
				

			

		

		

			
				
1、计算年龄
内容:在页面中定义一个按钮,通过点击按钮跳出“请输入出生年份”输入框,用户输入年份后在页面上显示年龄。
要求:使用onclick()、prompt() if...else...语句。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计算年龄</title>
		<script>
			function jsGetAge(){


			
		

	





	

		

			

				
					
Web前端实训day2

				
			

			

				

					qianqianwanxing的博客
				

				

					11-16
					
					351
					
				

			

		

		

			
				
Web前端实训day2


float 浮动
指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。
（1）left 表明元素必须浮动在其所在的块容器左侧的关键字。
（2）right 表明元素必须浮动在其所在的块容器右侧的关键字。
（3）none 表明元素不进行浮动的关键字。
（4）inline-start 关键字，表明元素必须浮动在其所在块容器的开始一侧，在ltr脚本中是左侧，在rtl脚本中是右侧。
（5）in

			
		

	





	

		

			

				
					
【创新实训】前端开发记录（一）：基础篇

				
			

			

				

					nullptrjzz的博客
				

				

					06-07
					
					482
					
				

			

		

		

			
				
项目描述
此次创新实训项目为面向电影观众提供多源电影浏览及推荐系统功能的项目。前端以Web页面形式呈现，提供对电影的筛选、查询、排序功能。
技术选型
1、是否选用前端框架？
是。该项目的前端网页内容繁多，涉及到筛选、查询和排序的功能。使用原生HTML+CSS+JS进行开发势必导致开发效率低下、易出错、扩展性差等问题。目前主流的前端框架已趋于稳定，开发也十分便捷，对于该项目具有天然的优势。
2、Vue.js还是React？
这是目前前端领域常用的两个框架，并且都能够胜任此次项目的开发。但考虑到编码复杂性、后期

			
		

	





	

		

			

				
					
实训报告html前端开发,web前端开发技术实验报告 实验三.doc

				
			

			

				

					weixin_39846364的博客
				

				

					06-08
					
					2375
					
				

			

		

		

			
				
web前端开发技术实验报告 实验三.doc (5页) 本资源提供全文预览，点击全文预览即可全文预览,如果喜欢文档就下载吧，查找使用更方便哦！11.90 积分 长 春 大 学 20 15 — 2016学年第 二 学期 Web前端开发技术 课程实 验 报 告学 院： 计算机科学技术专 业： 软件工程 班 级： 软件15402 学 号： 041440210 姓 名： 王 悦 任课教师： 车 娜 实验...

			
		

	





	

		

			

				
					
一个新进前端小白实习僧的初次探索

				
			

			

				

					我是一只小前端
				

				

					11-06
					
					2344
					
				

			

		

		

			
				
我不怕万人阻挡，只怕自己投降
一个新进前端小白实习僧的初次探索在学校的时候写过几个静态页面、用过一些简单的JavaScript，写过一些基础的CSS，去应付课程项目，却也仅仅于此。
谁也没想到会阴差阳错的进入web前端这个行业。  俗话说：做一行爱一行
学习了一个多月，终于完成了一个相较于较为完整的demo，一个超市网页。完成了其中差不多完整的流程：登录->首页->商品详情页->购物车->商品搜索列

			
		

	





	

		

			

				
					
前端实习笔记

				
			

			

				

					weixin_43749858的博客
				

				

					10-11
					
					472
					
				

			

		

		

			
				
前端实习笔记8.21.	快捷键2.	复习3.	超链接标签5.	超链接标签的锚点6.	列表7.	表格8.	合并单元格9.	标签的分类8.71.	样式引入的三种方式2.	CSS字体属性3.	文本属性：8.101.	文本缩进 text-indent2.    选择器3.	背景色background-color8.111.	结构伪类选择器2.	CSS三大特征3.	标签显示模式4.	背景5.	盒子模型8.131.	定位2.	H5介绍8.161.Justify-contend2.	弹性盒子布局 案例8.191.	Js引

			
		

	





	

		

			

				
					
Web前端开发技术实验与实践——实训1

				
			

			

				

					weixin_58243276的博客
				

				

					03-12
					
					3029
					
				

			

		

		

			
				
Web前端开发技术实验与实践——实训1

			
		

	





	

		

			

				
					
前端开发专业实习报告

				
			

			

				

					weixin_63489869的博客
				

				

					07-13
					
					1万+
					
				

			

		

		

			
				
专业实习开始于6月13日，结束于7月1日，短暂而充实的三周，就这样结束了。重新回顾HTML、CSS、JS和vue的知识点的时候，我觉有时候学习的知识再去回顾的时候有一些不同的理解，就像是有一句俗话所说“书读百遍其义自见”，老师又通过做相关项目，让我们运用到了实践中去，收获满满。
    首先，老师介绍了web前端行业的应用领域、前景以及发展方向。web前端就是网站前台部分，运行在PC端，移动端等浏览器上展现给用户所浏览的网页。前端主要需要掌握到三大技术，HTML，CSS及JavaSc...

			
		

	





	

		

			

				
					
HTML是什么？HTML简介

					
热门推荐

				
			

			

				

					ccc369639963的博客
				

				

					01-22
					
					1万+
					
				

			

		

		

			
				
HTML是什么？HTML简介
HTML 英文全称是 Hyper Text Markup Language，中文译为“超文本标记语言”，专门用来设计和编辑网页。
使用 HTML 编写的文件称为“HTML 文档”，一般后缀为.html（也可以使用.htm，不过比较少见）。HTML 文档是一种纯文本文件，您可以使用 Windows 记事本、Linux Vim、Notepad++、Sublime Text、VS Code 等文本编辑来打开或者创建。
每个网页都是一个 HTML 文档，使用浏览器访问一个链接（URL）

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值