前端学习之路-CSS介绍，Html介绍，JavaScript介绍

Posted 2020-12-29 程序员哆啦A梦

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端学习之路-CSS介绍，Html介绍，JavaScript介绍相关的知识，希望对你有一定的参考价值。

技术分享图片

CSS介绍

学前端必备掌握CSS样式，css为层叠样式表，用来定义页面的显示效果，加强用户的体验乐趣，那么如何用css到html中呢？

style属性方式

利用标签中的style属性来改变显示样式

<p style="background-color: #FFF000">
 p标签
</p>

在head中加入style标签

<head>
 <style type=”text/css”>
  p { color: #FFF000;}
 </style>
</head>

链接方式

<link rel="stylesheet" type="text/css" href="head.css" media="screen" />

总结CSS

选择器名称 {
属性名：属性值；
…….
}

属性与属性之间用分号隔开
属性与属性值用冒号连接

选择器

class选择器
id选择器

. class
# id

Html

html为超文本标记语言，通过标签来定义的语言，代码不用区分大小写。

头标签

<head></head>
<title>：指定浏览器中标题栏显示的内容。
<meta>：网页的描述信息。

在标签中常用：

字体

<font size=5 color=red>
标题标签：<h1><h2>…..<h6>

列表

<dl>
 <dt>名称</dt>
  <dd>Tom</dd>
 <dt>名称</dt>
  <dd>Tom</dd>
</dl>

<ol> <ul> <li>

图像

图像标签：<img>
图像地图：<map>

表格

表格标签：<table>
标题<caption> 表头<th> 行<tr> 单元格<td>

<table border="1" width=”100%”>
    <caption>表格标题</caption>
    <tr algin=”center”>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr algin=”center”>
        <td>dashucoding</td>
        <td>10</td>
    </tr>
</table>

超链接

超链接<a href=””>

定位标记<a href=”#标记”>

表单

文本框 text
密码框 password
单选框 radio
复选框 checkbox
提交按钮 submit
重置按钮 reset
按钮 button
图像 image

javascript介绍

JavaScript是基于对象和事件驱动的脚本语言，为html提供信息的动态交互，安全性高，跨平台性强。JS是基于对象，且是弱类型。

引入：

将JavaScript脚本代码嵌入到HTML文档中

<script language="javascript" type="text/javascript">
    document.write("欢迎来到JavaScript世界！");
</script>

<script language="javascript" src="javascript.js"></script>

<input type="button" name="mybtn" value="伪URL引入" onclick="javascript:alert('鼠标单击！')"> 
<script language="javascript" type="text/javascript">
function clickme()
{
    alert("鼠标单击！");
}
</script>

<form name="myform">
   <input type="button" name="mybtn" value="按钮" onclick="clickme()">
</form>

脚本代码的位置

在<head></head>标记对之间放置
在<body></body>标记对之间放置

变量

变量名以字母或下划线（"_"）开头
变量可以包含数字、从 A 至 Z 的大小写字母
JavaScript区分大小写

变量的声明和赋值

定义变量：var name;
赋值：name = dashucoding;

常量

整型
浮点型
字符串型
数据类型
弱类型，区分大小写

数值型

整型、浮点型
字符串型
单引号或双引号引起来
布尔型
true, false
Null、undefined

运算符

算术运算符

+、-、 * 、 / 、%、++、--

比较运算符

==、!=、>、>=、<、<=

逻辑运算符

&&、||、！

条件运算符

？：

函数

function  函数名(参数...){
    执行语句；
    return 返回值；
}

数组

var arr = new Array();

for(var x=0; x<arr.length; x++){
    alert(arr[x]);
}

循环语句

for语句
while语句
for…in语句
中断循环语句

for(初始化;  条件;  增量){
    语句;
}

while(条件){                                  
    语句;             
}

for(变量  in  对象){
    语句;
}

结语

本文主要讲解?前端学习之路-CSS介绍，Html介绍，JavaScript介绍
下面我将继续对Java、?android中的其他知识深入讲解，有兴趣可以继续关注
小礼物走一走 or 点赞

技术分享图片

以上是关于前端学习之路-CSS介绍，Html介绍，JavaScript介绍的主要内容，如果未能解决你的问题，请参考以下文章

前端学习之路一

WEB前端培训课程需要学习哪些方面的技术

CSS基础篇之入门介绍及语法应用

web前端入门到实战：Html介绍，CSS介绍，JavaScript介绍

前端学习之路—html标签cssjs

学生HTML个人网页作业作品使用HTML+CSS+JavaScript个人介绍博客网站 web前端课程设计 web前端课程设计代码 web课程设计