【无标题】

最新推荐文章于 2024-01-18 23:25:36 发布

m0_70747680

最新推荐文章于 2024-01-18 23:25:36 发布

阅读量64

点赞数

文章标签：其他

本文链接：https://blog.csdn.net/m0_70747680/article/details/126652391

版权

web前端简介

web前端开发是从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。
学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：
1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

HTML标签

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，标签对中的第一个标签是开始标签，第二个标签是结束标签

标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：<div>里嵌套<p>，那么</p>必须放在</div>的前面。

HTML基本结构

一个HTML文件是有自己固定的结构，如下所示：
<html>
<head>...</head>
<body>...</body>
</html>
代码讲解：
1. <html></html>称为根标签，所有的网页标签都在<html></html>中。
2. <head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签，头部标签在之后会详细介绍。
3. 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

在head中设置网页标题和字符集编码
<head>
<title>这里是标题</title>
<meta charset="utf-8"/>
</head>

HTML 段落标签

如果想在网页上显示文章，这时就需要<p>标签了，把文章的段落放到<p>标签中。
<p>段落 </p>
<p>标签的默认样式，段前段后都会有空白。

HTML 换行标签

如果希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：
<p>This is<br/>a para<br/>graph with line breaks</p>

HTML标题

标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。
语法： <hx>标题文本</hx> (x为1-6)
题标签的样式都会加粗，h1标签字号最大，h2标签字号相对h1要小，以此类推h6标签的字号最小。一个标题标签要独占一整行。

HTML 水平线

<hr /> 标签在 HTML 页面中创建水平线,可用于分隔内容。
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

HTML注释

么是代码注释？代码注释的作用是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。
语法：


HTML <span>标签

<span>它的作用就是为了结合CSS设置单独的样式用的，本身没有任何效果。

HTML 列表标签

1）无序列表
在浏览网页时，你会发现网页上有很多信息的列表，如新闻列表、图片列表，如下图所示。

这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。
语法：
<ul>
<li>...</li>
<li>... </li>
......
</ul>
2）有序列表
如果想在网页中展示有前后顺序的信息列表，怎么办呢？如，当当网上的书籍热卖排行榜，如下图所示。这类信息展示就可以使用<ol>标签来制作有序列表来展示。

语法：
<ol>
<li>信息</li>
<li>信息</li>
......
</ol>