HTML简介
网页就是HTML?这么理解大概没错。因为网页中不但包含文字,还有图片、视频、Flash小游戏,有复杂的排版、动画效果,所以,HTML定义了一套语法规则,来告诉浏览器如何把一个丰富多彩的页面显示出来。
HTML长什么样?上次我们看了新浪首页的HTML源码,如果仔细数数,竟然有6000多行!
所以,学HTML,就不要指望从新浪入手了。我们来看看最简单的HTML长什么样:
<html>
<head>
<title>Hello</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
可以用文本编辑器编写HTML,然后保存为hello.html
,双击或者把文件拖到浏览器中,就可以看到效果:
HTML文档就是一系列的Tag组成,最外层的Tag是<html>
。规范的HTML也包含<head>...</head>
和<body>...</body>
(注意不要和HTTP的Header、Body搞混了),由于HTML是富文档模型,所以,还有一系列的Tag用来表示链接、图片、表格、表单等等。
CSS简介
CSS是Cascading Style Sheets(层叠样式表)的简称,CSS用来控制HTML里的所有元素如何展现,比如,给标题元素<h1>
加一个样式,变成48号字体,灰色,带阴影:
<html>
<head>
<title>Hello</title>
<style>
h1 {
color: #333333;
font-size: 48px;
text-shadow: 3px 3px 3px #666666;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
效果如下:
JavaScript简介
JavaScript虽然名称有个Java,但它和Java真的一点关系没有。JavaScript是为了让HTML具有交互性而作为脚本语言添加的,JavaScript既可以内嵌到HTML中,也可以从外部链接到HTML中。如果我们希望当用户点击标题时把标题变成红色,就必须通过JavaScript来实现:
<html>
<head>
<title>Hello</title>
<style>
h1 {
color: #333333;
font-size: 48px;
text-shadow: 3px 3px 3px #666666;
}
</style>
<script>
function change() {
document.getElementsByTagName('h1')[0].style.color = '#ff0000';
}
</script>
</head>
<body>
<h1 onclick="change()">Hello, world!</h1>
</body>
</html>
点击标题后效果如下:
小结
如果要学习Web开发,首先要对HTML、CSS和JavaScript作一定的了解。HTML定义了页面的内容,CSS来控制页面元素的样式,而JavaScript负责页面的交互逻辑。
讲解HTML、CSS和JavaScript就可以写3本书,对于优秀的Web开发人员来说,精通HTML、CSS和JavaScript是必须的,这里推荐一个在线学习网站w3schools:
以及一个对应的中文版本:
当我们用Python或者其他语言开发Web应用时,我们就是要在服务器端动态创建出HTML,这样,浏览器就会向不同的用户显示出不同的Web页面。
相关文章
- Python从0到1丨细说图像增强及运算
- Python图像处理丨详解图像去雾处理方法
- 盘点Python 中字符串的常用操作
- 从0到1学Python丨图像平滑方法的两种非线性滤波:中值滤波、双边滤波
- 跟我学Python图像处理丨带你入门OpenGL
- 跟我学Python图像处理丨图像分类原理与案例
- Python 中 Pickle 库的使用详解
- Python: PyQt5在Pycharm中的配置
- Python: 按位或运算符(Bitwise OR)
- 不知道"鸭子类型"就当没学过python
- 盘一盘 Python 特别篇 23 - 爱因斯坦求和 einsum
- Python中的一个神秘文件:__init__.py 使用讲解
- 孤陋寡闻了,Python中类竟可以像列表一样操作
- Python表白C#?文末有彩蛋!
- (数据科学学习手札147)Python GIS利器shapely全新2.0版本一览
- Python 大数据量文本文件高效解析方案代码实现
- Python3.11正式版,它来了!
- 入门Python,看完这篇就行了!
- Python操作Excel表格
- Python实现XMind测试用例快速转Excel用例