前端开发工具
前端开发工具介绍
- 下载链接:https://www.dcloud.io/hbuilderx.html
- 选择HBuilder X(Windows 标准版),解压 并点击
HBuilderX.exe
即可
Web 前端基础
什么是 HTML
<!DOCTYPE html>
<html>
<head>
<title>一起蜕变吧</title>
</head>
<body>
<h1>我是H1标签</h1>
<p>我是P标签</p>
</body>
</html>
HTML 标签说明
DOCTYPE 声明了文档的类型
2
<html> </html> 标签是HTML页面的根元素,该标签的结束标志为
3
<head> </head> 标签包含多个元素
4
title> </title> 标签定义文档的标题
5
<body> </body> 标签定义页面内容
6
<h1> </h1> 标签作为一个标题声明
7
<p> </p> 标签作为一个段落显示
HTML 常用标签
开始标签 | 元素内容 | 结束标签 |
| 标题(按大到小) | |
| 这是一个段落 | |
| 这是一个链接 | |
| 图像(图片) | |
| 换行 |
|
| 按钮 | |
HTML 属性
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般存在于开始标签
- 属性总是以名称/值对的形式出现,比如:name="value"
属性 | 描述(HTML 常见属性) |
class | 为 html 元素定义一个或多个类名(classname) |
id | 定义元素的唯一 id |
style | 规定元素的行内样式 |
title | 描述了元素的额外信息 (作为工具条使用) |
什么是 CSS、JS
通过一个 HTML 例子认识 CSS,JS
<!DOCTYPE html>
<html>
<head>
<title>一起蜕变吧</title>
<script type="text/javascript">
function text(){
alert(document.getElementById("p_text").innerHTML);
}
</script>
<style type="text/css">
h1.h_class {color:blue;}
</style>
</head>
<body>
<h1 class="h_class">我是H1标签</h1>
<p title="你点我试试" style = "color:red" id = "p_text">我是P标签</p>
<button onclick = 'text()'>我是一个按钮</button>
</body>
</html>
浏览器查看网页源码
以谷歌浏览器为例
- 打开浏览器,鼠标右击 -> 查看网页源代码或使用快捷键[ Ctrl + U ]
- 直接按 F12 进入开发者模式,选中顶部栏 Elements,可查看网页源码