更多课程 选择中心


Web培训

400-996-5531

Web培训

Web前端培训 > Web职场 > 正文

Web前端工程师要了解的 html+css基础知识


今天小编要跟大家分析的文章是关于Web前端工程师要了解的html+css基础知识。正在从事Web前端工作的小伙伴们来和小编一起看一看吧,希望本篇文章能够对正在从事Web前端工作和学习的小伙伴们有所帮助。

Web前端工程师要了解的 html+css基础知识

一、什么是HTML?

HTML即超文本标记语言(Hyper Text Markup Language), 是用来描述网页的一种语言。
超文本标记语言的结构包括"头"部分(外语:Head)、和"主体"部分(外语:Body),其中"头"部提供关于网页的信息,"主体"部分提供网页的具体内容。
标记语言是一套标记标签(markup tag)
HTML使用标记标签来描述网页

如下代码:

<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

例子解释:

<html>与</html>之间的文本描述网页
<body>与</body>之间的文本是可见的页面内容
<h1>与</h1>之间的文本被显示为标题
<p>与</p>之间的文本被显示为段落

二、HTML元素

HTML文档是由HTML元素定义的。

HTML元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。

开始标签

元素内容

结束标签

<p>

This is a paragraph

</p>

<a href="default.htm">

This is a link

</a>

<br />

注释:开始标签常被称为开放标签(opening tag),结束标签常称为闭合标签(closing tag),大多数HTML元素可拥有属性。

空的HTML元素:

没有内容的HTML元素被称为空元素。在XHTML、XML以及未来版本的HTML中,所有元素都必须被关闭。

在开始标签中添加斜杠,比如:<br>就是没有关闭标签的空元素,而<br />是关闭空元素的正确方法,HTML、XHTML和XML都接受这种方式。

即使<br>在所有浏览器中都是有效的,但使用<br />其实是更长远的保障。

HTML提示:使用小写标签

HTML标签对大小写不敏感:<P>等同于<p>。许多网站都使用大写的HTML标签。

W3School使用的是小写标签,因为万维网联盟(W3C)在HTML 4中推荐使用小写,而在未来(X)HTML版本中强制使用小写。

三、HTML属性

HTML标签可以拥有属性。属性提供了有关HTML元素的更多的信息。

属性总是以名称/值对的形式出现,比如:name="value"。

属性总是在HTML元素的开始标签中规定。

属性实例:

HTML链接由<a>标签定义。链接的地址在href属性中指定:

<a href="http://www.w3school.com.cn">This is a link</a>

注释:属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name='Bill "HelloWorld" Gates'。

HTML提示:使用小写属性

属性和属性值对大小写不敏感。

不过,万维网联盟在其HTML 4推荐标准中推荐小写的属性/属性值。

而新版本的(X)HTML要求使用小写属性。

一些常见HTML属性:

属性

描述

class

classname

规定元素的类名(classname)

id

id

规定元素的唯一id

style

style_definition

规定元素的行内样式(inline style)

title

text

规定元素的额外信息(可在工具提示中显示)

四、HTML编辑器

使用Notepad或TextEdit来编写HTML

可以使用专业的HTML编辑器来编辑HTML:

Adobe Dreamweaver

Microsoft Expression Web

CoffeeCup HTML Editor

五、HTML标题

标题(Heading)是通过<h1> - <h6>等标签进行定义的。
<h1>This is a heading</h1><h1>定义最大的标题。
<h6>This is a heading</h6><h6>定义最小的标题。

注释:浏览器会自动地在标题的前后添加空行。

注释:默认情况下,HTML会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。

以上就是小编今天为大家分享的关于Web前端工程师要了解的html+css基础知识的文章,希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助,想要了解更多Web前端相关知识记得关注达内Web培训官网,最后祝愿小伙伴们工作顺利,成为一名优秀的Web前端工程师。

【免责声明:本文图片及文字信息均由小编转载自网络,旨在分享提供阅读,版权归原作者所有,如有侵权请联系我们进行删除。】

预约申请免费试听课

填写下面表单即可预约申请免费试听! 怕学不会?助教全程陪读,随时解惑!担心就业?一地学习,可全国推荐就业!

上一篇:从事Web前端工作要掌握哪些技术
下一篇:自学Web前端的路线是什么

一般程序员真实工资是多少?

Web前端开发是做什么的?

中级Web前端开发工程师

小程序和h5的区别和优势

Copyright © 2023 Tedu.cn All Rights Reserved 京ICP备08000853号-56 京公网安备 11010802029508号 达内时代科技集团有限公司 版权所有

选择城市和中心
黑龙江省

吉林省

河北省

贵州省

云南省

广西省

海南省