WEB 前端知识

原创

弓长三虎 2022-10-07 22:01:33 博主文章分类：软件测试 ©著作权

文章标签 html css html页面 文章分类 Html/CSS 前端开发 私藏项目实操分享

©著作权归作者所有：来自51CTO博客作者弓长三虎的原创作品，请联系作者获取转载授权，否则将追究法律责任

前端开发工具

前端开发工具介绍

下载链接：https://www.dcloud.io/hbuilderx.html
选择HBuilder X（Windows 标准版），解压并点击HBuilderX.exe即可

WEB 前端知识_html

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

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

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>