admin 管理员组

文章数量: 887021

【web】

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=".png"> </body> 
</html>

本文标签： WEB

版权声明：本文标题：【web】 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1686977951h52441.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。