Python学习笔记：22 HTML5基础和CSS基础

了解一些HTML5的基础知识和CSS基础知识有助于爬虫的学习，在学习这些基础知识之前，首先要安装HBuiderX工具。直接到官网下载标准版即可。

HTML基础

可以到HTML教程学习一下HTML基础知识。

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

打开HBuiderX工具，新建项目

在index.html中写入如下代码：

<!-- HTML：超文本标记语言 -->
<!-- HTML后缀名：.html / .htm -->
<!-- HTML标签名 -->
<!-- 一般标签：由起始标签和结束标签组成，可以插入其他标签或其他内容，例如：<h1>yyds</h1> -->
<!-- 自闭合标签：由起始标签组成，在起始标签末尾加斜杠，在其中间不能加任何东西例如：<br /> -->
<!-- HTML中标准是双引号 -->
<!-- HTML没有区分大小写 -->
<!-- 格式化代码：ctrl + k / 右键选择重排代码格式 -->
<!-- ! + tab键 自动生成初始代码--><!-- 声明此文档为HTML5文档 -->
<!DOCTYPE html>
<!-- 定义了HTML文档 -->
<html lang="zh">
<!-- 提供需要定义的信息 -->
<head><!-- 元信息 --><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!-- 定义标题名 --><title>HTML基础</title><link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<!-- 在body标签写页面可见元素 -->
<body><!-- div：把不属于一类的标签间隔开 --><div class="a"><!-- 标题标签：<h1>、<h2>、<h3>、<h4>、<h5>、<h6> --><h1 id="a">我是标题标签h1</h1><h2>我是标题标签h2</h2><h3>我是标题标签h3</h3><h4>我是标题标签h4</h4><h5>我是标题标签h5</h5><h6>我是标题标签h6</h6><!-- 段落标签：<p> --><p>YYDS</p><p>段落标签</p><p>我爱<br />我的<br />祖国</p><!-- 超链接标签：<a> --><a href="https://www.baidu.com/" target="_blank">百度</a><!-- 图像标签：<img /> --><!-- 在线图片 --><img src="https://www.baidu.com/img/flexible/logo/pc/result.png" width="60px"/><!-- 相对路径：相对于当前项目文件目录下，寻找引入文件的路径./：表示当前目录（可以省略不写）../：表示上一级目录--><img src="./img/头像.png" width="50px" height="50px"/><!-- 绝对路径：在电脑资源盘下的资源路径，相对于电脑 --><img src="D:\project\HTML基础\img\头像.png" height="50px" width="50px"/><!-- href和src区别 --><!-- href：负责引入超文本（HTML、css、js） --><!-- src：负责引入资源文件（图片、音频、视频），并将引入的资源嵌入到页面上 --><!-- 音频文件：<audio> --><audio controls src="music/1.m4a"></audio><br /><!-- 视频文件：<video --><video controls src="video/puppy_2.mp4" width="400px " height="200px"></video></div><div class="b"><!-- 列表：有序列表和无序列表 --><ol>有序列表<li>海贼王</li><li>火影忍者</li><li>斗罗大陆</li><li>名侦探柯南</li></ol><ul>无序列表<li>王者荣耀</li><li>摩尔庄园</li><li>和平精英</li><li>LOL</li></ul><!-- iframe框架：在当前页面嵌套一个新页面 --><iframe src="https://www.chinanews.com/" width="500px" height="500px"></iframe></div><div class="c"><!-- 表格：<tbody> --><!-- <tr>：表格的行数 --><!-- <th>：表头 --><!-- <td>：存放内容的单元格 --><tbody><tr><th>队名</th><th>第一节</th><th>第二节</th><th>第三节</th><th>第四节</th><th>总分</th></tr><br /><tr><td>太阳</td><td>&nbsp;&nbsp;16&nbsp;&nbsp;</td><td>&nbsp;&nbsp;&nbsp;13&nbsp;&nbsp;</td><td>&nbsp;&nbsp;&nbsp;30&nbsp;&nbsp;</td><td>21</td><td>98</td></tr><br /><tr><td>雄鹿</td><td>29</td><td>13</td><td>35</td><td>28</td><td>105</td></tr><br /></tbody><!-- 换行标签：<br /> --><!-- 水平线标签：<hr /> --><hr /><!-- 加粗标签：<b> / <strong> --><b>YYDS</b><strong>YYDS</strong><!-- 斜体标签：i / em --><i>文字倾斜</i><em>文字倾斜</em><!-- 表单标签：<form> --><form>账号：<input type="tel" /><br />密码：<input type="password" /><br /><input type="submit" value="登录"><input type="reset" value="重置"></form></div>
</body>
</html>

一些快捷键：

ctrl + /：注释代码。
标签 * n + tab键：重复标签n次，例如：td*5 + tab键，自动生成5行<td></td>。
! + tab键：自动生成初始化代码。
ctrl + k：格式化代码。
按住ctrl，鼠标点击代码不同位置，键盘录入内容，会在鼠标点击过的地方生成一样的录入的内容。

CSS基础

可以到CSS基础学习一下CSS基础知识。

通过使用 CSS 我们可以大大提升网页开发的工作效率。

在刚刚创建的项目文件下的css文件夹下新建css文件，在其中写入以下代码：

/* CSS是用于描述HTML样式的编程语言 */
/*  CSS引入分为：行内式、内嵌式、外链式 *//* 通配符选择器 */
* {/* 外边距 */margin: none;/* 内边距 */padding: none;
}/* 类选择器 */
.a {border: 1px solid red;
}.b {border: 1px double blue;
}.c {border: 1px dotted green;
}/* id选择器 */
#a {color: aqua;font-family: "宋体";font-size: 20px;
}/* 标签选择器 */
/* 将前端中所有<p>标签都变成指定样式 */
p {font-size: 30px;
}/* 父子选择器 */
/* 修改指定标签下的某个标签位置 */
.a > h2 {text-align: center;
}/* 后代选择器 */
.b li {color: blueviolet;
}/* 兄弟选择器 */
/* 和连接符左边的标签同级关系的下方所有标签都是他的兄弟 */
h1 ~ h6 {text-align: center;
}/* 相邻兄弟选择器 */
/* 只能选择连接符左边的标签同级的相邻的下方的标签 */
h1+h2{font-family: "仿宋";
}/* nth-child选择器 */
/* nth-child只根据同级关系查找 */
.b > ol > li:nth-child(3) {color: #FF0000;
}/* 属性选择器 */
input[type=submit]{background-color: #008000;color: white;border: none;
}form {border: 2px solid black;width: 400px;/* margin-left: 650px; *//* 上右下左 *//* 内边距 */margin: 20px 200px 20px 650px;/* 外边距 */padding-left: 200px;
}

掌握以上基础知识，对于爬虫的学习会有很大帮助。

Python学习笔记：22 HTML5基础和CSS基础相关推荐

HTML5学习笔记（五）：CSS基础
CSS 指层叠样式表 (Cascading Style Sheets),在网页中用来定义网页的元素如何进行显示. CSS 对大小写不敏感.不过存在一个例外:如果涉及到与 HTML 文档一起工作的话,c ...
C#学习笔记8：HTML和CSS基础学习笔记
<!-- 1.<P>...</P>段落标签 2.<br/>折行标签. 3.<img src="" height="*px& ...
python学习笔记六初识面向对象上（基础篇）
python面向对象面向对象编程(Object-Oriented Programming )介绍对于编程语言的初学者来讲,OOP不是一个很容易理解的编程方式,虽然大家都知道OOP的三大特性是继承. ...
【Python学习笔记】第一章基础知识：格式化输出，转义字符，变量类型转换，算术运算符，运算符优先级和赋值运算符，逻辑运算符，世界杯案例题目，条件判断if语句，猜拳游戏与三目运算符
Python学习笔记之[第一章]基础知识前言: 一.格式化输出 1.基本格式: 2.练习代码: 二.转义字符 1.基本格式: 2.练习代码: 3.输出结果: 三.输入 1.基本格式: 2.练习代码: ...
零基础学Python学习笔记
Python学习笔记代码下载地址链接:https://pan.baidu.com/s/1yGnpfq4ZHeKpt4V0J_PTSg 提取码:hmzs 1. Python 基础语法 1.1 基本数 ...
Python学习笔记之入门基础
课程链接:Python入门教程--基础阶段_哔哩哔哩_bilibili Python学习笔记注释单行注释: * 多行注释: 1.多行前面加# 2."""注释信息&qu ...
Python学习笔记_1_基础_2：数据运算、bytes数据类型、.pyc文件（什么鬼）
Python学习笔记_1_基础_2:数据运算.bytes数据类型..pyc文件(什么鬼) 一.数据运算 Python数据运算感觉和C++,Java没有太大的差异,百度一大堆,这里就不想写了.比较有意思 ...
Python学习笔记---------廖雪峰（基础和函数）
Python学习笔记---------廖雪峰(基础和函数)
Python 学习笔记 D1（基础）
Python 学习笔记 D1(基础) 1.注释 #一个注释 ''' 多行注释 ''' 2.运算符与C++相同:+,-,*,/,%,>,<,=,>=,<=,==,!= 与C++不 ...
Python学习笔记 1.0 基础内容篇章
Python学习笔记 1.0 基础内容篇章注释变量一.定义变量二.使用变量 bug和debug bug: Debug工具: 数据类型认识数据类型在定义数据类型时发生的错误: 数据类型的补表 ...

Python学习笔记：22 HTML5基础和CSS基础

HTML基础

CSS基础

Python学习笔记：22 HTML5基础和CSS基础相关推荐

最新文章

热门文章