突然觉得除了python,掌握简单的web相关知识挺有用的,有些需要图像化界面的任务就可以写一个web来完成,简单快捷而且只要有浏览器就能运行,通用性非常好。
1 基本元素
元素 | 含义 | 元素 | 含义 |
---|---|---|---|
<p> |
段落 | <table> |
表格 |
<a> |
链接 | <tr> |
表格的一行 |
<img> |
图片 | <td> |
表格数据 |
<h1> |
标题 | <th> |
表头 |
<hr> |
水平线 | <caption> |
表格标题 |
<span> |
一般行内元素 | <div> |
一般块级元素 |
<br> |
断行 |
大部分元素共有的属性:
属性 | 描述 |
---|---|
class | 规定元素的类名 |
id | 规定元素的唯一 id |
style | 规定元素的行内样式 |
2 CSS样式
2.1 插入样式
主要有三种方法为元素插入样式:
- 外部样式表
<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 规则由两个主要的部分构成:选择器,以及一条或多条声明,每条声明由一个属性和一个值组成。
selector {property: value; property: value; ...; property: value;}
2.2 选择器
- 元素选择器
p { font-size:2em; }
- 类选择器
info { background:#ff0; }
- id选择器
#info { background:#ff0; }
- 组合选择器
- 多元素选择器。同时匹配所有E元素或F元素。
div,p { color:#f00; }
- 后代元素选择器。匹配所有后代元素。
#nav li { display:inline; }
- 子元素选择器。匹配所有子元素。子元素和后代元素的区别,你细品。
div > strong { color:#f00; }
- 毗邻元素选择器
2.3 定位
CSS 有两个最重要的基本属性,前端开发必须掌握:display 和 position。
display属性指定网页的布局。
position属性用于网页定位,指定网页元素的位置。
- 绝对定位
- 相对定位
- 浮动定位
2.4 布局
弹性布局flex
略。
网格布局grid
首先层次上划分:
容器元素 => 网格 => 项目元素(同时也可以成为容器元素)=> 网格 => 项目元素 => ...
- 容器(container)属性
属性 | 描述 |
---|---|
display | 指定一个容器采用网格布局。display: grid; |
grid-template-columns | 定义每一列的列宽 |
grid-template-rows | 定义每一行的行高 |
grid-row-gap | 设置行与行的间隔(行间距) |
grid-column-gap | 设置列与列的间隔(列间距) |
grid-gap | 上面两项的合并简写 |
grid-template-areas | 用于定义区域。 |
grid-auto-flow | 划分网格以后,容器的子元素会按照顺序,自动放置在每一个网格。默认的放置顺序是"先行后列",即先填满第一行,再开始放入第二行. |
justify-content | 容器内整个网格的水平位置(左中右) |
align-content | 容器内整个网格的垂直位置(上中下) |
place-content | 上面两项的合并简写 |
justify-items | 网格内项目的水平位置(左中右) |
align-items | 网格内项目的垂直位置(上中下) |
place-items | 上面两项的合并简写 |
grid-auto-columns | 设置浏览器自动创建的多余网格的列宽。写法与grid-template-columns完全相同。如果不指定这个属性,浏览器完全根据单元格内容的大小,决定新增网格的列宽。 |
grid-auto-rows | 设置浏览器自动创建的多余网格的行高。写法与grid-template-rows完全相同。如果不指定这个属性,浏览器完全根据单元格内容的大小,决定新增网格的行高。 |
- 项目(item)属性. 项目只能是容器的顶层子元素,不包含项目的子元素.
属性 | 描述 |
---|---|
grid-column-start | 指定项目的位置,具体方法就是指定项目的四个边框,分别定位在哪根网格线。 |
grid-column-end | 同上。 |
grid-row-start | 同上。 |
grid-row-end | 同上。 |
grid-column | 是grid-column-start和grid-column-end的合并简写形式 |
grid-row | grid-row-start属性和grid-row-end的合并简写形式。 |
grid-area | 指定项目放在哪一个区域 |
justify-self | 设置单元格内元素的水平位置(左中右),跟justify-items属性的用法完全一致,但只作用于单个项目。 |
align-self | 设置单元格内元素的垂直位置(上中下),跟align-items属性的用法完全一致,也是只作用于单个项目。 |
place-self | 是align-self属性和justify-self属性的合并简写形式。 |
2.4 常用属性
- CSS单位
一些属性如width, height, font-size等需要指定尺寸单位。可用的单位有%, px, cm, pt, em, rem等。之前我一直使用%,但是后来发现在浏览器中放大时,页面中的图片无法跟随一起放大,所以我现在推荐使用em或rem作为单位。 - em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
浏览器的缺省字体大小是16px,你可以先将基准字体大小设为10px:
body {font-size:62.5%;}
后面统一采用em作为字体单位,2.4em就表示24px。
h1 {font-size: 2.4 em}
注意:
- em的值并不是固定的;
- 逻辑是先计算当前元素的font-size,再换算em值。如果当前元素的font-size受到父级元素的影响,那么当前元素的其他em值才会受父级元素的影响。
-
rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。
-
内边距(padding)、外边距(margin)和边框(border)
3 布局
- 用表格布局(淘汰)
- 用
<div>
和<span>
布局 - 语义元素(HTML5)
下面主要介绍后两种。
3.1 分块布局
<div>
是块级元素(block level element, 在浏览器显示时,通常会以新行来开始和结束),可用于组合其他 HTML 元素的容器。
<span>
是行内元素(inline element, 在显示时通常不会以新行开始),可用作文本的容器。
<!DOCTYPE html>
<html>
<head>
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
100px;
float:left;
padding:5px;
}
#section {
350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
</div>
<div id="section">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="footer">
Copyright W3Schools.com
</div>
</body>
</html>
3.2 语义元素(HTML5)
HTML5 提供的新语义元素定义了网页的不同部分:
名称 | 内容 |
---|---|
header | 定义文档或节的页眉 |
nav | 定义导航链接的容器 |
section | 定义文档中的节 |
article | 定义独立的自包含文章 |
aside | 定义内容之外的内容(比如侧栏) |
footer | 定义文档或节的页脚 |
details | 定义额外的细节 |
summary | 定义 details 元素的标题 |
<!DOCTYPE html>
<html>
<head>
<style>
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
100px;
float:left;
padding:5px;
}
section {
350px;
float:left;
padding:10px;
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>
<section>
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>
<footer>
Copyright W3Schools.com
</footer>
</body>
</html>
3 JavaScript脚本
JavaScript是世界上最傻x的语言,没有之一。
3.1 JavaScript基本语法
3.2 HTML DOM
我们使用JS脚本主要是为了对HTML页面进行动态编辑,而两者之间的桥梁就是DOM。
HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。换言之,HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM。
HTML中的JS代码:
- 函数之外的代码在页面加载时运行
- 函数内的代码在函数被调用时运行
通过给元素绑定事件监听器,可以在事件发生时自动调用相关的函数。有两种绑定事件监听器的方法:
- 通过元素的
onclick, onchange
等事件属性绑定监听器。可以将函数定义部分的<script>
放在HTML文件的<head>
中。
<input type="text" id="fname" onchange="upperCase(event)">
可以通过event
参数向处理函数传递事件对象。
- 借助HTML DOM访问元素增加事件监听器。注意,采取这种方法时,绑定操作要在元素标签后面进行,否则JS无法通过id找到元素对象。
<button id="myBtn">试一试</button>
<script>
document.getElementById("myBtn").onclick=function(event){displayDate(event)};
</script>
或者
<button id="myBtn">试一试</button>
<script>
document.getElementById("myBtn").addEventListener('onclick',displayDate);
</script>
后一种实现无需显式传递event
参数。
3.3 使用jQuery
jQuery是JavaScript世界中使用最广泛的一个库。
有两种方式可以导入jQuery:
- 在线导入。可以通过 CDN(内容分发网络) 引用它。谷歌和微软的服务器都存有 jQuery 。
- 离线导入。从jQuery官网可以下载最新版本。jQuery只是一个jquery-xxx.js文件,但你会看到有compressed(已压缩)和uncompressed(未压缩)两种版本,使用时完全一样,但如果你想深入研究jQuery源码,那就用uncompressed版本。
$
是著名的jQuery符号。实际上,jQuery把所有功能全部封装在一个全局变量jQuery中,而$
也是一个合法的变量名,它是变量jQuery的别名。
有了jQuery强大的选择器,就可以操作对应的DOM节点了。
- 修改Text和HTML。无参数调用
text()
是获取文本,传入参数就变成设置文本,HTML也是类似操作 - 修改CSS。调用jQuery对象的
css('name', 'value')
方法 - 显示和隐藏DOM。jQuery直接提供
show()
和hide()
方法。 - 获取DOM信息。利用jQuery对象的若干方法,我们直接可以获取DOM的高宽等信息。
- 操作表单。对于表单元素,jQuery对象统一提供
val()
方法获取和设置对应的value属性。 - 添加DOM节点。
append()
把DOM添加到最后,prepend()
则把DOM添加到最前。 - 删除DOM节点。拿到jQuery对象后直接调用
remove()
方法就可以。
JavaScript在浏览器中以单线程模式运行,页面加载后,一旦页面上所有的JavaScript代码被执行完后,就只能依赖触发事件来执行JavaScript代码。
on
方法用来绑定一个事件,我们需要传入事件名称和对应的处理函数。jQuery能够绑定的事件主要包括:
- 鼠标事件
- click: 鼠标单击时触发;
- dblclick:鼠标双击时触发;
- mouseenter:鼠标进入时触发;
- mouseleave:鼠标移出时触发;
- mousemove:鼠标在DOM内部移动时触发;
- hover:鼠标进入和退出时触发两个函数,相当于mouseenter加上mouseleave。
- 键盘事件。键盘事件仅作用在当前焦点的DOM上,通常是
<input>
和<textarea>
。- keydown:键盘按下时触发;
- keyup:键盘松开时触发;
- keypress:按一次键后触发。
- 其他事件
- focus:当DOM获得焦点时触发;
- blur:当DOM失去焦点时触发;
- change:当
<input>
、<select>
或<textarea>
的内容改变时触发; - submit:当
<form>
提交时触发; - ready:当页面被载入并且DOM树完成初始化后触发。
所有事件都会传入Event对象作为参数,可以从Event对象上获取到更多的信息。
事件的触发总是由用户操作引发的,但有些时候,我们希望用代码触发change
事件,可以直接调用无参数的change()
方法来触发该事件。