Android开发笔记03：HTML/CSS/JavaScript新手代码详解与案例实现

最新推荐文章于 2023-04-15 17:57:28 发布

小薛引路

最新推荐文章于 2023-04-15 17:57:28 发布

阅读量356

点赞数

分类专栏： Android开发笔记

本文链接：https://blog.csdn.net/m1m2m3mmm/article/details/108974108

版权

Android开发笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文为刘欢的《HTML5基础知识、核心技术与前沿案例》第二~四章内容笔记总结

1 HTML新手入门详解

1.1 内容标签和非内容标签

标签	描述	代码示例
<p> </p>	前一对尖括号代表起始标签，后一对带/的尖括号为结束标签 id属性区分不同的段落 class属性设置段落的属性	<p> 这是一段文字</p> <p id="descript"> 这是一段文字 </p> <p id="descript" class="red"> 这是一段文字 </p>
<strong> </strong>	加粗	<p id="descript" class="red"> <strong>这是一段文字 </strong> </p>
<br>	换行符号	非内容标签
<img>	设置图片	<img src="images/bullt.png">
<!-- -->	注释标签	<!-- 这是一段注释 -->

html--页面根元素

lang属性：用来设置语言，标准的语言缩写定义在标准IETF-BCF47中http://tools.ietf.org/html/bcp47

manifest属性：离线页面缓存，即在没有网的情况下，也能查看；主要应用于不需要网络情况下，下载之后不再更改时才会使用，对于需要更改的网页，慎用。

head--文档元数据

head元素应是HTML文档中所有元数据（Metadata）的集合之处。包括五个主要部分，分别是title、link、style、base和meta元素。

title为页面标题，显示在浏览器标题栏，或用户收藏夹、历史浏览记录等醒目位置；

link为建立文档与外部文件的关系，如可以使用link引入CSS文件、图标文件、图片文、RSS订阅文件；

style为在页面中定义样式

base标记文档的基础URL地址

mate可以标记所有的元数据，必须包含元数据名称(name)、编译指令(http-equiv)和字符编码(charset）三种属性中的一种；对于360等双核浏览器，需要使用renderer来制定渲染内核，取值为webkit、ie-comp和ie-stand，分别表示webkit内核、IE兼容内核和IE标准内核，最常用的渲染内核为webkit内核。

区块元素

header对应头部区域，包含页面描述和导航信息

section对应不同的内容板块，article对应板块内的某篇文章

aside侧边栏

footer页脚，用来定义版权信息和页脚链接

分组内容元素

不要求语义的情况下，所有分组都可以使用div来实现；建议作为最后的解决方案，如果段落、头部、版块、侧边栏、页脚等区块元素能解决，则优先使用这些区块元素。div也包含lang属性用来设置区块的语言。

分组标签	描述	示例
<ul> <li> </li> </ul>	无序标签
<ol type="a"> <li> </li> </ol>	有序标签
<dl> <dt> <dd> </dd> </dt> </dl>	自定义组合标签
<figure> <img src="" alt=""> <figcaption> 标题</figcaption> </figure>	src：图片的路径 alt：说明信息 figcaption：图片标题
hr	水平分割线
pre	源代码
blockquote	引用
main	指定页面的主要内容只能指定一个

代码示例

<!doctype html>
<html>
	<head>
		<meta lang="zh-cmn-Hans">
		<title> 内容标签测试 </title>
	</head>

	<body>
		<div>
			<h1> 这是一级标题，总共6个标题级别 </h1>
			<p> 这是一个正常的段落 </p>
			<p> <strong> 加粗 </strong> 文本 </p>
			<p> <em> 倾斜 </em> 文本 </p>			
		</div>
		
		<div lang="en">
			<ol type="a">
				<li> Apple </li>
				<li> Orange </li>
			</ol>
			
			<ul>
				<li> One </li>
				<li> Two </li>
			</ul>
		</div>
		
		<div>
			<dl>
				<dt> 西安 </dt>
				  <dd> 西安站 </dd>
				  <figure>
					<img src="xianStation.jpg" alt="西安站">
					<figcaption> 图为西安站 </figcaption>
				  </figure>
				  <dd> 西安北站 </dd>
				<dt> 郑州 </dt>
				  <dd> 郑州站 </dd>
				  <dd> 郑州东站 </dd>			
			</dl>
		</div>		

	</body>
</html>

1.2 常用文本元素

链接：<a href="home.html">My Home </a>，当没有href属性时，仅作为占位符，不显示链接

斜体：<em> </em>，表示语义、语气的加强

加粗：<strong> </strong>，表示文本的重要性或紧急程度

放大：<big> </big>，表示将文本放大显示

缩小：<small> </small>，表示将文本缩小显示

换行：<br>，常用语非内容性换行，如诗歌

引用：<q> </q>，插入文献的作者、标题、链接时使用；<cite> </cite>插入某段摘录文字时使用

1.3 表单

创建表单：<form> </form>，将数据提交到某个页面；

数据提交方式：method属性，有post和get两种方式。两者之间的差异简单来说，get是把数据放在URL中，以明文的方式发送给后台(类似浏览器地址栏中带参数的URL），它不能传输过大的数据，也不能传输文件类数据；而post是把数据放在数据体内再发给后台，数据不能直接被看到，可传输的数据量较大。我们在制作表单时一般都选择使用post万式。

目标页面设置属性：action属性

<!doctype html>
<html>
	<head>
		<meta lang="zh-cmn-Hans">
		<title> 我的第一个表单 </title>
	</head>

	<body>
		<form method="post" action="sever.php">
			<p> 
				<label> 姓名：
					<input name="username" type="text" placeholder="请输入名字" required>
				</label>
			</p>
			
			<p> 
				<label for="sex"> 性别：</label>
				<input name="sex" type="radio" value="male" checked> 男
				<input name="sex" type="radio" value="female" checked> 女				
			</p>
			
			<fieldset>
				<legend> 性别： </legend>
				<p> <input name="sex" type="radio" value="male" checked> 男 </p>
				<p> <input name="sex" type="radio" value="female" checked> 女 </p>
			</fieldset>
			
			<p> 
				<label> 电话：
					<input name="tel" type="tel" placeholder="请输入手机号码" required>
				</label>
			</p> 
			
			<p> 
				<label> 邮箱：
					<input name="email" type="email" placeholder="请输入邮箱账号" required>
				</label>
			</p>  
			
			<p> 
				<label> 日期：
					<input name="date" type="date" placeholder="请选择日期" required>
				</label>
			</p> 
			
			<p>
				<label for="equipment">请选择预约的仪器:</labe1>
				<select name="equipment">
					<option value="1">分光光度计</option>
					<option value="2">气相色谱仪</option>
					<option value="3">低速离心机</option
					<option value="4">电子天平</option>
				</select>
			</p>
			
			<p>
				<label> <input type="checkbox" name="rule">遵守实验仪器使用规范 </label>
			</p>
			
			<p>
				<button>  提交 </button>
			</p>
			
		</form>

	</body>
</html>

表单界面：

1.4 表格

定义表格：<table> </table>

行标签：<tr> </tr>

单元格：<td> </td>，属性colspan列方向合并单元格

标题：<caption> </caption>

表头元素：<th> </th>

<!doctype html>
<html>
	<head>
		<meta lang="zh-cmn-Hans">
		<title> 我的第一个表格 </title>
	</head>

	<body>
		<table style="border:solid 1px black; empty-cell:show; cellspacing=0 cellpadding=0">		
			<!-- <tr colspan="2"> 省会信息表 </tr> -->
			<caption> 省会信息表 </caption>
			<tr>
				<th> 省份名称 </th>
				<th> 省会城市 </th>
			</tr>
			
			<tr>
				<td> 山西 </th>
				<td> 太原 </td>
			</tr>
			
			<tr>
				<td> 陕西 </td>
				<td> 西安 </td>
			</tr>
		</table>

	</body>
</html>

2 CSS新手入门

2.1 属性与属性的值

CSS也即层叠样式表，使用如下所示的一段代码进行规则定义，包括两个部分：选择器和声明(花括号包围部分)；一个规则中可以定义多条声明，声明与声明之间使用分号分割开，建议一行只写一条声明。

body {
    background:#E67E22;
    color: #555;
}

注意：不能使用中文分号，否则会出现诡异的错误。每条申明有属性和属性的值组成，当属性的值有多项时，使用空格分割各参数。当属性的值存在单位时，一定要加上单位; 属性的值为0时，可以省略单位；当百分比为0时，%不能省略。

article{
    border:1px solid #000;
}

CSS中方向顺序为：上右下左

.block{
    border-width: 5px; /* 上左下右都是5个像素 */
    border-width: 0 10px; /* 上下: 0, 左右：10 */
    border-width: 0 10px 40px; /* 上 0, 左:10, 下:40, 右：0 */
    border-width: 10px 10px 40px 20px; /* 上 10, 左:10, 下:40, 右：20 */
}

2.2 继承关系

2.2.1 就近继承实例

先来一个例子，如下网页结构HTML代码：

<body>
    <div id="first">
        <p>Nothing seek, nothing find.</p>
        <div id="second">
            <p>Cease to struggle and you cease to live.</p>
            <div id="third">
                <p>Man errs as long as he strives.</p>
                <div id="fourth">
                    <p>Energy and persistence conquer all things.</p>
                </div>
            </div>
        </div>
    </div>
</body>

定义层叠样式表

@charset="UTF-8"
body{
    color:#808080; /* 灰色，body中的所有div都会继承该样式 */
}

#first{
    color:#1ABC9C; /* 青绿色，first区块包含的所有div会继承该样式 */
}

#second{
    color:#DC143C; /* 深红(猩红)，second区块包含的所有div会继承该样式 */
}

#third{
    color:#F1C40F; /* 明黄色，third区块包含的所有div会继承该样式 */
}

#four{
    color:#E67E22; /* 亮橙色，four区块包含的所有div会继承该样式 */
}

效果：

继承的意义在于简化代码，星号选择器可以选择所有样式

导入CSS的两种方式：

<link href="cssHerient.css" rel="stylesheet"> </link>
import url("css.css") /* 较复杂站点使用该方式 */

2.2.2 选择器分类总结与实例

三种选择器：

标签选择器(Tag Selector)：以HTML标签选择对应的HTML元素
类选择器(Class Selector)：用于选择带有Class的HTML元素，两种实现方式，以 . 开头紧跟类名；或者标签.类名
id选择器(ID Selector)：为拥有特定ID的HTML要素设置样式，以#ID名称的方式表示
群组选择器：用逗号隔开几个标签
伪类选择器：使用 : 隔开，最常用的是a:hover，即鼠标经过某个链接时，链接发生变化
伪元素选择器：使用 :: 隔开，如p::before{}，在段落之前添加文字

CSS文件

@charset "UTF-8";
h1{
	font-size:10px; /* 标签选择器，将所有的h1标签设置为30px字体 */
}

.red{
	color:#F00; /* 类选择器，将所有的class=red的标签颜色 */
}

p.red{
	color:#F0F; /* 标签和类组合选择器，将所有的class=red的标签颜色 */
}

#m-title{
	color:#303; /* ID选择器，将所有的class=red的标签颜色 */
}

h2,h3{
	font-size:5px; /* 群组选择器，将所有的h2,h3标签设置为5px字体 */
}

section article h1{
	font-size:20px; /* 精确的选择section->article->h1的样式进行修改 */
}
section .blue{
	font-size:30px; /* 精确的选择section->.blue的样式进行修改 */
}

a:hover{
	background:#FF0; /* 伪类选择器，鼠标经过链接时，修改颜色 */
}

p.blue::before{
	content:"He said : "; /* 不修改html前提下，在段落头部添加文字 */
}

HTML

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title> 选择器练习 </title>
		<link href="selector.css" rel="stylesheet"> </link>
	</head>
	<body>
		<header>
			<h1 class="red" id="title">标题区</h1>
		</header>
		
		<section>
			<h1 class="blue" id="m-title">版块区标题</h1>
			<article>
				<h1 class="red" id="s-title">版块区文章标题1</h1>
				<h2 class="red" id="s-title2">版块区文章标题2</h2>
				<h3 class="red" id="s-title3">版块区文章标题3</h3>
			</article>
			<a href="https://www.w3school.com.cn/index.html" id="enroll">邀请您参加...</a>
			<p class="red" id="p-content"> 这是一段内容r </p>
			<p class="blue" id="pb-content"> everything happens for a reason. </p>
		</section>
		
		<aside>
			<h1 class="blue" id="a-title">Title</h1>
		</aside>		
	</body>
</html>

2.3 CCS常用属性

文本和字体

p.blue{
	font-weight:bold; /* 字体加粗 */
	text-indent:2em; /* 缩进两个字符，与字体大小无关 */
	line-height:150%; /* 行高，如果设置为1.5，则是继承他爹的行高，扩大1.5倍 */
	background:#ecf0f1; /* 背景颜色 */
	border-left:5px solid #27AE60; /*  添加左边框，增加引用效果 */
	padding:15px 20px;
	/* font:italic bold 150px/150% arial; 一次性设置斜体、加粗、放缩、字体设置 */
}

图片

img{
	border:10px solid #2e3c4d; /* 10像素的实线边框 */
	border-radius:50%; /* 图片设置为圆形 */
	border-bottom:2px solid rgba(0,0,0,.15); /* 定义下边框属性，设置红绿蓝及透明度 */
}

3 JavaScript新手详解及实例

3.1 代码基础

在控制台撰写JavaScript代码调试时，换行使用shift + enter
调试信息
- 日志，console.error()
- 警告，console.warn()
- 错误，console.error()
- 提示，console.info()
- 调试，console.debug()；

代码注释
- // 单行注释
- /* */ 多行注释，不能嵌套

JavaScript的变量名是区分大小写的，关键字、let 和 const不能做变量名；变量名是字母、$和下划线开头
变量是动态类型的
支持+ - * / % ++ -- -= += *= /= 等数学运算，支持> >= < <= ==等逻辑运算，=== !==等相等运算
支持if语句、switch语句、三目表达式，与Java类似
支持for循环、while循环和do...while循环，与Java类似

3.2 编程进阶

3.2.1 数组

一维数组

// -----------建立空数组----------- //
var arr = new Array();
var arr = [];

// -----------数组赋值------------ //
arr = ["a", "b", "c"];

// --------数组定义并赋值--------- //
var arr = ["a", "b", "c"];

// --------获取数组元素----------- //
console.log(arr[0]);

// --------获取数组长度----------- //
console.log(arr.length);

// -----------数组遍历------------ //
for(var i = 0; i < arr.length; i++)
{
    console.log(arr[i]);
}

// -------数组追加元素------------ //
arr.push("d");

// -------数组头部添加------------ //
arr.unshift("e");

// -------数组尾部删除元素-------- //
arr.pop("d");

// -------数组头部删除------------ //
arr.shift("e");

// -------数组任意删除------------ //
arr.splice(1, 1); //起始位置，删除元素数目

// -------数组任意添加------------ //
arr.splice(1, 0, "f"); //插入位置，0, 插入元素

// -------数组拼接------------ //
arr.concat(arr2);

// -------数组翻转------------ //
arr.reverse();

混合类型元素数组

var arr = ["a", 123, false];

多维数组

var arr = [[1,2,3], [4,5,6], [7,8,9]];
arr[0][1]; //取元素2

存储对象

var arr = [{name:"Lucy", age:31}, {name:"Mike", age:38}, {name:"Tom", age:52}];
console.log(arr[0].name); //输出Lucy

3.2.2 日期和时间

获取日期

var now = new Date();
console.log(now);
console.log(now.toDateString());
console.log(now.getHours());
console.log(now.getMonth());
console.log(now.getDay());
console.log(now.getUTHours());

设置时间

var date = new Date(2008, 8, 8, 8, 8, 8);

date.setHours(10);
console.log(date);

var date2 = "Fri Sep 19 2008";
console.log(Date.parse(date2)); //1971年1月1日到现在的秒数

3.2.3 函数

function out_count(){
    var mycount = 10;

    function inner_count(){
        var mycount = 20;
        output_count(mycount);1//此处mycount值为20
    }

    inner_count();
    output_count(mycount);1//此处mycount值为10
}

function output_count(val){    
    console.log(val);
}
out_count();//依次输出20，10

3.2.4 对象

普通对象

//定义对象
var faculty1 = {name: "Mike1", age:20, job:"Designer"}

var faculty2 = new Object();
faculty2.name = "Mike2";
faculty2.age = 20;
faculty2.job = "Designer";

var faculty3 = new Object();
faculty3["name"] = "Mike3";
faculty3["age"] = 20;
faculty3["job"] = "Designer";

for( var i in faculty3)
{
    console.log(i + ":" + faculty3[i]);
}

嵌套对象

var faculty1 = {
    name: "Mike1",
    age:20, 
    job:"Designer", 
    address:{ 
        city:xian,
        number: A
    }
}

构造函数对象

function faculty(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.showName = function(){
        console.log(this.name);
    }
}

var Amiee = new faculty("Amiee", 27, "Stu");
Amiee.showName();

3.2.5 DOM

给定如下HTML代码：

<p class="red" id="first">The first paragraph.</p>
<p class="red small" id="second">The second paragraph.</p>

获取DOM元素的几种方式：

根据ID获取：console.log(document.getElementById("first"));
根据ClassName获取：
- 元素数组：console.log(document.getElementsByClassName("red"));
- 单个元素：console.log(document.getElementsByClassName("red")[1]);
根据Tag获取：console.log(document.getElementsByTagName("p")[1]);

使用JavaScript修改DOM的内容：

var first = document.getElementById("first");
first.innerHTML = "My Title"; //修改DOM内容为My Title
console.log(first.getAttribute("id")); //获取元素的各种属性

动态增加新节点

//添加新节点
var fisrt = document.getElementById("first");
var subspan = document.createElement("span");
subspan.innerHTML = " -- sub span --";
first.appendChild(subspan);
subspan.setAttribute("id", "span");

first.removeChild(subspan);

设置样式：属性值务必是文本类型

first.style.color = "red";
first.style.fontSize = "32px";
first.style.width="30%";

DOM事件处理

简单粗暴写在HTML中的写法：

<button id="submit" onclick="console.log('submit button clicked')"> Submit </button>

使用JavaScript的写法：

var submit = document.getElementById("submit");
submit.onclick = function(){
    console.log("submit button clicked");
}

创建单独函数并赋值的做法：

var submit = document.getElementById("submit");
function doSubmit(){
    console.log("submit button clicked");
}
submit.onclick = doSubmit();

3.2.6 移动钻石的小例子

JavaScript文件：

var logo = document.getElementById("logo");
logo.draggable = true;

var box = document.getElementById("box");
box.ondragover = function(event){
	event.preventDefault(); //去除事件的默认行为
}
box.ondrop = function(event){
	box.appendChild(logo);
}

CSS文件

@charset "UTF-8";
body {
	position:relative;
}
#logo{
	width:300px;
	height:200px;
	background:url(logo.png) center 50% no-repeat;
	position:absolute;
	left:0;
}
#box{
	width:380px;
	height:200px;
	background:#d4efdf;/*浅绿色*/
	border-radius:10px;
	border:5px dashed #27AE60;/*深绿色*/
	position:absolute;
	right:0;
}

HTML文件

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title> MOVE </title>
		<link href="move.css" rel="stylesheet">
		
	</head>
	<body>
		<div id="logo"> </div>
		<div id="box"> </div>
		<script src="move.js"></script>
	</body>
</html>

例子效果：