整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML初学者入门视频教程,简单明了,学html看这一篇就够了

TML是制作网页的基础,我们在网站建设中谈论的静态网页就是基于HTML的网页。

早期的网页直接用HTML代码编写,但现在有许多智能网页制作软件(常用的如frontpage,dream weaver等)通常不需要手动编写代码,而是由这些软件自动生成。虽然不需要自己写,但是理解HTML代码仍然是非常重要的。

了解HTML是什么?它是学习网站建设的重要技术基础知识

下面我们自己可以动手创建一个非常简单的网页,首先我们让计算机显示扩展,方法是打开我的电脑,然后现在栏目工具》文件夹选项》查看》高级设置中找到《隐藏已知文件类型的扩展名》将其不勾选,并单击“应用”以确认设置。然后在桌面上创建一个新的TXT文件,将此文件命名为“xxx.html”(扩展名也可以是htm),这样你就可以用浏览器打开它,你就会看到自己制作的最简单的页面。

进一步的简单理解什么是html?

html是一种超文本标记语言,即html(hypertext markup language),是一种用来描述网络文档的标记语言。在页面的开头和结尾使用<html></html>标签。

总结:

1)HTML是我们常说的静态网页;

2)HTML是以Html或htm为扩展名的文件;

3)HTML某些标签代码规则,让内容在浏览器中呈现出我们所需要的样式;

4)HTML可以使用记事本创建,并以.html或.htm为扩展名保存。

html文件中的代码由具有一定的规则规律标签与内容组成。以指定的HTML结构和内容形成完整的html文件。我们可以直接使用浏览器来打开,查看网页效果。

如果您想在浏览器中显示各式各样的网页,我们就需要html文件(HTML基本结构+内容+标签)和css文件(css样式)来实现我们需要的漂亮网页。

HTML基础学习教程

动力节点老杜讲解的html学习教程,非常详细全面,完全适合小白入门

内容:讲解了HTML基础语法、HTML概述、W3C概述、B/S架构系统原理、table、背景色与背景图片、超链接、列表、表单、框架等知识点。

通过html教程的学习之后,不但可以开发基本的网页,还可以看懂别人编写的HTML页面。

HTML完整资料下载:
http://www.bjpowernode.com/?toutiaoweb.chai

HTML课程目录

1.HTML教程:课程内容概述

2.HTML教程:BS结构介绍

3.HTML教程:软件环境准备

4.HTML教程:HTML概述

5.HTML教程:我的第一个HTML

6.HTML教程:HTML的基本标签

7.HTML教程:HTML的实体符号

8.HTML教程:HTML的表格

9.HTML教程:HTML的单元格合并1

10.HTML教程:HTML的单元格合并2

11.HTML教程:thead tbody tfoot

12.HTML教程:背景色和背景图片

13.HTML教程:HTML图片img标签

14.HTML教程:HTML超链接

15.HTML教程:超链接的作用-request和response的概念

16.HTML教程:HTML列表

17.HTML教程:form表单初步

18.HTML教程:用户注册表单的实现

19.HTML教程:下拉列表支持多选

20.HTML教程:form的file控件

21.HTML教程:隐藏域hidden控件

22.HTML教程:隐藏域hidden控件2

23.HTML教程:readonly和disabled

24.HTML教程:控件的maxlength属性

25.HTML教程:HTML文档中节点的id属性

26.HTML教程:div和span在网页中的应用

今天,前端工程师已经成为研发体系中的重要岗位之一。

可是与此相对的是,极少大学的计算机专业愿意开设前端课程,大部分前端工程师的知识,也都是在实践和工作中不断学习的。

最近收到很多同学的后台留言,说希望多推出一些前端方向的教程。

今天我们就带来一门适合前端初学者的课程,可以带你从零入门 HTML、CSS、JS、React 等前端核心技能,并创建一个待办事项的管理应用~

项目效果:


课程从最基础的 HTML/ CSS/JS 讲起,还包含了 TypeScript/React/Fabric 等常用技能的讲解。由浅入深,层层递进,如果你想快速上手 React 框架,这门课会是你非常好的选择。

访问“实验楼”官网,搜索“从 0 到 1 构建待办事项应用”就能学习全部课程内容。

以下是课程第一节的内容 —— 「HTML 简介」,带你快速入门HTML,让我们一起进入前端的大门看看吧:

「HTML 简介」

实验介绍

本实验是对 HTML 进行学习,并且较详细的说明了 Web 是如何工作的。主要内容有:HTML 常见标签、HTML 文档结构、HTML 表格和表单、HTML 有序列表和无序列表。通过本节学习,可以构建简单的 HTML 网页。

知识点

  • 什么是 HTML
  • Web 是如何工作的
  • 文档结构
  • 常见标签
  • 表格
  • 表单
  • 有序列表和无序列表

什么是 HTML

HTML(超文本标记语言)是一种用于创建网页的标准标记语言。HTML 不需要编译,可以直接由浏览器执行,它的解析依赖于浏览器的内核。它不是一种编程语言,而是一种标记语言。

Web 是如何工作的

下面我们来演示用户是如何看到一个网页显示的。

具体来讲:

  1. 当用户通过浏览器输入网址后,浏览器先在 DNS 服务器上找到它,然后对它进行解析。
  2. 解析完成后,浏览器给服务器发送 http 请求。
  3. 服务器同意这个请求,就把 HTML 文件发送回浏览器。
  4. 浏览器拿到 HTML 文件,对其解析执行,显示在用户屏幕上。

HTML 文档结构

首先我们来看一个例子:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 简介</title>
    <meta charset="utf-8" />
  </head>
  <body></body>
</html>

这是一个 HTML 的基本骨架,我们将逐步介绍这些是什么意思。

文档类型声明

<!DOCTYPE html> 是我们的文档声明头。他告诉了浏览器,本文档处理的是 HTML 文档。

html 标签

html 标签即根元素,此处表示文档的开始,该标签包含两个子标签:head 和 body。

head 元素

head 标签下面所包含的标签由 title、meta、link、style、script 等(后面会讲到)。

title 标签

作用:设置文档的标题或者名称。浏览器通常将该标签的内容显示在窗口顶部或者标签页上。每个 HTML 文档只能有一个,必须有一个 title 标签。

meta 标签

<metacharset="UTF-8"> 声明字符的编码格式为 utf-8。

body 标签

body 标签定义文档的主体,也就是我们的主要内容(比如文本、超链接、图像、表格和列表等)。

常见标签

1.h 系类标签

h 标签有六种 h1,h2,h3,h4,h5,h6,它代表着我们的标题。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 简介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>我是一级标题</h1>
    <h2>我是二级标题</h2>
    <h3>我是三级标题</h3>
    <h4>我是四级标题</h4>
    <h5>我是五级标题</h5>
    <h6>我是六级标题</h6>
  </body>
</html>

为了大家能更有效的学习,请使用实验楼的环境。首先我们新建一个文件,点击 File,然后 New File,命名为 index.html。

然后输入上面的代码。

让我们来看一下运行效果吧。鼠标右键 index.html 文件,点击 Open With,然后点击 Preview。

最终效果为:

2.p 标签

p 标签是我们的文本标签,p 标签会自动在其两个标签之间创建一些空白。删掉上段代码 <body> 标签里的内容,把下面的内容放到 <body> 标签里面去。

<p>我是第一段文字,实验楼,做实验,学编程</p>
<p>我是第二段文字,实验楼,做实验,学编程</p>

3. 图片标签

HTML 的图像是通过标签 <img> 来定义的。语法: <imgsrc="图片地址"/> 删掉上段代码 <body> 标签里的内容,把下面的内容放到 <body> 标签里面去。

<p>实验楼图片:</p>
<img src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg" />

4.a 标签

<a> 标签是超链接标签,意思就是我们点击它可以跳转到一个网页。删掉上段代码 <body> 标签里的内容,把下面的内容放到 <body> 标签里面去。

<a href="https://www.shiyanlou.com/">实验楼</a>

点击文字:

跳转到指定网页:


篇幅有限,后续的课程内容,请在“实验楼”边敲代码边学习~

访问“实验楼”官网,搜索“从 0 到 1 构建待办事项应用”,就能找到课程,继续学习啦!

频地址:

HTML网页设计零基础入门教程(一),两分钟学会设计第一个网页。

文案:

大家好,我是老K。一个码龄超过10年的程序员。从今天起,我会给大家介绍,Web网站开发的最基本语言:HTML。本期视频给大家介绍怎么编写第一个网页。什么是HTML呢?HTML就是超文本标记语言,用来标记通过互联网传输的网页的格式。用HTML标记的网页是静态网页,后缀名一般是.html或.htm。静态网页制作完成以后,其内容不会变化。如果要修改内容,必须修改源文件。

HTML用各种元素组织文档,用一对尖括号标记元素的开始和结束。两个尖括号里面的表示元素的内容。例如:<title>人工智能</title>,表示网页的标题是,人工智能。所有的,web,设计语言都以HTML为基础。编写HTML,很简单。使用windows自带的,记事本,就可以编写。首先,创建一个文本文档。用记事本打开文档,输入HTML代码。我们先来看一下效果,稍后我会详细介绍源文件的内容。保存以后,关闭记事本。重命名文本文件,把后缀名改为html。用浏览器打开网页,就看到效果了。

我们来看源文件。

第一个元素,HTML,是顶级元素。所有的元素都包含在它里面。

第二个元素,head,表示文档的头部信息。

第三个元素,title,是head的子元素,表示网页的标题.

第四个元素,body,是网页的主体部分。

body,元素的内容是一句文本:世界,你好。

好了,这就是本期视频的内容。谢谢观看!再见!

源文件:

<html>

<head>

<title>This is the fisrt page</title>

</head>

<body>

Hello, world!

</body>

</html>