jacksoncode.github.io/tutorials/python/102.html at master · jacksoncode/jacksoncode.github.io

Repository navigation

History

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

<!DOCTYPE html>

<head>

<title>22.2. HTML简介 - CodeClub</title>

<style>

.tutorial-container { max-width: 960px; margin: 70px auto 40px; padding: 0 20px; }

.tutorial-sidebar { position: fixed; top: 70px; left: 20px; width: 260px; max-height: calc(100vh - 90px); overflow-y: auto; background: var(--bg-secondary, #fff); border-radius: 8px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

.tutorial-sidebar h3 { font-size: 16px; margin-bottom: 12px; color: var(--text-primary, #1a1a2e); }

.tutorial-sidebar a { display: block; padding: 6px 10px; color: var(--text-secondary, #666); text-decoration: none; font-size: 14px; border-radius: 4px; }

.tutorial-sidebar a:hover, .tutorial-sidebar a.active { background: var(--primary, #3b82f6); color: #fff; }

.tutorial-sidebar .sub-link { padding-left: 24px; font-size: 13px; }

.tutorial-content { margin-left: 300px; background: var(--bg-secondary, #fff); border-radius: 8px; padding: 32px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

.tutorial-content h1 { font-size: 28px; margin-bottom: 20px; color: var(--text-primary, #1a1a2e); border-bottom: 2px solid var(--primary, #3b82f6); padding-bottom: 12px; }

.tutorial-content h2 { font-size: 22px; margin: 24px 0 16px; color: var(--text-primary, #1a1a2e); }

.tutorial-content h3 { font-size: 18px; margin: 20px 0 12px; }

.tutorial-content p { line-height: 1.8; margin: 12px 0; color: var(--text-secondary, #333); }

.tutorial-content pre { background: #1e1e2e; color: #cdd6f4; padding: 16px; border-radius: 8px; overflow-x: auto; margin: 16px 0; }

.tutorial-content code { font-family: 'Fira Code', 'Cascadia Code', monospace; font-size: 14px; }

.tutorial-content p code { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; color: #e83e8c; }

.tutorial-content blockquote { border-left: 4px solid var(--primary, #3b82f6); padding: 12px 20px; margin: 16px 0; background: #f8fafc; border-radius: 0 8px 8px 0; }

.tutorial-content ul, .tutorial-content ol { padding-left: 24px; margin: 12px 0; }

.tutorial-content li { margin: 6px 0; line-height: 1.7; }

.tutorial-content img { max-width: 100%; border-radius: 8px; margin: 16px 0; }

.tutorial-nav { display: flex; justify-content: space-between; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border, #e5e7eb); }

.tutorial-nav a { color: var(--primary, #3b82f6); text-decoration: none; font-weight: 500; }

.tutorial-nav a:hover { text-decoration: underline; }

.tutorial-index { max-width: 960px; margin: 70px auto 40px; padding: 0 20px; }

.tutorial-card { background: var(--bg-secondary, #fff); border-radius: 12px; padding: 24px; margin: 16px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: transform 0.2s; }

.tutorial-card:hover { transform: translateY(-2px); }

.tutorial-card h3 { margin: 0 0 8px; color: var(--text-primary, #1a1a2e); }

.tutorial-card p { color: var(--text-secondary, #666); margin: 0 0 12px; }

.tutorial-card .badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; margin-right: 8px; }

.badge-python { background: #3b82f6; color: #fff; }

.badge-git { background: #f97316; color: #fff; }

.badge-ai { background: #8b5cf6; color: #fff; }

@media (max-width: 768px) {

.tutorial-sidebar { display: none; }

.tutorial-content { margin-left: 0; }

}

</style>

</head>

<body>

CodeClub

</a>

</button>

</ul>

</div>

</nav>

<div class="tutorial-container" style="max-width: 960px; margin: 80px auto 40px; padding: 0 20px;"><div class="tutorial-sidebar"><h3>目录</h3><a href="0.html">1. 简介</a><a href="1.html">2. Python历史</a><a href="2.html">3. 安装Python</a><a href="3.html">3.1. Python解释器</a><a href="4.html">4. 第一个Python程序</a><a href="5.html">4.1. 使用文本编辑器</a><a href="6.html">4.2. 输入和输出</a><a href="7.html">5. Python基础</a><a href="8.html">5.1. 数据类型和变量</a><a href="9.html">5.2. 字符串和编码</a><a href="10.html">5.3. 使用list和tuple</a><a href="11.html">5.4. 条件判断</a><a href="12.html">5.5. 模式匹配</a><a href="13.html">5.6. 循环</a><a href="14.html">5.7. 使用dict和set</a><a href="15.html">6. 函数</a><a href="16.html">6.1. 调用函数</a><a href="17.html">6.2. 定义函数</a><a href="18.html">6.3. 函数的参数</a><a href="19.html">6.4. 递归函数</a><a href="20.html">7. 高级特性</a><a href="21.html">7.1. 切片</a><a href="22.html">7.2. 迭代</a><a href="23.html">7.3. 列表生成式</a><a href="24.html">7.4. 生成器</a><a href="25.html">7.5. 迭代器</a><a href="26.html">8. 函数式编程</a><a href="27.html">8.1. 高阶函数</a><a href="28.html">8.1.1. map/reduce</a><a href="29.html">8.1.2. filter</a><a href="30.html">8.1.3. sorted</a><a href="31.html">8.2. 返回函数</a><a href="32.html">8.3. 匿名函数</a><a href="33.html">8.4. 装饰器</a><a href="34.html">8.5. 偏函数</a><a href="35.html">9. 模块</a><a href="36.html">9.1. 使用模块</a><a href="37.html">9.2. 安装第三方模块</a><a href="38.html">10. 面向对象编程</a><a href="39.html">10.1. 类和实例</a><a href="40.html">10.2. 访问限制</a><a href="41.html">10.3. 继承和多态</a><a href="42.html">10.4. 获取对象信息</a><a href="43.html">10.5. 实例属性和类属性</a><a href="44.html">11. 面向对象高级编程</a><a href="45.html">11.1. 使用__slots__</a><a href="46.html">11.2. 使用@property</a><a href="47.html">11.3. 多重继承</a><a href="48.html">11.4. 定制类</a><a href="49.html">11.5. 使用枚举类</a><a href="50.html">11.6. 使用元类</a><a href="51.html">12. 错误、调试和测试</a><a href="52.html">12.1. 错误处理</a><a href="53.html">12.2. 调试</a><a href="54.html">12.3. 单元测试</a><a href="55.html">12.4. 文档测试</a><a href="56.html">13. IO编程</a><a href="57.html">13.1. 文件读写</a><a href="58.html">13.2. StringIO和BytesIO</a><a href="59.html">13.3. 操作文件和目录</a><a href="60.html">13.4. 序列化</a><a href="61.html">14. 进程和线程</a><a href="62.html">14.1. 多进程</a><a href="63.html">14.2. 多线程</a><a href="64.html">14.3. ThreadLocal</a><a href="65.html">14.4. 进程 vs. 线程</a><a href="66.html">14.5. 分布式进程</a><a href="67.html">15. 正则表达式</a><a href="68.html">16. 常用内建模块</a><a href="69.html">16.1. datetime</a><a href="70.html">16.2. collections</a><a href="71.html">16.3. argparse</a><a href="72.html">16.4. base64</a><a href="73.html">16.5. struct</a><a href="74.html">16.6. hashlib</a><a href="75.html">16.7. hmac</a><a href="76.html">16.8. itertools</a><a href="77.html">16.9. contextlib</a><a href="78.html">16.10. urllib</a><a href="79.html">16.11. XML</a><a href="80.html">16.12. HTMLParser</a><a href="81.html">16.13. venv</a><a href="82.html">17. 常用第三方模块</a><a href="83.html">17.1. Pillow</a><a href="84.html">17.2. requests</a><a href="85.html">17.3. chardet</a><a href="86.html">17.4. psutil</a><a href="87.html">18. 图形界面</a><a href="88.html">18.1. 海龟绘图</a><a href="89.html">19. 网络编程</a><a href="90.html">19.1. TCP/IP简介</a><a href="91.html">19.2. TCP编程</a><a href="92.html">19.3. UDP编程</a><a href="93.html">20. 电子邮件</a><a href="94.html">20.1. SMTP发送邮件</a><a href="95.html">20.2. POP3收取邮件</a><a href="96.html">21. 访问数据库</a><a href="97.html">21.1. 使用SQLite</a><a href="98.html">21.2. 使用MySQL</a><a href="99.html">21.3. 使用SQLAlchemy</a><a href="100.html">22. Web开发</a><a href="101.html">22.1. HTTP协议简介</a><a href="102.html">22.2. HTML简介</a><a href="103.html">22.3. WSGI接口</a><a href="104.html">22.4. 使用Web框架</a><a href="105.html">22.5. 使用模板</a><a href="106.html">23. 异步IO</a><a href="107.html">23.1. 协程</a><a href="108.html">23.2. 使用asyncio</a><a href="109.html">23.3. 使用aiohttp</a><a href="110.html">24. FAQ</a><a href="111.html">25. 期末总结</a></div><div class="tutorial-content"><h1>22.2. HTML简介</h1><div class="tutorial-body">HTML长什么样？上次我们看了新浪首页的HTML源码，如果仔细数数，竟然有6000多行！

所以，学HTML，就不要指望从新浪入手了。我们来看看最简单的HTML长什么样：

<head>

<title>Hello</title>

</head>

<body>

<h1>Hello, world!</h1>

</body>

</html>

</code></pre>

可以用文本编辑器编写HTML，然后保存为<code>hello.html</code>，双击或者把文件拖到浏览器中，就可以看到效果：

HTML文档就是一系列的Tag组成，最外层的Tag是<code><html></code>。规范的HTML也包含<code><head>...</head></code>和<code><body>...</body></code>（注意不要和HTTP的Header、Body搞混了），由于HTML是富文档模型，所以，还有一系列的Tag用来表示链接、图片、表格、表单等等。

<h3>CSS简介</h3>

CSS是Cascading Style Sheets（层叠样式表）的简称，CSS用来控制HTML里的所有元素如何展现，比如，给标题元素<code><h1></code>加一个样式，变成48号字体，灰色，带阴影：

<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>

</code></pre>

效果如下：

<h3>JavaScript简介</h3>

JavaScript虽然名称有个Java，但它和Java真的一点关系没有。JavaScript是为了让HTML具有交互性而作为脚本语言添加的，JavaScript既可以内嵌到HTML中，也可以从外部链接到HTML中。如果我们希望当用户点击标题时把标题变成红色，就必须通过JavaScript来实现：

<head>

<title>Hello</title>

<style>

h1 {

color: #333333;

font-size: 48px;

}

</style>

function change() {

document.getElementsByTagName('h1')[0].style.color = '#ff0000';

}

</script>

</head>

<body>

<h1 onclick="change()">Hello, world!</h1>

</body>

</html>

</code></pre>

点击标题后效果如下：

如果要学习Web开发，首先要对HTML、CSS和JavaScript作一定的了解。HTML定义了页面的内容，CSS来控制页面元素的样式，而JavaScript负责页面的交互逻辑。

讲解HTML、CSS和JavaScript就可以写3本书，对于优秀的Web开发人员来说，精通HTML、CSS和JavaScript是必须的，这里推荐一个在线学习网站<a href="https://www.w3schools.com/" target="_blank">w3schools</a>，以及一个对应的<a href="https://www.w3school.com.cn/" target="_blank">中文版本</a>。

当我们用Python或者其他语言开发Web应用时，我们就是要在服务器端动态创建出HTML，这样，浏览器就会向不同的用户显示出不同的Web页面。

</div>

<a href="/books/python/web/http-basic/index.html"

onclick="gs_load_chapter('/books/python/web/http-basic/index.html',true);return false;"

class="inline-block my-2">

stroke="currentColor">

<path stroke-linecap="round" stroke-linejoin="round"

d="M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5" />

</svg>

HTTP协议简介

</a>

</div>

<a href="/books/python/web/wsgi/index.html"

onclick="gs_load_chapter('/books/python/web/wsgi/index.html',true);return false;"

class="inline-block my-2">

WSGI接口

stroke="currentColor">

<path stroke-linecap="round" stroke-linejoin="round"

d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" />

</svg>

</a></div><div style="display: flex; justify-content: space-between; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border, #e5e7eb);"><a href="101.html" style="color: var(--primary, #3b82f6); text-decoration: none; font-weight: 500;">← 22.1. HTTP协议简介</a><a href="103.html" style="color: var(--primary, #3b82f6); text-decoration: none; font-weight: 500;">22.3. WSGI接口 →</a></div>原文：<a href="https://liaoxuefeng.com/books/python/web/html-basic/index.html" style="color: var(--primary, #3b82f6);">廖雪峰 - 22.2. HTML简介</a></div></div>

</div>

</footer>

</body>

</html>

FilesExpand file tree

102.html

Latest commit

History

102.html

File metadata and controls