HTML+CSS+JS基础

前端的核心技术为HTML、CSS、JavaScript。这三个是前端最基础也是很容易入门的语言。HTML是网页的骨架,CSS是网页的妆容,JS是网页的灵魂,三者相辅相成才能成功地弄出一个简单的网页。这也是学习后续复杂的前端的基础。

HTML是一个用来描述网页的一种语言,他通过标记标签来描述网页(比如<html><b><p><li>等)每个标签都对应着一个结束标签(</html></b></p></li>等对应,)

主要标签所描述的内容如下:

<html> 与 </html> 之间的文本描述网页

<body> 与 </body> 之间的文本是可见的页面内容

<h1> 与 </h1> 之间的文本被显示为标题

<p> 与 </p> 之间的文本被显示为段落

举个例子,可以通过下方代码显示出hello world。

 

<html>

<body>

扫描二维码关注公众号,回复: 3511041 查看本文章

<h1>Hello</h1>

<p>World</p>

</body>

</html>

 

其中,标签之间是如上方所示一个一个嵌套的,不要在子标签未结束标签前母标签先结束标签。为了直观,可以将子标签比母标签多空两个。

 

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是在 HTML 元素的开始标签中规定,以名称/值对的形式出现,比如:name="value"。

可以如下标注

<h1 align="center">   //拥有关于对齐方式的附加信息。

<body bgcolor="yellow">  //拥有关于背景颜色的附加信息。

<table border="1">  //拥有关于表格边框的附加信息。

 

当HTML浏览器读到一个样式表,它就会按照这个样式表来对文档进行修饰。有以下三种方式来插入样式表:

外部样式表

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

 

内部样式表

<head>

<style type="text/css">

body {background-color: red}

p {margin-left: 20px}

</style>

</head>

 

内联样式

<p style="color: red; margin-left: 20px">

This is a paragraph

</p>

 

Css样式就存储于这些样式表中,CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。如下:

h1 {

color:red; font-size:14px;

}

这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。其中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。

如果你的html中有好几个标签是需要一样的修饰的话,你可以用如下方式:

h1,h2,h3,h4,h5,h6 {

  color: green;

text-align:center;

 }

其中,子元素将会从父元素中继承属性,冲突的属性将按照子元素的属性来。除此之外,采用的样式顺序如下(1为最高优先级)

1、内联样式(在 HTML 元素内部)

2、内部样式表(位于 <head> 标签内部)

3、外部样式表

 

JavaScript是可插入 HTML 页面的编程代码。它可以用来设计,验证表单等各种应用。

当插入在HTML中时必须位于 <script> 与 </script> 标签之间,脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。如下方代码:

<script>

document.write("<h1>This is a heading</h1>");

</script>

上面代码可以在html输出h1格式的This is a heading内容。

 

除此之外,JavaScript还有许多功能,它跟CSS和HTML不同,有一些条件逻辑的函数,当使用函数时,需要用关键字function。如下方所示

 

function funame (var1,var2) { //var1 var2为参数

var x=5;  

return x;   //如果需要函数在调用它的时候返回数值,可以使用return。

}

funame(a,b);//调用函数funame,其中a,b为参数。a对应着var1,b   //对应着var2

 

在弄懂函数之前,需要明白JavaScript的变量和数据类型等。只有打好基础才可以灵活地使用函数。

当你对JavaScript有了基础的了解后。你就可以运用jQuery来简化JavaScript编程。jQuery是一个JavaScript库,能帮助你更方便地使用JavaScript。

猜你喜欢

转载自blog.csdn.net/qq_34633111/article/details/82905090