Web前端

二十冶一生

已于 2022-10-28 00:16:30 修改

阅读量373

点赞数

分类专栏：笔记文章标签：前端开发语言

于 2022-10-28 00:12:34 首次发布

本文链接：https://blog.csdn.net/qq_52566242/article/details/127562540

版权

笔记专栏收录该内容

32 篇文章 1 订阅

订阅专栏

文章目录

Web前端学习目标
一、HTML
二、HTML的基础语法
三、HTML常用的标签
- 3.1 第一个HTML程序
- 3.2 常用标签

Web前端学习目标

什么是web前端？
Web前端一般由多种开发技术制作，是给用户展示的网页页面，即网站的前台部分

web前端的多种开发技术

	1.HTML
	2.CSS
	3.JavaScript
	4.jQuery
	5.BT(Bootstrap)

更加高级的技术

	1.Angular
	2.JS
	3.VUE
	4.React
	5.webpack
	6.nodejs

一、HTML

全称：Hyper Text Mark-up Language超文本标签语言。

HTML是目前网络上运用最广泛的前端技术之一，也是网页构成最主要的部分之一。

HTML文本是由HTML标签构成的描述性文本，HTML文本可以表述文字表格声音图形动画链接等。

HTML是WEB编程的基础，HTML之所以被称为超文本标签语言，是文本包含了所谓的“超级链接”和媒体文件。

HTML结构由头部（head）和主体（body）构成
头部描述了浏览器所需的信息
主体包含要说明的具体内容
需要说明的是HTML语言不是一种编程语言而是一种描述性语言，用于描述超文本内容的显示方式。比如，文字以什么颜色大小显示，图片以什么尺寸位置显示。

二、HTML的基础语法

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

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

语法格式：

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

语法解析

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

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

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

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

三、HTML常用的标签

3.1 第一个HTML程序

1.创建一个文本文件，修改文件后缀名为.html
2.如下代码写入

<!doctype html> 
<html>
  <head>
    <meta charset = "utf-8">
    <title>这是一个标题内容</title>
  </head>
  <body>
    这是一个主体内容
  </body>
</html>

html标签

html标签表示网页的开始，应该把它放在最外层，其他所有的标签出去文件头声明都该放在html标签内。
head标签

表示头部标签，通常放title、meta、style等标签。从这些名字就能看出来，head标签的作用是用来定义页面属性。
body标签

表示主体标签，网页上所有要显示的内容都放在这个标签内。
meta标签

meta标签下载head标签内，meta提供了网页的信息，包括作者、关键字、网页编码、自动刷新等信息。

常用的网页编码有：GB2312 UTF-8 BIG5 GBK

3.2 常用标签

strong/b标签
加粗效果，strong有强调语气的意味，但对我们程序员来说显示效果一致的话，选简单的。主要使用b标签表加粗
em/i标签
em、i标签都是加斜文本的标签，现在我们一般使用i标签加斜问题，em标签有存在强调的意思
u和del标签
u表示下划线，del的表示删除线。

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <title>粗体|斜体|下划线|删除线</title>
  </head>
  <body>
    <strong>粗体</strong>
    <b>也是粗体</b>
    <em>斜体</em>
    <i>还是斜体</i>
    <u>下划线</u>
    <del>删除线</del>
  </body>
</html>

在这里插入图片描述

br标签表示换行，hr标签表示分割线

<html>
  <head>
    <meta charset = "utf-8">
    <title>换行|分割线</title>
  </head>
  <body>
    <br>这是一个换行符测试<hr width = 400 size = 1 noshade>这是一条分割线
  </body>
</html>

在这里插入图片描述

p标签
表示段落

<html>
  <head>
    <meta charset = "utf-8">
    <title>段落</title>
  </head>
  <body>
    <p align = "center">
      <font color = "#ff0000">第一行</font>
    </p>
    <p align = "left">第二段落</p>
  </body>
</html>

在这里插入图片描述

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

font：标签用来修饰字体 color表示字体的颜色 “#ff0000”是颜色值，表示红色。

注意：网页中的颜色用 # 开头，连接 6 位十六进制数表示，如 #336699。

sub、sup、pre、span标签
sub表示文字下标；sup表示文字的上标；pre标签原样输出文本内容；span是一个标准行内输出，一般用来装饰包裹的文本内容，常见于装饰文本。

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <title>sub sup pre span</title>
  </head>
  <body>
      2<sup>2</sup>=4<br>
      数组a的2下标：a<sub>[2]</sub><br>
      <hr>
      <span style="color:purple;font-size:20px">这是一个标准输出</span><br>
      <pre>
      静夜思 —— 李白
       床前明月光，
        疑是地上霜。
         举头望明月，
          低头思故乡
      </pre>
  </body>
</html>

在这里插入图片描述
行内标签：占据内容部分，对宽高等属性不能直接起作用。

hn、div标签
hn标签中的n指的是标题1-6对应了不同级别的6个级别，主要用来装饰标题。
div标签是一个标准的块标签，主要用来布局。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>标题和div</title>
  </head>
  <body>
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
    
    <div></div>
  </body>
</html>

在这里插入图片描述
块标签：占据整行空间，对宽高等属性生效。

多媒体标签
img标签
目前在网页中使用的图片主要有 GIF、JPG、PNG、BMP 格式，但以 GIF、PNG 和 JPG 使用居多。

GIF 支持动画和背景透明，同时图片通常比较小，但仅支持 256 色以内的图像，因此色彩不够丰富。

JPEG 支持 1670 万种颜色，但不支持动画和背景透明。当想要背景透明的时候，一般会使用PNG格式的

图片，所以我们可以根据两者的优缺点来选择图像的格式。

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

在这里插入图片描述
练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一次作业</title>
</head>
<body>
    <div><h1 style="display: inline;">将进酒</h1>&nbsp;&nbsp;
    <h2 style="display: inline;">君不见黄河之水天上来</h2></div>
    <img src="./img/李白.png" style="float: left;">
    <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>

</body>
</html>