【头歌】大数据分析及应用-HTML - 文本&HTML - 基础& 数据解析 - 网页&爬虫 - Requests&HTML - HTTP基础&HTML - 基本标签

HTML - 文本

第1关：HTML链接：带超链接的网页

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>HTML链接</title>
    <meta name="description" content="HTML链接知识讲解">
    <meta name="keywords" content="HTML, Link">
</head>
  <!--------- Begin-------->

<body>
    <h1>HTML 入门</h1>
    <h2>本页目录</h2>
    <ul>
        <li><a href="#toc1">简介</a></li>
        <li><a href="#toc2">第1关</a></li>
        <li><a href="#toc3">第2关</a></li>
    </ul>

    <h2 id="toc1">简介</h2>
    <p>
        <a href="https://en.wikipedia.org/wiki/HTML" target="_blank">HTML</a>(Hypertext Markup Language，超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。在
        <a href="https://en.wikipedia.org/wiki/CSS" target="_blank">CSS</a>(Cascading Style Sheets，级联样式表单)和
        <a href="https://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a>的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台。</p>
    <p>自1995年HTML2.0面世，HTML陆续推出了得到广泛应用的HTML3.2和HTML4.0标准，2014年HTML5标准的面世使其在多媒体和移动性方面得到了全面提升，使HTML迎来了新的爆发式发展。</p>

    <h2 id="toc2">第1关</h2>
    <p>初识HTML：简单的Hello World网页</p>
    <h2 id="toc3">第2关</h2>
    <p>HTML链接：带超链接的网页</p>
    <hr>
    <p>若需帮助，请发送问题到<a href="mailto:someone@email.com">E-Mail</a>。</p>
    <p><a href="#">回到顶部</a></p>
</body>
  <!--------- End-------->

</html>

第2关：HTML标题与段落：网络文章网页

<!DOCTYPE html>

<head>
    <meta charset="UTF-8" />
    <title>HTML – 维基百科</title>
</head>
  <!--------- Begin-------->

<body>
    <h1>HTML</h1>
    <p>超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的
        <a href="https://en.wikipedia.org/wiki/Markup_language" title="Markup language" target="_blank">标记语言</a>。 在级联样式表单(CSS)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台<sup><a href="#ref1">[1]</a></sup>。
    </p>
    <h2>历史</h2>
    <h3>开发过程</h3>
    <p>1980年，物理学家<a href="https://en.wikipedia.org/wiki/Tim_Berners-Lee" title="Tim Berners-Lee" target="_blank">Tim Berners-Lee</a>，
        <a href="https://en.wikipedia.org/wiki/CERN" title="CERN" target="_blank">CERN</a>的一位项目负责人，提出并实现了<a href="https://en.wikipedia.org/wiki/ENQUIRE" title="ENQUIRE" target="_blank">ENQUIRE</a>系统。该系统的目的是为CERN研究人员提供一种使用和分享文档。1989年， Berners-Lee写了一个备忘录，提出了基于Internet-based
        <strong>超文本系统</strong><sup><a href="#ref2">[2]</a></sup>。
    </p>
    <h3>HTML里程碑</h3>
    <dl>
        <dt>1995年11月24日</dt>
        <dd>HTML2.0发布，对应的IETF文档为<a class="external mw-magiclink-rfc" rel="nofollow" href="https://tools.ietf.org/html/rfc1866" target="_blank">RFC 1866</a>。</dd>
        <dt>1997年1月14日</dt>
        <dd>HTML 3.2以
            <a href="https://en.wikipedia.org/wiki/W3C_Recommendation" class="mw-redirect" title="W3C Recommendation" target="_blank">
                <abbr title="World Wide Web Consortium">W3C</abbr>推荐标准</a>的形式发布。 随后的HTML标准都由W3C组织发布。</dd>
        <dt>1997年12月18日</dt>
        <dd>HTML 4.0发布<sup><a href="#ref3">[3]</a></sup>。</dd>
        <dt>2014年10月28日</dt>
        <dd>HTML5 发布。</dd>
        <dt>2016年11月1日</dt>
        <dd>HTML 5.1发布。</dd>
    </dl>
    <h2>参考文献</h2>
        <ol>
        <small>
            <li id='ref1'>Flanagan, David. <i>JavaScript - The definitive guide</i> (6 ed.). p.&#160;1. "JavaScript is part of the triad of technologies that all Web developers must learn: HTML to specify the content of web pages, CSS to specify the presentation of web pages, and JavaScript to specify the behaviour of web pages."</li>
            <li id="ref2">Tim Berners-Lee, "Information Management: A Proposal." CERN (March 1989, May 1990). </li>
            <li id="ref3">"HTML 4.0 Specification — W3C Recommendation — Conformance: requirements and recommendations". World Wide Web Consortium. December 18, 1997. Retrieved July 6, 2015.</li>
        </small>
        </ol>
</body>
  <!--------- End-------->

</html>

第3关：HTML表格：日常消费账单表格展示网页

<!DOCTYPE html>
<html>
  <!--------- Begin-------->

<head>
    <meta charset="utf-8">
    <title>HTML表格</title>
    <meta name="description" content="HTML表格知识讲解">
    <meta name="keywords" content="HTML,表格, Table">
    <style type="text/css">
    table {
        border-collapse: collapse;
    }

    caption {
        font-weight: bold;
        margin-bottom: .5em;
    }

    th,
    td {
        padding: .5em .75em;
        border: 1px solid #000;
    }

    tfoot {
        font-weight: bold;
    }
    </style>
</head>

<body>
    <table border="1" style="margin:auto" width="400">
        <caption>日常消费账单</caption>
        <thead>
            <!-- 表格头部 -->
            <tr>
                <th align="left" scope="col">消费项目</th>
                <th align="right" scope="col">一月</th>
                <th align="right" scope="col">二月</th>
            </tr>
        </thead>
        <tbody>
            <!-- 表格主体 -->
            <tr>
                <th align="left" scope="row">食品烟酒</th>
                <td align="right">￥1241.00</td>
                <td align="right">￥1250.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">衣物</th>
                <td align="right">￥330.00</td>
                <td align="right">￥594.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">居住</th>
                <td align="right">￥2100</td>
                <td align="right">￥2100</td>
            </tr>
            <tr>
                <th align="left" scope="row">生活用品及服务</th>
                <td align="right">￥700.00</td>
                <td align="right">￥650.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">医疗保健</th>
                <td align="right">￥150.00</td>
                <td align="right">￥50.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">教育、文化和娱乐</th>
                <td align="right">￥1030.00</td>
                <td align="right">￥1250.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">交通和通信</th>
                <td align="right">￥230.00</td>
                <td align="right">￥650.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">其他用品和服务</th>
                <td align="right">￥130.40</td>
                <td align="right">￥150.00</td>
            </tr>
        </tbody>
        <tfoot>
            <!-- 表格尾部 -->
            <tr>
                <th align="left" scope="row">总计</th>
                <th align="right">￥5911</th>
                <th align="right">￥6694</th>
            </tr>
        </tfoot>
    </table>
</body>
  <!--------- End-------->

</html>

HTML - 基础

第1关：初识HTML：简单的Hello World网页制作

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello world</title>
  </head>  
    <!--------- Begin-------->

  <body bgcolor="F6F3D6">
    <!--用HTML语言向世界打声招呼吧！-->
    <h1 align="center">Hello World</h1>
    <p align="center">动手改变世界</p>
  </body>
    <!--------- End-------->

</html>

第2关：HTML结构：自我简介网页

<!DOCTYPE html>
<html>
    <!--------- Begin-------->

  <head>
    <meta charset="utf-8">
    <title>自我简介</title>
    <meta name="description" content="XXX的自我简介网站">
    <meta name="keywords" content="自我简介,关键词一,关键词二,关键词三">
  </head>
  <body>
    <h1 align="center">自我简介</h1>

    <h2>简介</h2>
    <p>在这里简单的描述一下你自己吧。</p>

    <h2>三个与你最有关的词</h2>
    <p>这三个词可以是一种形容，也可以是一种运动或者是一种独特的爱好，等等。</p>
    <ul>
        <li>第一个词</li>
        <p>选择第一个词的原因</p>
        <li>第二个词</li>
        <p>选择第二个词的原因</p>
        <li>第三个词</li>
        <p>选择第三个词的原因</p>
    </ul>
</body>
  <!--------- End-------->

</html>

数据解析 - 网页

第1关：XPath解析网页

import urllib.request

from lxml import etree

def get_data(url):
    '''
    :param url: 请求地址
    :return: None
    '''
    response=urllib.request.urlopen(url=url)
    html=response.read().decode("utf-8")
    # *************** Begin *************** #
    parse = etree.HTML(html)  
    # 写入xpath路径  
    item_list = parse.xpath("//div[@class='left']/ul/li/span/a/text()")   
    #item_list = parse.xpath("/html/body/div[2]/div[1]/ul/li/span/a.text()")   
    # *************** End ***************** #

    print(item_list)

第2关：BeautifulSoup解析网页

import requests
from bs4 import BeautifulSoup
def get_data(url, headers):
    '''
    两个参数
    :param url:统一资源定位符,请求网址
    :param headers:请求头
    :return data:list类型的所有古诗内容
    '''
    # ***************** Begin ******************** #
    response = requests.get(url, headers=headers)  
    response.encoding = "utf-8"  
    html = response.text  
    soup = BeautifulSoup(html, 'lxml')  
    data = soup.find('div', {'class': 'left'}).ul.find_all('li')  
    data = [i.p.text for i in data]
    # ****************** end ********************* #
    return data

爬虫 - Requests

第1关：requests 基础

import requests

def get_html(url):
    '''
    两个参数
    :param url:统一资源定位符,请求网址
    :param headers:请求头
    :return:html
    '''

    # ***************** Begin ******************** #

    # 补充请求头
    headers={"User-Agent": "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/"
                  "537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36"}
    # get请求网页
    response = requests.get(url=url, headers=headers)  # 模拟登录请求
    response.encoding = "utf-8"  # 定义编码
    # 获取网页信息文本
    html = response.text
    # ***************** End ******************** #
    return html

第2关：requests 进阶

import requests

def get_html(url):
    '''
    两个参数
    :param url:统一资源定位符,请求网址
    :param headers:请求头
    :return html 网页的源码
    :return sess 创建的会话
    '''

    # ***************** Begin ******************** #

    # 补充请求头
    headers={ 'User-Agent':'Mozilla/5.0 (Linux; Android 8.0.0; Pixel 2 XL Build/OPD1.170816.004) AppleWebKit/'
                  '537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Mobile Safari/537.36',
    "Cookie":"BAIDUID=53B7CC4BFCDC39D2EF625C13D285429D:FG=1; BIDUPSID=53B7CC4BFCDC39D2EF625C13D285429D; "
              "PSTM=1591665716; BD_UPN=12314753; BDUSS=2N2ajRYZnI2cVlZN1FRemlWNU9FV1lSZFM3SnZBS0dvRW44WFRCUTRWck1mUVpmR"
              "VFBQUFBJCQAAAAAAAAAAAEAAAAoKJzNMTIyMzM4ODQ1uNW41QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"
              "AAAAAAAAAAAAMzw3l7M8N5eS; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; sug=3; sugstore=1; ORIGIN=0; bdime=0; "
              "H_PS_PSSID=1456_31672_32139_31253_32046_32230_31708_32295_26350_22160; delPer=0; BD_CK_SAM=1; PSINO=6; "
              "H_PS_645EC=3b86vFCd303Aw0wmqvkcAGpfxU4oXfwYcs6jRd1RnxihTsvhfqaVB%2BIoeBs; BDSVRTM=0"
              }

    # 创建Session, 并使用Session的get请求网页
    sess = requests.session()
    # 获取网页信息文本
    response = sess.get(url,headers=headers)
    response_home = sess.get(url=url)
    html=response.text
    # ****************** End ********************* #
    return html, sess

HTML - HTTP基础

第1关：HTTP 标准
- 1.以下哪个是爬虫爬取数据的用途？
  - A、搜索引擎
  - B、数据分析
  - C、数据分析
  答案：B
- 2.如果表单中带有图片，一般用什么请求方式？
  - A、GET
  - B、POST
  - C、HEAD
  - D、PATCH
  答案：B
- 3.请求成功的响应状态码是什么？
  - A、301
  - B、302
  - C、404
  - D、200
  答案：D
第2关：开发者工具的基本使用
- 1.Elements中的选择元素的功能是什么？
  - A、模拟不同设备的显示效果，且可以模拟带宽。
  - B、显示页面代码，以及选中元素对应的路径。
  - C、通过鼠标去选择页面上某个元素，并定位其在代码中的位置。
  - D、显示选中元素所受的 CSS 样式影响。
  答案：C
- 2.当要获取什么样的数据要使用Network功能?
  - A、网页上动态加载的图片
  - B、那些通过异步请求获取到的数据
  - C、网页的源码
  - D、消息头信息
  答案：B

HTML - 基本标签

第1关：创建第一个 HTML 标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h1>Hello</h1>
    <!-- ********* Begin ********* -->
    <h1>welcome to Educoder</h1>

    <!-- ********* End ********* -->
</body>
</html>

第2关：创建

-

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h1>创建不同字体大小的标题</h1>
    <!-- ********* Begin ********* -->
    <h2>创建不同字体大小的标题</h2>
    <h3>创建不同字体大小的标题</h3>
    <h4>创建不同字体大小的标题</h4>
    <h5>创建不同字体大小的标题</h5>
    <h6>创建不同字体大小的标题</h6>

    <!-- ********* End ********* -->
</body>
</html>

第3关：创建 p 标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
    <p>我是一个段落</p>

    <!-- ********* End ********* -->
</body>
</html>

第4关：创建 a 标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
    <a href="https://www.educoder.net">Educoder平台</a>

    <!-- ********* End ********* -->
</body>
</html>

第5关：创建 img 标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
    <img src="https://www.educoder.net/attachments/download/207801" alt="小狗走路"/>

    <!-- ********* End ********* -->

</body>
</html>

第6关：创建 div 标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h2>我是h2标签</h2>
    <p>我是p标签</p>
    <!-- ********* Begin ********* -->
    <div>我是div标签</div>

    <!-- ********* End ********* -->
</body>
</html>

第7关：添加注释

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h2>习近平向2018年“一带一路”知识产权高级别会议致贺信</h2>
    <!-- ********* Begin ********* -->

    <!--
    <div>
        新华社北京8月28日电　2018年“一带一路”知识产权高级别会议28日在北京开幕，
        国家主席习近平向会议致贺信。
    </div>
    -->

    <!-- 一带一路 -->
    <p>
        习近平指出，中国发扬丝路精神，提出共建“一带一路”倡议，得到有关国家和国际社会
        广泛认同和热情参与，取得了丰硕成果。我们愿同各方继续共同努力，本着共商共建共
        享原则，将“一带一路”建设成为和平之路、繁荣之路、开放之路、创新之路、文明之路，
        让丝路精神发扬光大。
    </p>
    <!-- ********* End ********* -->
</body>
</html>

【头歌】大数据分析及应用-HTML - 文本&HTML - 基础& 数据解析 - 网页&爬虫 - Requests&HTML - HTTP基础&HTML - 基本标签

HTML - 文本

第1关：HTML链接：带超链接的网页

第2关：HTML标题与段落：网络文章网页

第3关：HTML表格：日常消费账单表格展示网页

HTML - 基础

第1关：初识HTML：简单的Hello World网页制作

第2关：HTML结构：自我简介网页

数据解析 - 网页

第1关：XPath解析网页

第2关：BeautifulSoup解析网页

爬虫 - Requests

第1关：requests 基础

第2关：requests 进阶

HTML - HTTP基础

第1关：HTTP 标准

第2关：开发者工具的基本使用

HTML - 基本标签

第1关：创建第一个 HTML 标签

第2关：创建

-

标签

第3关：创建 p 标签

第4关：创建 a 标签

第5关：创建 img 标签

第6关：创建 div 标签

第7关：添加注释

参考链接

已有 2 条评论

添加新评论

最新文章

最近回复

分类

标签

归档

其它