web前端基础笔记
学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的:
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。
一、什么是HTML?
HTML(Hypertext Markup Language)即超文本标记语言。
1.HTML发展史
注:图片摘自慕课网
2.HTML的特点
- HTML不用编译,直接由浏览器执行
- HTML文件是一个文本文件
- HTML文件必须使用html或htm为文件后缀
- HTML大小写不敏感,HTML与html一样
3.HTML的基本结构
注:图片摘自慕课网
HTML文件的扩展名是html或htm
4.HTML的标签
- <html></html>
- <head></head>
下面这些标签可用在 head 部分:
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
- <title></title>,在<title>和</title>标签之间的文字内容是网页的标题信息
- <body>网页内容</body>
- <em>需要强调的文本</em>
- <strong>需要强调的文本</strong>
- <span>文本</span>
我们对<em>、<strong>、<span>这三个标签进行一下总结:
<em>和<strong>标签是为了强调一段话中的关键字时使用,它们的语义是强调。
<span>标签是没有语义的,它的作用就是为了设置单独的样式用的。
- <q>引用文本</q>,不用加引号,浏览器会自己加。
- <blockquote>引用文本</blockquote> ,<blockquote>标签,长文本引用,不用加引号。
一般的标签是成对出现的,有开始标签就有结束标签。但也有不是成对出现的,例如:
5.HTML的元素
如 开始标签+内容+结束标签 就是一个元素。
6.HTNL的标签属性
语法:
<标签名 属性名1="属性名“ 属性名2=”属性名“...>......</标签名>
注:标签名与属性,属性与属性之间要用空格隔开。
7.HTML的注释
语法:
例如:
注:在编写代码的时候,所有的标签、符号都要在英文状态下去写,否则它是不起作用的。
二、DOCTYPE文档类型声明
<!DOCTYPE html>声明必须放在HTML文档的第一行
<!DOCTYPE>声明不是HTML标签
三、中文无法正常显示,出现乱码情况该如何处理?
- 问题:
当网页显示出乱码时 - 解决方法:
在<head></head>标签之间添加:
<meta http-equiv="Content" contect="text/html;charse=utf-8"/>
四、文字和段落标签
标题标签:<h1></h1>~<h6></h6>
段落标签:<p></p>
align对齐属性值
值 描述
left 左对齐内容
right 右对齐内容
center 居中对齐内容
justify 对行进行伸展,这样每行都可以有相等的长度。