1.HTML的基本结构

  • <html>内容</html>：HTML文档是由<html></html>包裹，这是HTML文档的文档标记，也称为HTML开始标记。这对标记分别位于网页的最前端和最后端，<html>在最前端表示网页的开始，</html>在最后端表示网页的结束。
  • <head>内容</head>：HTML文件头标记，也称为HTML头信息开始标记。用来包含文件的基本信息，比如网页的标题、关键字，在<head></head>内可以放<tittle></title>、<meta></meta>、<style></style>等标记。注意：在<head></head>标记内的内容不会在浏览器中显示。
  • <title>内容</title>：HTML文件标题标记。网页的“主题”，显示在浏览器的窗口的左上边。
  • <body>内容</body>：<body>...<body>是网页的主体部分，在此标记之间可以包含如<p></p>、<hl></hl>、<br>、<hr>等等标记，正是这些内容组成我们所看见的网页。
  • <meta>内容<meta>：页面的元信息。提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。注意：meta标记必须放在head元素里面

2.文档设置标记

文档设置标记分为格式标记和文本标记。

以下是文档：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Python爬虫开发与项目实践</title>
</head>
<body>
Python爬虫学习第一天.<br>
<p>今天是2019-6-13，周四。是学习爬虫的第一天，当然是有一点懵的一天啦，毕竟是第一次学这个。</p>
<p>以前完全没想到，爬虫这么有趣，可以自己编辑网页。哈哈哈哈</p>
<hr>
<center>居中标记</center>
<center>居中标记2</center>
<hr>
<pre>
[00:00](music)
[00:28]你我皆凡人，生在人世间；
[00:35]终日奔波苦，一刻不得闲；
[00:43]既然不是仙，难免有杂念；
</pre>
<hr>
<p>
[00:00](music)
[00:28]你我皆凡人，生在人世间；
[00:35]终日奔波苦，一刻不得闲；
[00:43]既然不是仙，难免有杂念；
</p>
<hr>
<br>
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
<ol type="A">
<li>Coffee</li>
<li>Milk</li>
</ol>
    <dl>
    <dt>计算机</dt>
    <dd>用来计算的仪器... ...</dd>
    <dt>显示器<dt>
    <dd>以视觉方式显示信息的装置... ...</dd>
    </dl>
    <div>
        <h3>这是标题</h3>
        <p>这是段落</p>
</div>
</body>
</html>

以下是文档在浏览器中打开后的显示：

<p></p>之间的内容呈现的是一个段落（无论多少个段落都将显示成一个段落）。

<hr>呈现的是一条横线

<center></center>之间的内容呈现的形式是居中显示。

<pre>(一个段落)（一个段落）（一个段落）（一个段落）</pre>之间的每个段落以段落形式显示

<dt>内容</dt>：之间的内容显示方式为左对齐

<dd>内容</dd>：之间的内容显示方式为缩进两个字符

####<br>：强制换行标记。让后面的文字、图片、表格等等，显示在下一行

####<p>：换段落标记。

####<center>：居中对齐标记。

####<pre>：预格式化标记。保留预先编排好的格式，常用来定义计算机源代码。

####<li>：列表项目标记。每一个列表使用一个<li>标记，可用在有序列表<ol>和无序列表<ul>中

####<ol>：有序列表标记，可以显示特定的一些顺序，有序列表的type属性值“1”代表阿拉伯数字1.2.3等等......"a"...."A"...

####<dl><dt><dd>：定义型列表

####<div>：分区显示标记，也称为层标记

      显示结果为：     

     显示结果为：    

python爬虫——web前端基础（1）的更多相关文章

  1. python爬虫——web前端基础（4）

    CSS,指层叠样式表,用来定义如何显示HTML元素,一般和HTML配合使用. 在HTML中使用CSS样式的方法: 内联样式表:CSS代码直接写在现有的HTML标记中,直接使用style属性改变样式.例 ...

  2. python爬虫——web前端基础（3）

    超链接的使用------>>>> 链接的引用使用的是<a>标记. <a>标记的基本语法:<a href="链接地址"   ta ...

  3. python爬虫——web前端基础（2）

    图像标记------->>>> <img>图像标记,用来在网页中显示图像.使用方法为:<img src="路径/文件名.图片格式"  wi ...

  4. 进击的Python【第十六章】：Web前端基础之jQuery

    进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...

  5. 进击的Python【第十五章】：Web前端基础之DOM

    进击的Python[第十五章]:Web前端基础之DOM 简介:文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示 ...

  6. 进击的Python【第十四章】：Web前端基础之Javascript

    进击的Python[第十四章]:Web前端基础之Javascript 一.javascript是什么 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编 ...

  7. 进击的Python【第十三章】：Web前端基础之HTML与CSS样式

    进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客 ...

  8. Python之Web前端jQuery扩展

    Python之Web前端: 一. jQuery表单验证 二. jQuery扩展 三. 滚动菜单 一. jQuery表单验证: 任何可以交互的站点都有输入表单,只要有可能,就应该对用户输入的数据进行验证 ...

  9. 最近整理出了有关大数据，微服务，分布式，Java，Python，Web前端，产品运营，交互等1.7G的学习资料，有视频教程，源码，课件，工具，面试题等等。这里将珍藏多年的资源免费分享给各位小伙伴们

    大数据,微服务,分布式,Java,Python,Web前端,产品运营,交互 领取方式在篇尾!!! 基础篇.互联网架构,高级程序员必备视频,Linux系统.JVM.大型分布式电商项目实战视频...... ...

随机推荐

  1. JAVA源码分析------锁（1）

    http://870604904.iteye.com/blog/2258604 第一次写博客,也就是记录一些自己对于JAVA的一些理解,不足之处,请大家指出,一起探讨. 这篇博文我打算说一下JAVA中 ...

  2. 3D特效焦点图

    在线演示 本地下载

  3. 自动增量更新war包的shell脚本

    我们项目是打包成war部署在jboss中的,但在上线或者运行时,经常要修改某些类然后再增量更新到war(因为生产环境只有发布的同时有,不能每个人都打包),所以都是手动做的,耗时耗力. 我花了点时间写了 ...

  4. 时尚与深度学习系列：Fashion forward: Forecasting visual style in fashion

           https://arxiv.org/pdf/1705.06394.pdf         将深度学习与时尚预测联系在一起,是一个很有趣但是估计结果会没什么成效的话题.因为,时尚预测这一领 ...

  5. (转)[sh] <defunct>进程

    我也碰到僵尸进程了,必须通过关闭僵尸进程的父进程或者重启解决. 来自:http://jerrybear.blog.51cto.com/629421/387846 今日发现服务器上多了一些名称为[sh] ...

  6. P1880 [NOI1995]石子合并[区间dp+四边形不等式优化]

    P1880 [NOI1995]石子合并 丢个地址就跑(关于四边形不等式复杂度是n方的证明) 嗯所以这题利用决策的单调性来减少k断点的枚举次数.具体看lyd书.这部分很生疏,但是我还是选择先不管了. # ...

  7. bzoj 4753 [Jsoi2016]最佳团体——0/1分数规划

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4753 0/1分数规划裸题. #include<iostream> #includ ...

  8. HAOI2006受欢迎的牛——缩点

    题目:http://poj.org/problem?id=2186 本题是缩点模板题,将强连通分量缩成一个点,从而形成一个有向无环图,当仅有一个出度为0的点时答案即此点的大小,否则无解. 代码如下: ...

  9. jquery中attr() & prop() 的区别与其实现方法

    $(function(){ $('#check').attr('checked'); // undefind ???一头雾水 }) 在jquery中 attr 本来就是用来设置或者获取属性的,可是上面 ...

  10. Oracle 表连接方式（1）---

    Oracle 表之间的连接分为三种: 1. 内连接(自然连接) 2. 外连接 (1)左外连接 (左边的表不加限制) (2)右外连接(右边的表不加限制) (3)全外连接(左右两表都不加限制) 3. 自连 ...