WEB 前端知识

村上春种树 lv.2

发布时间：2022-10-10 07:22:43 338

相关标签： # javascript# css# java# java# 工具

前端开发工具

前端开发工具介绍

下载链接：https://www.dcloud.io/hbuilderx.html

选择HBuilder X（Windows 标准版），解压并点击HBuilderX.exe即可

WEB 前端知识_html

Web 前端基础

什么是 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 常用标签

开始标签	元素内容	结束标签
`<h1> ~ <h6>`	标题（按大到小）	</h1> ~ </h6>
<p>	这是一个段落	</p>
<a href="default.htm">	这是一个链接	`</a>`
`<img>`	图像（图片）	</img>
<br/>	换行
	按钮	</button>

HTML 属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般存在于开始标签
属性总是以名称/值对的形式出现，比如：name="value"

属性	描述（HTML 常见属性）
class	为 html 元素定义一个或多个类名（classname）
id	定义元素的唯一 id
style	规定元素的行内样式
title	描述了元素的额外信息 (作为工具条使用)

什么是 CSS、JS

通过一个 HTML 例子认识 CSS，JS


<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，可查看网页源码

文章来源： https://blog.51cto.com/u_15222272/5735167

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。