web前端总结---day01

Ch An

已于 2022-10-24 16:54:21 修改

阅读量689

点赞数

文章标签： 1024程序员节

于 2022-10-24 08:17:29 首次发布

本文链接：https://blog.csdn.net/anran_06/article/details/127482799

版权

1.通过三个问题：什么是web前端，什么是HTML，本节课都学习了那些标签。
2.使用所学过的HTML标签制作如图所示的页面。
在这里插入图片描述

一、web前端技术

web前端技术包括：
1、HTML，是一种制作万维网页面的标准语言，它消除了不同计算机之间信息交流的障碍；
2、CSS，可以帮助把网页外观做得更加美观；
3、JavaScript，是一种轻量级的解释型编程语言；
4、jQuery，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互；
5、AJAX，创建交互式网页应用的网页开发技术

更高端web技术：

AngularJs — Angular是一种用于创建单一应用程序界面的前端框架，它有许多核心功能例如数据绑定，服务，指令以及依赖注入等等。它具有模块功能强大，拥有自定义命令等优点。

Vue— Vue.js 是用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。

React— React主要用于构建UI，你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

webpack

nodejs…等等

二、HTML

1、什么是HTML
HTML的全称为超文本标记语言，是一种标记语言。目前网络运用最广泛的技术之一，也是网页呈现主要基石。

HTML命令可以说明文字，图形、动画、声音、表格、链接等。
HTML分俩部分:

头部：head–提供浏览器所需要的信息
主体：body----提供网页主要内容

2、HTML历史
…

3、HTML优点

简单灵活
可扩展性高
平台无关性

三、运行环境和浏览器配置

环境配置：
1、开发环境：HBuilder X vscode Webstorm pycharm Sublime Text Notepad ++ 等等
2、运行环境：浏览器

在这里插入图片描述

语法结构：
<标签属性 = “值”>内容</标签>

<p align = "center">标签内容</P>

语法格式：

<p align = "center">标签内容</p>
<p align = "center">表示标签开始
</p>表示标签结束
align表示属性名
center表示属性值

语法解析:

标签通常成对出现，分为其实标签和结束标签，结束标签只是开始标签前面加一个“/”

标签可以有属性，属性必须有值

标签开始和标签结束中的内容称之为区域

标签不区分大小写p跟P是相同的。

网页分类：

静态网页

是指不修改网页源码的前提下，网页无论在何时何地被浏览都将显示相同的内容。静态网页一般以html、htm结尾。
动态交互式网页

交互式网页是指用户提交给网站信息，网站根据用户提交的信息响应用户的要求。比如网上注册、论坛、调查等等。这种网页一般以aspx，jsp，php，asp等

四、第一个HTML

标签：
1.标题标签：

**标题标签 <h1> - <h6>（重要）**为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题，即<h1> - <h6> 。具体实现：      <h1> 我是一级标题 </h1>
特点：
1.加了标题的文字会变的加粗，字号也会依次变大。
2. 一个标题独占一行。来！！！左边。。。右边。。。中间：   
3.  <h1>标题一共六级选,</h1>   
4.  <h2>文字加粗一行显。</h2>   
5.  <h3>由大到小依次减，</h3> 
6.  <h4>从重到轻随之变。</h4> 
7.  <h5>语法规范书写后，</h5>  
8.  <h6>具体效果刷新见。</h6>

2段落标签：

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。
在 HTML 标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。
具体实现：    
 <p> 我是一个段落标签 </p>
 特点：   
  1. 文本在一个段落中会根据浏览器窗口的大小自动换行。    
  2. 段落和段落之间保有空隙。

3 换行标签:

在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，
然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签 <br />。
具体实现：     
 <br />
 特点：    
 1. <br /> 是个单标签。    
 2. 2. <br /> 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

4 文本格式化标签：

在网页中，有时需要为文字设置粗体、斜体 或下划线等效果，
这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。

5 div和span标签:

<div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的。
具体实现：    
 <div> 这是头部 </div>         
 <span> 今日价格 </span>
 特点：    
 1. <div> 标签用来布局，但是现在一行只能放一个<div>。 大盒子    
 2. <span> 标签用来布局，一行上可以多个 <span>。小盒子

6 图片标签：

在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像。
具体实现：     
 <img src="图像URL" />
 解释：    
 src 是<img>标签的必须属性，它用于指定图像文件的路径和文件名。    
 所谓属性：简单理解就是属于这个图像标签的特性。图像标签的其他属性：

在这里插入图片描述
7 路径：

分为相对路径和绝对路径：   
   相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。     
   这里简单来说，图片相对于 HTML 页面的位置
   绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径

image标签---用于显示图片信息
src ---绝对路径，相对路径

<!DOCTYPE html> 
<html > 
  <head>
    <meta charset="UTF-8"> 
    <title>在网页中插入图片</title> 
  </head> 
  <body><!--
img标签用来引入图片到页面中 src是一个必须的属性，该属性表示图片的地址 如下面的就是表示在当前文件夹下有个images文件夹，里面有个图片， 名称叫做rose.jpg，这种叫做相对路径寻找法
-->
    <img src="images/rose.jpg"> <!-- 当然也可以这样写，和上面一个意思 -->
    <img src="./images/rose.jpg"> <!--
这样写表示绝对路径查找，一般很少这样写，因为这个路径只是这台电脑的路径， 换一台电脑就没有这张图片了
-->
    <img src="c://images/rose.jpg"> <!-- 如果路径是网络路径也可以滴哦~~ -->
    <img src="http://www.xianoupeng.com/uploadfile/2019/0428/20190428101229423.png"> 
  </body> 
</html>

8 链接标签：

链接的语法格式   
 <a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
 属性：   
  1.href：用于指定链接目标的url地址   
  2.target:用于指定链接页面的打开方式_self默认值 _blank新窗口打开    
  3.#：空链接

9.常用标签:

加粗：b/strong---这俩标签显示效果一样，都是加粗的效果，strong有强调语气的意味，但对我们程序员来说显示效果一致的话，选简单的。主要使用b标签表加粗

斜体：i/em ----斜体标签,现在我们一般使用i标签加斜问题，em标签有存在强调的意思，现在随着css3的使用，而慢慢的用来标注css的字体图标。

下划线：u

删除线：del

换行：br

段落：p---p标签表示段落，两个相邻的p标签之间会空一行，align是p段落的一个属性，right center left对align的值 分别代表右对齐 中心对齐 和左对齐。p标签与br标签有一些相似都能换行，但是br换行时行与行之间不空行。

格式化输出标签：pre

行内标签之一：span

块标签：div---div标签是一个标准的块标签，主要用来布局；他的内容即使不满一行也占一行
	行内标签：修饰他所包裹的内容，不能直接支持宽高属性
	块标签：他即使不满一行，也要占满一行，他支持宽高属性
	自结束标签：不需要结束标签的标签，<!DOCTYPE html> 有html声明可以省略斜杠

下标标签:sub

上标标签：sup

分割线：hr

标题标签：hn = h1-h6 ---h1最大hn标签中的n指的是标题1-6对应了不同级别的6个级别，主要用来装饰标题

第一步：创建一个文本文件，名字随你喜好随便起，修改文件的后缀名为.html（如何显示扩展名，如何新建文本文件需要提一下）
第二步：使用工具（sublime）打开这二个文本文件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name = "author" content="某某">
		<meta name = " description" content="第一个页面">
		<meta name = "keywords" content="调教">
		<title >第一个页面</title>
		
	</head>
	<body>
		<h1>加粗演示</h1>
		<B>花间一壶酒</B>，<strong>独酌无相亲</strong>
		
		<h2>斜体演示</h2>
		<i>举杯邀明月</i>，<em>对影成三人</em>
		
		<h3>删除线演示</h3>
		<del>月既不解饮，影徒随我身</del>
		
		<h4>span演示</h4>
		<span>暂伴月将影，行乐须及春</span>
		
		<h5>p标签演示</h5>
		<p>我歌月徘徊，我舞影零乱</p>
		
		<hr>
		<p>醒时同交欢，醉后各分散</p>
		<hr>
		<p>永结无情游，相期邈云汉	</p>
		
		O<sub>2</sub>
		10<sup>2</sup>
		<pre>
			<B>得不到感情就努力挣钱去玩弄别人的感情</B>			
		</pre>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name = "author" content="ChAn">
		<meta name = " description" content="Day01---作业">
		<meta name = "keywords" content="小白">
		<title >Day01---作业</title>
	</head>
	<style>
	.divleft{
	    float:left;
		height: auto;
	    width: 50%;
	}
	.divright{
	    float:right;
	    width:50%;
	}
	
	span { font-size: 3em;}
	span b { font-size: 60%; }	
	</style>
	<body>	
	<span> 将进酒 <b>君不见黄河之水天上来</b></span>		
		<div id="libai">
		<div class="divleft">
			<img src="./libai.png"float:right;" >
		</div>
		<div class="divright">
			<p>君不见黄河之水天上来，奔流到海不复回。</p>
			<p>君不见高堂明镜悲白发，朝如青丝暮成雪。</p>
			<p>人生得意须尽欢，莫使金樽空对月。</p>
			<p>天生我材必有用，千金散尽还复来。</p>
			<p>烹羊宰牛且为乐，会须一饮三百杯。</p>
			<p>岑夫子，丹丘生，将进酒，杯莫停。</p>
			<p>与君歌一曲，请君为我倾耳听。</p>
			<p>钟鼓馔玉不足贵，但愿长醉不愿醒。</p>
			<p>古来圣贤皆寂寞，惟有饮者留其名。</p>
			<p>陈王昔时宴平乐，斗酒十千恣欢谑。</p>
			<p>主人何为言少钱，径须沽取对君酌。</p>
			<p>五花马、千金裘，</p>
			<p>呼儿将出换美酒，与尔同销万古愁。</p>
		</div>
		</div>
	</body>
</html>