【web】-CSDN博客

本文链接：https://blog.csdn.net/qq_56962555/article/details/127575905

Web学习day01

什么是web前端？

Web前端一般由多种开发技术制作，是给用户展示的网页页面，即网站的前台部分。那这里的所谓的多种开发技术，其中包含：
HTML
CSS
JavaScript
jQuery
BT（Bootstrap）
更高端的前端技术：
Angular
AngularJS
VUE
React
webpack
nodejs

什么是HTML？

HTML全称Hyper Text Mark-up Language 翻译过来就是超文本标签语言，标签也可称作标记或者元素。(注：html5不是一种语言,更多的是一种规范)
HTML是目前网络上运用最广泛的前端技术之一，也是网页构成最主要的部分之一。
HTML文本是由HTML标签构成的描述性文本，HTML文本可以表述,文字,表格,声音,图形,动画,链接等。
HTML是WEB编程的基础，HTML之所以被称为超文本标签语言，是文本包含了所谓的“超级链接”和媒体文件。
HTML结构由头部（head）和主体（body）构成
语法结构：HTML标签
<标签属性 = “值”>内容</标签>

<p align = "center">标签内容</P>
语法格式：
<p align = "center">标签内容</p>
<p align = "center">表示标签开始
</p>表示标签结束
align表示属性名
center表示属性值

网页分类：
静态网页：
是指不修改网页源码的前提下，网页无论在何时何地被浏览都将显示相同的内容。静态网页一般以html、htm结尾。
动态交互式网页
交互式网页是指用户提交给网站信息，网站根据用户提交的信息响应用户的要求。比如网上注册、论坛、调查等等。这种网页一般以aspx，jsp，php，asp等

本节课都学习了那些标签？

strong/b 加粗，前者有语气的强调
em/i 斜体，前者有语气的强调
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 表示分割线，单标签
p 表示段落
sub 表示文字下标；sup 表示文字的上标
pre标签原样输出文本内容
span是一个标准行内输出，一般用来装饰包裹的文本内容，常见于装饰文本。
hn标签中的n指的是标题1-6对应了不同级别的6个级别，主要用来装饰标题。（其中h1最大，随后依次变小）(可以通过display:inline实现同一行)
div标签是一个标准的块标签，主要用来布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>这是一个标题</title>
		
	</head>
	<body>
		<div id="top" style="height:100px;border: 1px solid red; ;">这是描述顶部区域的快标签顶部</div>
		<section id="content" style="height:300px;border: 1px solid green; ">这是现实内容部分</section>
		语义化标签header，section,footer
		<footer id="bottom"style="height:100px;border: 1px solid blue;">这是一个描述顶部区域的div</footer> 
	</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="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>