前端技术初了解

最新推荐文章于 2024-10-17 19:11:48 发布

木棉m

最新推荐文章于 2024-10-17 19:11:48 发布

阅读量179

点赞数

分类专栏： aaa 文章标签： java css html javascript js

本文链接：https://blog.csdn.net/weixin_46739744/article/details/114382325

版权

aaa 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

心血来潮想要了解前端技术，便用了大概半个月的时间断断续续把相关课程看了一下，此篇文章写下做个归纳总结。
分为三个部分：html+css+JavaScript

一、HTML

HTML是Hyper Text Markup Lanuage(超文本标记语言)的简称，是网页制作的基本结构框架。
HTML主要就是用一堆标签层次堆叠而成的文档流，有如下例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1>我的第一个 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>

这是一个简单的html写的网页，效果如下
网页效果图

语言分析：html标签内部分为head和body标签，meta设置编码，title标签设置网页标题；在body中的h1标签是一个标题标签（其实有h1-h6类别），p是一个段落标签，button是一个按钮标签。
对于标签可以设置类别class和id，用以区分不同的部分，方便对目标进行操作；有的标签还要写上一些属性值，比如button中的type和onclick等。

二、CSS

css层叠样式表，用于对于html中的元素进行修饰。
css由选择器和声明块组成；选择器指向需要设置样式的元素，声明块中的每一条声明有css属性和值组成；两者组合修饰选择的元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>

    <style>
    h1{
        color:yellow;
        text-align:center;
        background:green;
        border:3px solid;
    }
     #demo{
        background:red;
     }

    </style>

</head>
<body>

<h1>我的第一个 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
<script>
function myFunction(){
	document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>

</body>
</html>