web前端的html部分

最新推荐文章于 2022-04-03 19:54:29 发布

试音刀郎

最新推荐文章于 2022-04-03 19:54:29 发布

阅读量548

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/weixin_46503355/article/details/108502769

版权

web前端基础

1.相关介绍

前端开发是创建 Web 页面或 app 等前端界面呈现给用户的过程，通过 HTML，CSS 及 JavaScript 以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。

以前会 Photoshop 和 Dreamweaver 就可以制作网页，随着网站开发难度加大、开发方式多样，网页制作更接近传统的网站后台开发，网页制作更多被称为 Web 前端开发。前端技术包括 4 个部分：前端页面设计师、浏览器兼容、CSS、HTML“传统”技术与 Adobe AIR、Google Gears，以及概念性较强的交互式设计，艺术性较强的视觉设计等。

前端包括HTML，css以及JavaScript，号称前端三把斧。

超文本标记语言（英语：HyperText Markup Language，简称：HTML）由物理学家蒂姆·伯纳斯-李提出并创建，是一种用于创建网页的标准标记语言。HTML 描述了一个网站的结构，是一种标记语言而非编程语言。

这个不是编程语言，是用来标记的语言。

一个 HTML 元素是 HTML 文件的一个基本组成单元，是构建网站的基石。HTML 允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息，使文本在文档中具有不同的含义——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。

浏览器使用 HTML 标签（即html）和脚本（JavaScript）来诠释网页内容，但不会将标签显示在页面上。

css：

主要让网页样式变得更加美观。

css，即层叠样式表（英语：Cascading Style Sheets，缩写：CSS；又称串样式列表、级联样式表、串接样式表、阶层式样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，它的主要职能就是确定布局和元素的表现。

CSS 不能单独使用，必须与 HTML 或 XML 一起协同工作，为 HTML 或 XML 起装饰作用。其中 HTML 负责确定网页中有哪些内容，CSS 确定以何种外观(大小、粗细、颜色、对齐和位置)展现这些元素。CSS 可以用于设定页面布局、设定页面元素样式、设定适用于所有网页的全局样式。

JavaScript：

JavaScript（通常缩写为JS）是一种高级的、解释型的编程语言，它能使网页可交互（例如拥有复杂的动画，可点击的按钮，通俗的菜单、表单验证、页面特效、操作页面元素等），常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。

JavaScript 支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等。它已经由 ECMA（欧洲计算机制造商协会）通过 ECMAScript 实现语言的标准化。

注意：Java与JavaScript不一样！！！！

2.HTML的元素结构

2.1 特点

HTML 的语言形式为标签（如<p

>）包围的 HTML 元素.

特点：

由尖括号包围关键词组成，比如：<p>、<h1>、<div>、<span> 等；
通常成对出现，比如<div> 和 </div>，第一个就是开始标签，第二个就是结束标签，要注意开始标签和结束标签的区别在于，结束标签比开始标签多一个“/”；
虽然标签通常是成对出现的，但并不是所有标签都有对应的结束标签，比如 <input>、<img> 等，它们往往是单独呈现的；
在 HTML 中标签名是大小写不敏感，<p>和<P>是一样的，但是现在一般要求标签统一小写。

从下面这张图中我们可以看到，一个典型的 HTML 元素通常是由开始标签、结束标签和内容构成的。

2.2 元素嵌套

在 HTML 中，元素可以发生嵌套。请看上面这段 HTML 代码，上面的代码中有两个元素

<p>HTML是一门伟大的语言！</p>

开始标签：<p

> 结束标签：<//p> 内容：“HTML 是一门伟大的语言！”

<div><p>HTML是一门伟大的语言！</p></div>

第一个元素整体作为<div></div>的内容，嵌套在了<div></div>内部，从结构上发生了嵌套关系。

标签strong作用：加粗字号。

2.3 完整的HTML文档结构

1. <!DOCTYPE html>

(1). 作用：告知浏览器该页面文件的文档类型，指示 web 浏览器使用哪个 HTML 版本编写页面。

(2). 位置：<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。

(3). <!DOCTYPE> 声明对大小写不敏感。

(4). <!DOCTYPE> 声明没有结束标签。

2. <html lang="en">...</html>

(1). 此元素可告知浏览器其自身是一个 HTML 文档。

(2). <html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。文档的头部由 <head> 标签定义，而主体由 <body> 标签定义。

(3). lang 属性（语言属性）：当搜索引擎或者浏览器拿到语言属性后，有可能做一些针对指定语言的辅助操作，‘en’表示英文。

3.标签属性

(1). 标签可以拥有零个或多个标签属性，注意：标签属性与标签名称、标签属性与标签属性之间需用一个空格隔开。

(2). 标签属性可以赋予标签更多的信息，标签属性通常是以 key=“value” 即名称=“值” 的形式出现。

(3). 常见的标签属性有：class、id、style、lang、src 等。

4.文档头部：

(1). head 元素定义文档的头部，我们通常在这里引用样式表、提供元信息等。

(2). 文档的头部中的<title>...</title>定义文档的标题，在网页上体现为网页标签的标题。
(3). 一个 <head> 元素必须包含且只能包含一个 <title> 元素。

5.主体body部分

(1). body 元素定义文档的主体，包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。

6.注释：

每一个编程语言都有注释，html也不例外，在HTML中我们用<!-- -->标签来表示注释

2.4 MDN

Mozilla 开发者网络（Mozilla Developer Network，MDN）是由 Mozilla、Microsoft、Google、Samsung 和 W3C 联合打造成的最好的 Web 文档，是学习 Web 开发的一个权威、全面、高质量的网站，文档丰富，资料全面，非常适合大家学习使用，请把它当成你 Web 开发学习时的百科全书。

通常，在一个标签的文档中会有：标签使用示例多个，标签属性讲解，标签在各浏览器中的兼容性统计，以及相关标签链接等内容，帮助大家更好的理解标签的相关知识。

MDN相关文档：https://developer.mozilla.org/zh-CN/docs/Web/HTML

在里面可以看看相关标签的属性，就当作字典查查就可以了。

3. HTML的文本标签

3.1 块状标签与内联标签

块状标签和内联标签是 HTML 中有两种主要的标签类型，它们最大的区别就是：块状标签会为自己的内容占据新的一行，而内联标签则不会。

我们来看一个例子：

<p>
  Unrivalled luxury, stunning white-sand beaches and an amazing underwater world
  make Maldives an obvious choice for a true holiday of a lifetime.
</p>
<p>
  <img
    src="https://document.youkeda.com/P3-1-HTML-CSS/1.3/1-3-island-2.jpg"
    alt=""
  />
</p>

常见的块状标签有段落

、标题

、
等，常见的内联标签有、图片、等，在 HTML 中有很多标签，不需要记忆，只需要以后用到再看即可。

其中标题标签

和段落标签
是独占一行的，它们属于块状标签。而、、标签，它们只占一行中的一部分，它们属于内联标签。我们可以看到，内联标签常常被嵌套在块状标签中。

3.2 标题标签

<!-- h1-h6是块状标签 -->
<h1>Beautiful World</h1>

<!-- h2是h1的子标题 -->
<h2>Islands</h2>

<!-- h3是h2的子标题 -->
<h3>Maldives</h3>
<h3>Crete Island</h3>

<h2>Mountains</h2>
<h3>Matterhorn, Swiss-Italian Border</h3>
<h3>Kirkjufell</h3>

分别对应一级标签到六级标签，数字越大，级别越低，对应的标题看起来就越小（h1到h6）

常用文本标签有

段落标签p

内联标签strong，就是把字体进行加粗

span：这是一个内联标签（即不会产生换行），通常表示一个行内短语，使用可以使网页更有条理。

3.3 图片标签

插入图片我们要用到标签，我们已经见过它很多次了，它的使用方法如下：

在标签属性src中写入图片的相对路径或绝对路径就可以啦。

图片标签还有个 alt 属性，这个属性定义了描述图像的替换文本。如果图像的 URL 是错误的，该图像不在支持的格式列表中，或者如果图像还没有被下载，用户将看到这里的替换文本。

3.4 链接标签

HTML 给我们提供了链接标签a，给文章添加链接。标签是内联标签，用户点击后，浏览器会跳转到指定的网址。下面就是一个典型的链接。

浏览器显示“优课达”，文字下面默认会有下划线，表示这是一个链接。用户点击后，浏览器跳转到 href 属性指定的网址。

标签内部不仅可以放置文字，也可以放置其他元素，比如段落、图像、多媒体等等。

href 属性给出链接指向的网址。它的值应该是一个 URL 或者锚点。

URL：统一资源定位符（英语：Uniform Resource Locator，缩写：URL；或称统一资源定位器、定位地址、URL 地址，俗称网页地址或简称网址）是因特网上标准的资源的地址（Address）。

title 属性给出链接的说明信息。鼠标悬停在链接上方时，浏览器会将这个属性的值，以提示块的形式显示出来。

target 属性指定如何展示打开的链接。

target 属性的值也可以是“_self”、“_blank”、“_parent”、“_top”四个关键字之一。

当它为_self 时表示在当前页面打开，target 默认为“_self”。

当它为_blank 时表示在新页面打开。

3.5 列表

除了我们之前在文章中用到的标题标签

~

、段落标签
、内联标签、图片标签(也是内联标签)、链接标签(也是内联标签)外，列表标签也是很常用的文本标签。

HTML提供了无序列表标签

和有序列表标签
1. 供我们选择，这里我们选择无序列表标签
  - ，列表的每一项都用标签
  - 表示

我们可以看到，每个列表项

前面有个实心小圆点，这是无序列表的符号，当不需要考虑列表项的顺序时，我们常常采用无序列表标签。
4. 表单标签

4.1 form标签

可以看到，在这个注册表单里都是输入框、按钮等表单元素，对于这些表单控件，我们需要用一个块状元素把它们包起来，属于同一个表单的表单控件要包含在同一个块状元素里。

这个标签有两个属性需要我们了解，action和method：

action：一个处理此表单信息的程序所在的 URL，所述表格信息将在表单提交时被发送到定义的地址；

method：它的值可以是 GET 或 POST，用来规定如何发送表单信息；

通常，表单信息被发送到服务器。如何处理这些数据不是我们本次课的内容，我们以后会再讲到。
```

<form action="">
  <input type="text" />
</form>
```
占位文本placeholder：我们可以看到，注册表单（上图）中的昵称输入框里有“昵称”两个字，而我们的单行文本输入框中并没有任何文字，这个文字在点击输入框并输入内容后会消失，这是占位本文，通常用来提示用户需要输入什么。可以通过标签属性 “placeholder” 来实现的。

输入框名字：name

4.2 单行输入文本框

为了区别于其他的，我们需要给昵称输入框加上标签属性name，作为的名字，在提交表单数据时就不会和其他搞混了
```
<input type="text" placeholder="昵称" name="nick" />
```
输入框的值value
```
<input type="text" placeholder="昵称" name="nick" value="小明" />
```
不可修改的输入框 “readonly”和“disabled”

把输入框变成只读输入框！这样用户就不能自己修改预填写的内容啦。

在不同浏览器中输入框的外观可能会有区别，因此“readonly”和“disabled” 这两种输入框在外观上的差别可能与上表所述有所不同。

4.3 多行输入文本框和密码

这里我们会用到textarea标签来写多行输入框。
```

<textarea
  name="sign"
  rows="5"
  cols="30"
  placeholder="请输入个性签名"
></textarea>
```
其中rows和cols分别表示行数（高度）和文本域的可视宽度： rows：行数（高度）； cols：文本域的可视宽度；

密码输入框和昵称输入框有点区别，用户输入的内容将会以黑圆点的形式显示。

其实非常简单，我们只需要把表单标签中的标签属性type="text"改成type="password"就可以啦
```

<input type="password" name="password" placeholder="密码" />
```
4.4 单选框和复选框

单选框：
```

<input type="radio" name="gender" value="male" />
<input type="radio" name="gender" value="female" />
```
所谓单选框，其实只是把控件类型type="text"改成了type=“radio”。大部分表单元素都是通过改变标签属性type的值来实现的。

但是，这样点击的范围有点小，如果点击文字也能选中对应的性别就更好了。为了达到这个目的，我们常常会把单选框和标签配合使用。

复选框的使用就像一道多选题，用户可以选择多个选项。除此之外，复选框和单选框很像，类型就是checkbox
```
<input type="checkbox" />
```
举个例子：
```
<label> <input type="checkbox" name="interest" value="coding" />编程 </label> <label> <input type="checkbox" name="interest" value="other" />其他 </label>
```
4.5 选项菜单

对于职业的选择，我们给用户提供了几个固定的选项：“公司职员”、“自由职业者”、“学生”、“其他”，当然，实际情况可能会产生更多的选项。因为选项有点多，所以我们不采用单选框，而是用到新的标签和，选项菜单。
```
<select name="career">
  <option value="default">请选择职业</option>
  <option value="staff">公司职员</option>
  <option value="freelancer">自由职业者</option>
  <option value="student">学生</option>
  <option value="other">其他</option>
</select>
```
如果我们想要一个多选菜单，那么：
```
<select name="career" multiple>
  <option value="default">请选择职业</option>
  <option value="staff">公司职员</option>
  <option value="freelancer">自由职业者</option>
  <option value="student">学生</option>
  <option value="other">其他</option>
</select>
```
4.6 按钮

button标签
```
<button>注册</button>
```
因为标签有闭合标签，在开始标签和结束标签之间，我们可以放上文字、图片、图标等等。
请选择职业公司职员自由职业者学生其他 ```
4.6 按钮

button标签
```
<button>注册</button>
```
因为标签有闭合标签，在开始标签和结束标签之间，我们可以放上文字、图片、图标等等。

这个按钮放在 form 中会在点击的时候自动提交表单数据，但是在 button 提交表单数据这一点上是有浏览器兼容性问题的，一般还是需要加上 type=“submit”来确保数据的提交：

试音刀郎

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端的html部分

web前端基础1.相关介绍前端开发是创建 Web 页面或 app 等前端界面呈现给用户的过程，通过 HTML，CSS 及 JavaScript 以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。以前会 Photoshop 和 Dreamweaver 就可以制作网页，随着网站开发难度加大、开发方式多样，网页制作更接近传统的网站后台开发，网页制作更多被称为 Web 前端开发。前端技术包括 4 个部分：前端页面设计师、浏览器兼容、CSS、HTML“传统”技术与 Adobe AIR、Go
复制链接

扫一扫