html入门—前端开发必学基础

最新推荐文章于 2023-09-05 13:58:01 发布

云南仟龙Mark

最新推荐文章于 2023-09-05 13:58:01 发布

阅读量478

点赞数

文章标签： html 前端 css

原文链接：https://blog.51cto.com/u_15111999/4655852

版权

今天分享下”html入门—前端开发必学基础“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。

1 HTML介绍

1.1 代码初体验，制作第一个网页

XML/HTML Code复制内容到剪贴板

制作我的第一个网页

Hello World

1.2 HTML和CSS的关系

学习培训web前端开发设计基本技术性必须把握：HTML、CSS、JavaScript语言表达。下边咱们就来认识下这三门技术性全是用于完成哪些的：

HTML是网页內容的媒介。內容便是网页创作者放到网页页面上要想让客户访问的信息，可以包括文本、照片、视頻等。
CSS款式是表现。如同网页的外套。例如，标题字体、颜色转变，或为文章标题添加背景图案、外框等。全部这种用于更改內容外型的物品称作表现。
JavaScript是用于完成网页上的动画特效实际效果。如：鼠标滑过弹出来下拉列表。或鼠标滑过表格的环境颜色更改。也有焦点新闻（新闻图片）的交替。可以这样了解，有动漫的，有互动的一般是用JavaScript来完成的。

下边编码演试了CSS的实际效果，HTML用于表明网页原素，CSS让原素表现更丰富，例如原素部位，尺寸，颜色，字体样式等：

XML/HTML Code复制内容到剪贴板

Html和CSS的关系

Hello World!

（1）第8行代码，影响窗口的文字大小。

（2）第9行代码，影响窗口文字颜色的变化。

（3）第10行，影响窗口文字居中的变化。

1.3 认识HTML标签

各种各式各样的网页，这些网页都是由html标签组成的。下面就是一个简单的网页：

XML/HTML Code复制内容到剪贴板

<!DOCTYPE HTML>  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
        <title>认识html标签</title>  
    </head>  
  
    <body>  
        <h1>勇气</h1>  
        <p>三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>  
        <p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>  
        <img src="http://img.imooc.com/52b4113500018cf102000200.jpg" >  
    </body>  
</html>

效果如下：

在这里插入图片描述

分析这个网页由哪些HTML组成：

（1）“勇气”是网页内容文章的标题，

就是标题标签，它在网页上的代码写成

勇气

。

（2）“三年级时…我也没勇气参加。” 是网页中文章的段落，

是段落标签。它在网页上的代码写成

三年级时…我也没勇气参加。

（3）网页上那张小女生的图片，由img标签来完成的，它在网页上的代码写成

1.4 标签语法

1.标签由英文尖括号<和>括起来，如就是一个标签。

2.html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/。

3.标签结构示意图如下：

4.标签举例：

（1） <p></p>

（2） <div></div>

（3） <span></span>

5.标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：

里嵌套

，那么

必须放在

的前面。如下图所示。

6.HTML标签不区分大小写，

和

是一样的，但建议小写，因为大部分程序员都以小写为准。

7.测试：有一个网页的代码，但第9行缺少代码，请补充：

XML/HTML Code复制内容到剪贴板

<!DOCTYPE HTML>  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
        <title>标签的语法</title>  
    </head>  http://www.qlyl1688.com/products/ycxsys.html
    <body>  
        <h1>在本教程中，你将学习如何使用 HTML 来创建站点</h1>  
        <p>当特殊的样式需要应用到个别元素时，就可以使用内联样式。    
    </body>  
</html>

1.5 html/head/body认识HTML文件基本结构

学习html文件的结构：一个HTML文件是有自己固定的结构的。

XML/HTML Code复制内容到剪贴板

<html>  
    <head>...</head>  
    <body>...</body>  
</html>

代码讲解：

称为根标签，所有的网页标签都在中。

2. 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有、

3.在和标签之间的内容是网页的主要内容，如

、
、、等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

下面的代码的HTML文件结构不完整，因为缺少标签和：

XML/HTML Code复制内容到剪贴板

<!DOCTYPE HTML>  
  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
        <title>认识html文件基本结构</title>  
    </head>  
    <body>  
        <h1>在本小节中，你将学会认识html文件基本结构</h1>  
</body>

1.6 head标签

•标签的作用：文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

•下面的标签可以在head部分：

XML/HTML Code复制内容到剪贴板

<head>  
    <title>...</title>  
    <meta>  
    <link>  
    <style>...</style>  
    <script>...</script>  
</head>

•标签：在<title>和标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。

例如，标签的内容“hello world”会在浏览器中的标题栏上显示出来，如图：

XML/HTML Code复制内容到剪贴板

<head>  
    <title>hello world</title>  
</head>

1.7 了解HTML的代码注释

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

语法：

下面代码的第 8、12 行都是注释代码，但是发现他们是不会在结果窗口中显示出来的：

XML/HTML Code复制内容到剪贴板

<!DOCTYPE HTML>  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
        <title>HTML的代码注释</title>  
    </head>  
    <body>  
        <!--在线咨询 begin-->  
        <div>  
            <p>一站式报名咨询！<a href="#">向报名顾问咨询</a></p>  
        </div>  
        <!--在线咨询 end-->  
    </body>  
</html>

以上是云南仟龙Mark给大家介绍的所有内容,希望对大家有所帮助，如果大家有任何疑问请在脚本之家留言，如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

云南仟龙Mark

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html入门—前端开发必学基础

今天分享下”html入门—前端开发必学基础“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。1 HTML介绍1.1 代码初体验，制作第一个网页XML/HTML Code复制内容到剪贴板制作我的第一个网页 Hello World 1.2 HTML和CSS的关系学习培训web前端
复制链接

扫一扫