前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端学习之路-CSS介绍,Html介绍,JavaScript介绍

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

作者头像
达达前端
发布2019-07-03 12:32:59
1.8K0
发布2019-07-03 12:32:59
举报
文章被收录于专栏:达达前端

标题图

CSS介绍

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

style属性方式

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

代码语言:javascript
复制
<p style="background-color: #FFF000">
 p标签
</p>

head中加入style标签

代码语言:javascript
复制
<head>
 <style type=”text/css”>
  p { color: #FFF000;}
 </style>
</head>

链接方式

代码语言:javascript
复制
<link rel="stylesheet" type="text/css" href="head.css" media="screen" />

总结CSS

选择器名称 { 属性名:属性值; ……. }

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

选择器

  1. class选择器
  2. id选择器

. class # id

Html

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

头标签

代码语言:javascript
复制
<head></head>

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

在标签中常用:

字体

代码语言:javascript
复制
<font size=5 color=red>

标题标签:<h1><h2>…..<h6>

列表

代码语言:javascript
复制
<dl>
 <dt>名称</dt>
  <dd>Tom</dd>
 <dt>名称</dt>
  <dd>Tom</dd>
</dl>
代码语言:javascript
复制
<ol> <ul> <li>

图像

代码语言:javascript
复制
图像标签:<img>
图像地图:<map>

表格

代码语言:javascript
复制
表格标签:<table>
标题<caption> 表头<th> 行<tr> 单元格<td>
代码语言:javascript
复制
<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>

超链接

代码语言:javascript
复制
超链接<a href=””>

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

表单

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

JavaScript介绍

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

引入:

代码语言:javascript
复制
<script src=”test.js” type=”text/javascript”></script>

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

代码语言:javascript
复制
<script language="javascript" type="text/javascript">
    document.write("欢迎来到JavaScript世界!");
</script>
代码语言:javascript
复制
<script language="javascript" src="javascript.js"></script>
代码语言:javascript
复制
<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>

脚本代码的位置

  1. <head></head>标记对之间放置
  2. <body></body>标记对之间放置

变量

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

变量的声明和赋值

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

常量

  1. 整型
  2. 浮点型
  3. 字符串型
  4. 数据类型
  5. 弱类型,区分大小写

数值型

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

运算符

算术运算符

代码语言:javascript
复制
+、-、 * 、 / 、%、++、--

比较运算符

代码语言:javascript
复制
==、!=、>、>=、<、<=

逻辑运算符

代码语言:javascript
复制
&&、||、!

条件运算符

代码语言:javascript
复制
?:

函数

代码语言:javascript
复制
function  函数名(参数...){
    执行语句;
    return 返回值;
}

数组

代码语言:javascript
复制
var arr = new Array();
代码语言:javascript
复制
for(var x=0; x<arr.length; x++){
    alert(arr[x]);
}

循环语句

  1. for语句
  2. while语句
  3. for…in语句
  4. 中断循环语句
代码语言:javascript
复制
for(初始化;  条件;  增量){
    语句;
}
代码语言:javascript
复制
while(条件){                                  
    语句;             
}
代码语言:javascript
复制
for(变量  in  对象){
    语句;
}

结语

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

送❤

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.08.10 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • CSS介绍
  • style属性方式
  • 总结CSS
  • 选择器
  • Html
  • 在标签中常用:
  • JavaScript介绍
  • 脚本代码的位置
  • 变量
  • 变量的声明和赋值
  • 常量
  • 数值型
  • 运算符
  • 函数
  • 数组
  • 循环语句
  • 结语
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档