前端入门（一）

来源：互联网发布：java 迭代器从头编辑：程序博客网时间：2024/05/23 02:03

前端基础为HTML+CSS+JavaScript。

套用俗点的话说，就是HTML是骨架，CSS是相貌，JavaScript是灵魂。HTML撑起了一个最为基本的WEB页面，CSS则是让页面更加漂亮，披上了一层漂亮的皮。JavaScript则是给页面注入动态效果，让页面“活起来”。

先从HTML讲起吧。

<!DOCTYPE html><!-- html标签，html界面标签启示于该 --><html><head><!-- 页面名字 --><title>helloWorld</title><!-- 字符编码 --><meta charset="utf-8"></head><!-- 页面主题 --><body><!-- p是段落标签，一个标签直接的文本就是一个段落，会自动换行 --><p>hello world</p><p>你好</p></body></html>

这就是一个基本的hello world的htmll版本。

HTML 元素语法

HTML 元素以开始标签起始(上文中的<p>、<html>等都是开始标签)
HTML 元素以结束标签终止(上文中的</p>、</html>等都是开始标签)
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

3、4、5会在接下来的内容中进行演示

常用HTML标签介绍

1.<img>标签

作用:引入图片

样例:

<img src="./test.jpg" title="test"/>

src与title就是img标签的属性

src是图片所在路径，我使用的是相对路径其中“.”代表文件当前目录“..”代表上一级目录

title是指定鼠标停留在img上出现的文字。

同时，我们可以看到与<p>元素以</p>结束不同，img元素没有结束元，它的元素是空元素，即语法中的第四条"某些 HTML 元素具有空内容"，所以“空元素在开始标签中进行关闭（以开始标签的结束而结束）”。

2.<a>标签

作用:链接到别的页面

样例:

<!DOCTYPE html><html><head><title>a标签测试</title><meta charset="utf-8"/></head><body><a href="http://www.runoob.com/">点此进入菜鸟编程页面</a></body></html>

href就是点击链接将会跳到的地址，既可以是自己的本地HTML文件也可以是网址

最后把<a>标签和<img>标签进行一些混合应用

<!DOCTYPE html><html><head><title>a标签测试</title><meta charset="utf-8"/></head><body><a href="http://www.runoob.com/"><img src="./test.jpg"/></a></body></html>

这样就实现了图像链接

0 0