Web前端开发基础技术三剑客:HTML、CSS、JavaScript。
- HTML 网页内容的载体,内容及用户浏览的信息,包含文字 、图片、视频等。
- CSS 网页内容的表现,像网页的外衣,用来改变内容的外观。
- JavaScript 用来实现网页上的特效效果,像一些动画和交互行为。
HTML
平常我们上网浏览的各式各样的网页都是有html标签组成的,网页中的每一个内容在浏览器中展示都要存放在各种标签之中。
- 标签语法
- 由英文尖括号
<
和>
括起来。如<html>
- 一般成对出现,分开始标签和结束标签,结束标签比开始标签多一个
/
。如<span></span>
- 标签直接可以嵌套,但先后顺序需保持一致。如
<p>内容文本<span>测试文字</span>没字了</p>
- 不区分大小写,但建议小写。
- 文件基本结构
<html>
<head>... ...</head>
<body>... ...</body>
</html>
-
<html>
为根标签,所有网页标签都在其中。 -
<head>
用于定义文档的头部元素信息。描述文档的各种属性和信息,包括文档的标题等。这里包含的数据都不会真正作为内容显示给浏览者。如<title>网页标题</title>
标签,设置网页的标题信息,将会出现在浏览器的标题栏中。 -
<body>
网页的主要内容,在这里的标签中的内容会在浏览器中显示。
html的代码注释,``
- 语义化标签
语义化标签,就是的标签的本身意义用途。使用语义化标签可以更容易被搜索引擎收录,更容易让屏幕阅读器读出网页内容。
- 标签元素分类
标签元素大体可分为三种不同的类型,块级元素、内联元素、内联块级元素。三种类型可通过下面方式转换:
display:block; 设置将元素显示为块级元素
display:inline; 设置将元素显示为内联元素
display:inline-block; 设置将元素显示为内联块级元素
块级元素每个元素都从新的一行开始,而且其后的元素也另起一行,高度、宽度、行高以及顶和底边距都可以设置,高度在不设置的情况下,是本身父容器的100%。常见块级元素有:
<div> , <p> , <h1>~<h6> , <ol> , <ul> , <dl> , <table> ,
<form> , <blockquote> , <address>
内联元素和其他元素都在一行上,高度、宽度、行高以及顶和底边距都不可设置,元素的宽度是它所包含的文字或图片的宽度,不可更改。常见的内联元素有:
<a> , <span> , <br> , <i> , <em> , <strong> , <label> , <code>
内联块级元素和其他元素都在一行上,高度、宽度、行高以及顶和底边距都可以设置。<img> , <input>