Android开发笔记02：HTML、CSS、Javascript关系分析与案例详解

于 2020-10-07 17:38:05 发布
阅读量221 收藏
点赞数
分类专栏： Android开发笔记 文章标签： HTML CSS JavaScript 网页开发 交互设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m1m2m3mmm/article/details/108939887
版权

目录

1 理论分析 

1.1 Html

1.2 JavaScript

1.3 CSS-页面美化

1.4 三者关系分析

2 邀请函制作实例

2.1 效果展示

2.1.1 代码文件结构

2.1.2 界面效果

2.2 合并版本代码

2.3 分离版本代码

2.3.1 html5代码

2.3.2 css代码

2.3.3 JavaScript代码

在基本的Web程序开发中，通常需要熟悉HTML、CSS和Javascript三种语言，来协同完成web应用开发，本文简单对三者关系的进行描述，并使用刘欢的《HTML5基础知识、核心技术与前沿案例》第一章实例进行实现分析。

对于一个网页来说，包含三个部分：结构（ Structure） 、 表现（ Presentation） 和行为（ Behavior）

  • HTML —— 结构， 决定网页的结构和内容（ “是什么”） 
  • CSS —— 表现（ 样式） ， 设定网页的表现样式（ “什么样子”）
    • 分离模式写在<header></header>中
    • <link href="move.css" rel="stylesheet">
  • JavaScript（ JS） —— 行为， 控制网页的行为（ “做什么”）；
    • 分离模式写在<body></body>中
    •  <script src="move.js"></script>

1 理论分析 

1.1 Html

HTML，英文全称： Hyper Text Markup Language；中文全称： 超文本标记语言； HTML 语言是制作网页的最基本语言， 并且只能通过web浏览器显示出来。

  • Hyper：用HTML制作的网页可以通过其中的链接从一个网页“跳转”至另一个网页。
  • Text：HTML是一种文本解释性的程序语言， 即它的源代码将不经过编译而直接在浏览器中运行时被“翻译”。
  • Markup：HTML的基本规则就是用“标记语言” ---- 成对尖括号组成的标签元素来描述网页内容是如何在浏览器中显示的。

对于一个网页而言，必备要素有以下几个：

  • <!doctype html>用来表示文档的类型， 它是用来告诉 web 浏览器要使用哪个 HTML 版本来对页面进行编写。
  • <html> </html>所有的网页代码必须包含在该标签内部，它是成对出现的， 首标签<html>和尾标签</html>分别位于 HTML 文档的最前面和最后面， 明确地表示文档是以超文本标识语言(html)编写的。 该标签不带有任何的属性。
    • <head> </head>标签用于定义文档的头部， 它是所有头部元素的容器。 <head> 中的元素可以引用脚本、 指示浏览器在哪里找到样式表、 提供元信息等等。
      • <title>WebName</title> 定义网页的标题，唯一必须的元素
      • <script> </script>定义JavaScript脚本
      • <link> </link> 链接CSS文件到html页面中
      • <meta> </meta>标签位于文档的头部， 用于定义文件信息， 对网页文件进行说明。 其中name属性主要用于描述网页， 与之对应的属性值为content， content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
    • <body></body> 标签用于定义文档的主体， 即在浏览器上看到的网页内容
      • <h1> </h1> 表示文档标题，共有h1, h2, ..., h6六级标题
      • <p> </p>表示一个段落
      • <a> </a>表示超链接
      • <div> </div>表示一个区块，用来将相同的功能归结到页面的同一区域；div的id属性可为不同的区块设置名称，以区分他们之间的差异

html是一种大小写不敏感的语言，建议同一使用小写表示

 

1.2 JavaScript

JavaScript是用来做交互的，JavaScript是一种脚本语言，即可以运行在客户端也能运行在服务器端。JavaScript的解释器就是JS引擎，JS引擎是浏览器的一部分。而JavaScript主要是用来扩展文档交互能力的，使静态的HTML具有一定的交互行为（比如表单提交、动画特效、弹窗等）。

1.3 CSS-页面美化

css的官方名字叫层叠样式表，它的出现是为了解决内容和表现分离的问题，一般存放在.css文件里。简单说就是负责HTML页面中元素的展现及排版。

使用css 可在html的头元素<head>里书写，或者书写在CSS文件并在html里引用该文件。

css优先权 多个css样式可集中在单个html标签里，出现这种情况时，一般按优先权划分。浏览器默认设置 （最低）--> 外部样式表 --> 内部样式表（写在html的<head>标签内部）--> 内联样式（写在html的标签里，即style属性）（最高）

css的语法。css由两个主要部分组成：选择器和一条或多条声明。选择器是指css样式的名字“.seletor”，名字前面要带上一点“.”。声明是由属性和值组成，给个例子“margin: 0 auto”，冒号前面是属性，后面是值，该例子是定义元素居中显示。

属性描述
position有相对定位和绝对定位两种方式，relative/absolute
margin设置外边距
padding设置内边距
color设置颜色

更详细的CSS属性，参见：CSS参考手册

1.4 三者关系分析

这三者99%的情况下都是搭配使用的，但也不是绝对的，具体关系是：

  • HTML与CSS、JS是不同的技术，可以独立存在；
  • HTML一般需要CSS和JS来配合使用，否则单一HTML文档无论是功能还是展示上效果都不理想；
  • CSS一般是不能脱离HTML或XML的，如果CSS脱离了HTML和XML，那就没有存在的必要的；
  • JS可以脱离HTML和CSS而独立存在；JS可以操作HTML和CSS。

总结：如果把HTML比做身体，那CSS就好比是衣服，而JavaScript则意味着人能做的一些高级动作。

2 邀请函制作实例

2.1 效果展示

2.1.1 代码文件结构

文件结构解析：

  • 合并版本
    • 01(merge).html是将js/css/html5所有代码写在一起的代码文件；
  • 分离版本
    • 01(div).html则为纯净的html代码，
    • 其样式存放在css.css中，
    • 其JavaScript代码放在enroll.js中，
  • welcome为选择的背景图片

2.1.2 界面效果

 

浏览器点击html文件展示界面
点击 邀请您参加... 之后的界面

2.2 合并版本代码

<!doctype html>
<html>
    <head>
        <title>网页标题</title>
        <meta charset="UTF-8">
		<style type="text/css"> </style>
    </head>
    <body>
		<div id="Container">
			<h1> Let's learn HTML5! </h1>
			<p> 发挥您的美感与想象力，探索Web开发的无限可能性，现诚邀您一同踏上HTML5的学习之路。</p>
			<a href="invite.php" id="enroll">邀请您参加...</a>
		</div>
		<script type="text/javascript">
			var enroll = document.getElementById("enroll"); /* 根据ID找到链接 */			
			//alert(enroll); /* 加断言判定是否找到元素，弹出包含链接地址的提示框，即表明链接成功 */
			enroll.onclick = function(e){
				e.preventDefault();
				enroll.innerHTML = "报名成功";
				enroll.style.background = "#27cb8b"; /* 设置背景颜色 */
				enroll.style.borderColor = "#27cb8b"; /* 设置边框颜色 */
			}
		</script>
		
		<style type="text/css">
			body{
				background:url(welcome.jpg) center center; /* 水平和垂直居中 */	
				background-size:cover; /* 背景填满浏览器 */
				margin:0; /* 清除默认外边距, 便于CSS更精准的控制 */
				padding:0; /* 清除默认内边距, 便于CSS更精准的控制 */
				position:relative; /* body处于相对定位之下，以确保Container可设置为相对定位*/
			}
			html,body{
				/* 此为全局样式 */
				height:100%; /* 图片在高度上充满全屏 */
				color:#ffffff; /* 同一设置body中的文字背景为白色 */
				font-family:sans-serif; /* 使用系统默认无衬线字体 */
			}
			#Container{
				/* 此为区块Container的样式 */
				width:100%;
				text-align:center;  /* 文本居中 */
				position:absolute; /* 绝对定位 */
				top:50%; /* 区块的顶部位于页面的50%位置，即垂直方向的中点位置 */
				transform:translateY(-50%); /* 设置区块整体垂直居中，不同浏览器的实现方式有差异 */
			}
			h1{
				font-size:54px; /* 设置标题字号 */
				text-transform:uppercase; /* 将英文设置为大写 */
				margin-bottom:20px; /* 控制标题与下方元素的间距 */
			}
			p{
				font-size:21px; /* 设置段落的字体 */
				margin-bottom:40px; /* 控制段落与下方元素的间距 */
			}
			a{
				font-size:18px; /* 设置字号 */
				color:#fff; /* 颜色，CSS中#rrggbb可简写为#rgb,如#112233可写成#123 */
				border: 1px solid #fff; /* 设置边框宽度线型颜色 */
				border-radius:3px; /* 设置边界为圆角 */
				padding:10px 100px; /* 设置内边距，上下10，左右100 */
				text-decoration: none; /* 去掉链接的下划线 */
			}
		</style>
	</body>
</html>

2.3 分离版本代码

2.3.1 html5代码

<!doctype html>
<html>
    <head>
        <title>网页标题</title>
        <meta charset="UTF-8">
		<link href="css.css" rel="stylesheet">
    </head>
    <body>
		<div id="Container">
			<h1> Let's learn HTML5! </h1>
			<p> 发挥您的美感与想象力，探索Web开发的无限可能性，现诚邀您一同踏上HTML5的学习之路。</p>
			<a href="invite.php" id="enroll">邀请您参加...</a>
		</div>
		<script src="enroll.js"></script>
	</body>
</html>

2.3.2 css代码

		@charset "UTF-8";
		/* 不用再写style标签，否则页面加载失败 */
			body{
				background:url(welcome.jpg) center center; /* 水平和垂直居中 */	
				background-size:cover; /* 背景填满浏览器 */
				margin:0; /* 清除默认外边距, 便于CSS更精准的控制 */
				padding:0; /* 清除默认内边距, 便于CSS更精准的控制 */
				position:relative; /* body处于相对定位之下，以确保Container可设置为相对定位*/
			}
			html,body{
				/* 此为全局样式 */
				height:100%; /* 图片在高度上充满全屏 */
				color:#27cb8b; /* 同一设置body中的文字背景为白色 */
				font-family:sans-serif; /* 使用系统默认无衬线字体 */
			}
			#Container{
				/* 此为区块Container的样式 */
				width:100%;
				text-align:center;  /* 文本居中 */
				position:absolute; /* 绝对定位 */
				top:50%; /* 区块的顶部位于页面的50%位置，即垂直方向的中点位置 */
				transform:translateY(-50%); /* 设置区块整体垂直居中，不同浏览器的实现方式有差异 */
			}
			h1{
				font-size:54px; /* 设置标题字号 */
				text-transform:uppercase; /* 将英文设置为大写 */
				margin-bottom:20px; /* 控制标题与下方元素的间距 */
			}
			p{
				font-size:21px; /* 设置段落的字体 */
				margin-bottom:40px; /* 控制段落与下方元素的间距 */
			}
			a{
				font-size:18px; /* 设置字号 */
				color:#fff; /* 颜色，CSS中#rrggbb可简写为#rgb,如#112233可写成#123 */
				border: 1px solid #fff; /* 设置边框宽度线型颜色 */
				border-radius:3px; /* 设置边界为圆角 */
				padding:10px 100px; /* 设置内边距，上下10，左右100 */
				text-decoration: none; /* 去掉链接的下划线 */
			}

2.3.3 JavaScript代码

var enroll = document.getElementById("enroll"); /* 根据ID找到链接 */			
			//alert(enroll); /* 加断言判定是否找到元素，弹出包含链接地址的提示框，即表明链接成功 */
			enroll.onclick = function(e){
				e.preventDefault();
				enroll.innerHTML = "报名成功";
				enroll.style.background = "#27cb8b"; /* 设置背景颜色 */
				enroll.style.borderColor = "#27cb8b"; /* 设置边框颜色 */
			}

 

 

小薛引路
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小薛引路

喜欢的读者，可以打赏鼓励一下

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值