作者：弓X箭_281 | 来源：互联网 | 2023-06-06 10:27
1.通过三个问题：什么是web前端，什么是HTML，本节课都学习了那些标签。 2.使用所学过的HTML标签制作如图所示的页面。一、web前端技术web前端技术包括： 1、HTML，是一种制作万维网页面
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
**标题标签 <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>
京公网安备 11010802041100号