html 基础


Web2.0 时代

2004,第二代互联网

  • 2.0是软件版本,这里指一系列web技术的升级,计算机工业的商业革命
  • 以用户为内容生产主体,本身仅提供平台
  • 核心概念:互动、分享、关系
  • 传说会取代桌面应用的?NO!

特点

  • 将Web作为平台,内容和服务共同发展
  • 驾驭集体智能,用户增值
  • 数据将变成未来的“IntelInside”

,数据为王

  • 软件不断发行与升级的循环将会终结(“永久的测试版”),快速迭代
  • 轻量型程序设计模型,解决特定问题
  • 软件运行跨越单一设备
  • 丰富的用户体验

分类

  • 博客:blogs
  • wikis:百科
  • 社交媒体:facebook/twitter
  • 网络社区:论坛
  • 视频:youtube,各种视频网站
  • 音乐
  • 图片
  • 即时通讯:IM
  • LBS:地理位置服务

服务方式

双向消息协议

–REST(RepresentationalStateTransfer)表示了一种Web服务, 客户端传送所有的事务的状态

– SOAP(SimpleObjectAccessProtocol)基于XML的可扩展消息信封格式,需同时绑定一个网络传输协议。

这个协议通常是HTTP或HTTPS,但也可能是SMTP或XMPP

 

API接口调用服务

– XML

– JSON

– RPC

 

社会影响

改变了信息被创造,使用和分享的方式

  • 网络交互性,信息的快速传播性,以及透明性使得信息传递更快捷
  • 人与人连接更紧密

 

商业影响

各种推荐系统的应用

  • 新媒体的崛起,文字,视频,图片都

成为变现渠道

  • 手机电脑变为消耗品
  • 系统免费,应用(服务)收费
  • 衣食住行,移动支付

 

web 3.0

用来概括互联网发展过程中可能出现的各种不同的方向和特征包括:

– 将互联网本身转化为一个泛型数据库;

– 跨浏览器、超浏览器的内容投递和请求机制;

– 人工智能技术的运用;

– 语义网;

– 地理映射网;

– 运用3D技术搭建的网站甚至虚拟世界或网络公国等。

 

Web3.0=(4C+P+VS)

– 3C=Content,Commerce,Community|4thC=Context

– P=Personalization

– VS=VerticalSearch

 

web应用的分类

新闻/博客/头条/购物/旅游/彩票/影视/直播/小说/工具/生活/游戏/娱乐/图片/音乐/社区/体育/军事

现代web应用的特点

多端融合

桌面端 – 移动端

 

开发简单

框架  React Vue Angular

语言 HTML5 CSS3 JS TS CSSinJS

开源  GITHUB

 

工程化

包管理 npm yarn

版本管理  git

前后端分离

构建 webpack gulp

部署 docker

 

安全

资金安全

信息安全

分支主题

 

功能强大

购物 社交 娱乐 博客 邮件 政务 企业

 

人工智能

自动生成页面(构建)

数据可视化(展示)

结合AR/VR(交互)

 

参考资料

 

  • https://zh.wikipedia.org/wiki/Web_2.0
  • https://en.wikipedia.org/wiki/List_of_free_software_web_applications
  • https://whatis.techtarget.com/definition/Web-20-or-Web-2
  • https://www.cbsnews.com/news/what-is-web-20/
  • https://computer.howstuffworks.com/web-20.htm
  • https://www.sramanamitra.com/2007/02/14/web-30-4c-p-vs/
  • https://zh.wikipedia.org/wiki/%E8%AF%AD%E4%B9%89%E7%BD%91

 

浏览器简介

浏览器可以被认为是使用最广泛的软件,今天,有五种主流浏览器IE、Firefox、Safari、Chrome及Opera。

浏览器的主要功能是将用户选择的web资源呈现出来,它需要从服务器请求资源,并将其显示在浏览器窗口中,资源的格式通常是HTML,也包括PDF、image及其他格式。用户用URI(Uniform Resource Identifier统一资源标识符)来指定所请求资源的位置

 

浏览器构成

浏览器的主要组件包括:

1. 用户界面 - 包括地址栏、后退/前进按钮、书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。

2. 浏览器引擎 - 用来查询及操作渲染引擎的接口。

3. 渲染引擎 - 用来显示请求的内容,例如,如果请求内容为html,它负责解析html及css,并将解析后的结果显示出来。

4. 网络 - 用来完成网络调用,例如http请求,它具有平台无关的接口,可以在不同平台上工作。

5. UI后端 - 用来绘制类似组合选择框及对话框等基本组件,具有不特定于某个平台的通用接口,底层使用操作系统的用户接口。

6. JS解释器 - 用来解释执行JS代码。

7. 数据存储 - 属于持久层,浏览器需要在硬盘中保存类似cookie的各种数据,HTML5定义了web database技术,这是一种轻量级完整的客户端存储技术

 

 

需要注意的是,不同于大部分浏览器,Chrome为每个Tab分配了各自的渲染引擎实例,每个Tab就是一个独立的进程

 

 

浏览器工作原理

 

DOM

转化:浏览器从磁盘或网络读取 HTML 的原始字节,并根据文件的 指定编码格式(例如,UTF-8)将 这些原始字节转换为单个字符。

标记化:浏览器按照 W3C HTML5 标准中的规定将字符串转 换为不同的标记,例如“”、 “”以及用尖括号括起来的 其他字符串。每个标记都有一个特 殊的含义和自己的一套规则。

词法分析:发出的标记被转换为 “对象”,其中定义了这些标记的 属性和规则。

DOM 构造:最后,因为 HTML 标 记文件定义了不同标记之间的关系 (一些标记包含在其他标记中), 所以创建的对象相互关联在一个树 形数据结构中,该数据结构也体现 了原始标记文件中定义的父子关系: HTML 对象是 body 对象的父对象, body 是段落 (p) 对象的父对象,依 此类推。

 

CSSOM

 

 

基本格式

<!DOCTYPE html>
<html lang="en">
    <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>新的页面</title>
    </head>
    <body>
        

<h1>这里是页面内容</h1>


        
    </body>
</html>

文本操作

<!DOCTYPE html>
<html lang="en">
<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>文本元素</title>
</head>
<body>
    <!-- 开始学习html了 -->
    <a href="http://edu.51cto.com">51CTO学院</a>
    
    <a href="http://edu.51cto.com" target="_">51CTO学院新标签打开</a>
    
    
    <!-- b: 关键词 -->
    <b>关键词</b>
    <!-- strong: 表示非常重要的文本 -->
    

你对我<strong>非常非常</strong>重要

    <!-- em: 强调 -->
    

今天特别<em>热</em>

    <!-- i:外文词汇或科学相关的术语 -->
    

经过专家讨论,猫的英文词为<i>cat</i>


    <!-- 上标,下标 -->
    

2 <sup>2</sup>=4

    

H <sub>2</sub>O是水


    <span class="">这句话是放在span标签的</span>

    <!-- 添加拼音 -->
    
    

        <ruby>
            长 <rp>(</rp> <rt>chang</rt> <rp>)</rp>
        </ruby>  
        江黄河
    


    <!-- del:删除 -->
    

<del>这句话是删除样式</del>

    <!-- u:下划线 -->
    

<u>这句话是下划线样式</u>

    
    <!-- mark:加标记 -->
    

标记的演示,标记<mark>你真美</mark>


</body>
</html>

实体符号

<!DOCTYPE html>
<html lang="en">

<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>实体符号</title>
</head>

<body>
    

        人民币: &#165;
    

    

        版权: &copy;
    


    

5 &lt; 8 

    

9 &gt; 8 

</body>

</html>

分组元素

<!DOCTYPE html>
<html lang="en">

<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>分组元素</title>
</head>

<body>
    <!-- p -->
    这是一段普普通通,相貌平平的p段落文字

    <!-- blockquote:引用 -->
    
<blockquote cite="http://edu.51cto.com">
        这是一段来自遥远地方的引用,这是一段来自遥远地方的引用,这是一段来自遥远地方的引用,这是一段来自遥远地方的引用,这是一段来自遥远地方的引用,这是一段来自遥远地方的引用,这是一段来自遥远地方的引用,这是一段来自遥远地方的引用,这是一段来自遥远地方的引用,
    
</blockquote>


    <!-- dd: 定义,配合dl来用 -->
    <!-- dl: 术语列表,配合dt -->
    <!-- dt -->
    
<dl>
        
<dt>钢铁侠</dt>

        
<dd>纳米材料做成的钢铁衣服</dd>


        
<dt>闪电侠</dt>

        
<dd>被闪电击中变异的哥们</dd>

    </dl>


    
<hr>

    <!-- div -->
    
<div class="">
        这里可以放任何东西
        

放一段话

        <a href="#">超链接</a>
    </div>

    
<hr>


    <!-- figure, figcaption: 图示,图片 -->
    
<figure>

<figcaption>这是一个图示, 代码示例</figcaption>

        <!-- pre code,代码 -->
        
<pre>
            <code>
                def main():
                    pass
            </code>
        </pre>
</figure>

    <!-- hr, 段落级别的分割 -->
<hr>

    <!-- li, ol, ul -->
<ul>
<li>列表</li>
<li>列表</li>
<li>列表嵌套
<ol>
<li>列表</li>
<li>列表</li>
<li>列表</li>
<li>列表</li>
<li>列表</li>
<li>列表</li>
</ol>
</li>
<li>列表</li>
<li>列表</li>
<li>列表</li>
</ul>
<ol>
<li>列表</li>
<li>列表</li>
<li>列表</li>
<li>列表</li>
<li>列表</li>
<li>列表</li>
</ol>

    <!-- p -->

</body>

</html>

语义元素

<!DOCTYPE html>
<html lang="en">

<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>划分内容的元素</title>
</head>

<body>
    <!-- section: 概念或主题 -->
    
<section>
        
<h1>标题1</h1>

        

段落段落段落段落段落段落段落段落段落段落段落段落段落段落

    </section>


    
<section>
        
<h1>标题2</h1>

        

段落段落段落段落段落段落段落段落段落段落段落段落段落段落

        <a href="#">点击查看原文</a>
    </section>


    
<hr>

    <!-- header -->
    
<header>
        
<h2>2级标题</h2>

    </header>

    
<hr>


    <!-- footer -->
    
<footer>
        
<ul>
            
<li>链接1</li>

            
<li>链接2</li>

            
<li>链接3</li>

        </ul>

        

其他信息

    </footer>


    
<hr>


    <!-- h1-h6 -->
    
<h1>标题1</h1>

    
<h2>标题2</h2>

    
<h3>标题3</h3>

    
<h4>标题4</h4>

    
<h5>标题5</h5>

    
<h6>标题6</h6>


    
<hr>


    <!-- hgroup, 对标题进行分组,用于html大纲展示 -->
    
<hgroup>
        
<h1>标题1</h1>

        
<h2>标题2</h2>

    </hgroup>


    
<hr>

    <!-- nav: 导航 -->
    
<nav>
        
<li>菜单</li>

        
<li>菜单</li>

        
<li>菜单</li>

        
<li>菜单</li>

        
<li>菜单</li>

    </nav>


    
<hr>

    <!-- article: 相对独立的内容 -->
    
<article>
        
<header>
            
<h2>文字标题</h2>

        </header>

        
<section>
            

第一段话

            

第2段话

            

第3段话

            

第4段话

        </section>

    </article>


    
<article>
        
<header>
            
<h2>文字标题</h2>

        </header>

        
<section>
            

第一段话
                <span>这段不确定样式,自定义样式</span>
            

            

第2段话

            

第3段话

            

第4段话

        </section>

    </article>


    
<hr>

    <!-- aside : 侧边栏-->
    
<aside>
        
<li>侧边菜单</li>

        
<li>侧边菜单</li>

        
<li>侧边菜单</li>

    </aside>

    
<hr>


    <!-- address -->
    
<address>
        我的地址为: <a href="#">网站名称</a>
        <em>北京天安门</em>
    </address>


    
<hr>

    <!-- details: 可隐藏/显示详细信息的内容 -->
    <!-- summary: 概述 -->
    
<details>
        
<summary>这里有武林秘籍</summary>

        
<ul>
            
<li>无字天书</li>

            
<li>易筋经</li>

        </ul>

    </details>


</body>

</html>

媒体

<!DOCTYPE html>
<html lang="en">
<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>多媒体元素-图片/视频</title>
</head>
<body>
    <img src="images/accept.png" alt="确认">
    
    
    
    <img src="images/apple.png" alt="苹果">

    <!-- 图片链接 -->
    <a href="http://edu.51cto.com" target="_blank">确认,打开页面</a>

    
<hr>

    <a href="http://edu.51cto.com" target="_blank">
        <img src="images/accept111.png" alt="确认,打开页面">
    </a>

    
<hr>

    <!-- 加载视频 -->
    <video src="images/timessquare.webm" width="360" height="240" controls></video>
    
    <!-- <video src="images/timessquare.webm" width="360" height="240" controls autoplay muted></video> -->
    
    
<h2>preload预加载</h2>

    <video src="images/timessquare.webm" width="360" height="240" controls preload="metadata"></video>

    
<h2>预加载指定静态图片</h2>

    <video src="images/timessquare.webm" width="360" height="240" controls preload="metadata" poster="images/poster.png"></video>

    <!-- 兼容性问题 -->
    
<h2>添加多个视频源</h2>

    <video width="360" height="240" controls preload="metadata" poster="images/poster.png">
        <source src="images/timessquare.webm" type="video/webm">    
        <source src="images/timessquare.ogv" type="video/ogv">    
        <source src="images/timessquare.mp4" type="video/mp4">    
    </video>

</body>
</html>

表格

<!DOCTYPE html>
<html lang="en">

<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>表格元素</title>
</head>

<body>
    
<h1>表格概要</h1>

    <!-- table:表格 -->
    <!-- row: 行 -->
    <!-- col: 列 -->
    
<table>
        
<tr>
            
<th>问题</th>

            
<th>解决方案</th>

            
<th>代码</th>

        </tr>

        
<tr>
            
<td>生成基本表格</td>

            
<td>使用table,tr,td</td>

            
<td>123</td>

        </tr>

        
<tr>
            
<td>表头单元格</td>

            
<td>使用th</td>

            
<td>332</td>

        </tr>

        
<tr>
            
<td>区分行表头和列表头</td>

            
<td>thead,tbody</td>

            
<td>3</td>

        </tr>

        
<tr>
            
<td>添加footer</td>

            
<td>tfoot</td>

            
<td>3</td>

        </tr>

    </table>


    
<hr>

    
<table border="1">
        
<thead>
            
<tr>
                
<th>问题</th>

                
<th>解决方案</th>

                
<th>代码</th>

            </tr>

        </thead>

        
<tbody>
            
<tr>
                
<th>生成基本表格</th>

                
<td>使用table,tr,td</td>

                
<td>123</td>

            </tr>

            
<tr>
                
<th>表头单元格</th>

                
<td>使用th</td>

                
<td>332</td>

            </tr>

            
<tr>
                
<th>区分行表头和列表头</th>

                
<td>thead,tbody</td>

                
<td>3</td>

            </tr>

        </tbody>

        
<tfoot>
            
<tr>
                
<th>添加footer</th>

                
<td>tfoot</td>

                
<td>3</td>

            </tr>

        </tfoot>

    </table>


    
<hr>

    <!-- 合并单元格:行,列 -->
    
<table border="1">
        
<caption>这是测试合并单元格的表格</caption>

        
<tr>
            
<td colspan="2">1111111111111</td>

            
<td>222222222222</td>

            <!-- 
<td>33333333333</td>

 -->
        </tr>

        
<tr>
            
<td>1111111111111</td>

            
<td>222222222222</td>

            
<td rowspan="2">33333333333</td>

        </tr>

        
<tr>
            
<td>1111111111111</td>

            
<td>222222222222</td>

            <!-- 
<td>33333333333</td>

 -->
        </tr>

    </table>


</body>

</html>

表单

<!DOCTYPE html>
<html lang="en">

<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>表单元素,input,button</title>
</head>

<body>
    
<h2>form常见结构TODO:method, enctype, name</h2>

    <!-- 
<form action="" method="post" enctype="multipart/form-data">
        <input type="text">
        <button>提交</button>
    </form>

 -->

    
<hr>

    
<h2>自动完成</h2>

    
<form action="" autocomplete="off">
        <input type="text">
        <input type="text" autocomplete="off">
    </form>


    
<h2>输入框文字说明</h2>

    
<form action="">
        用户名:
        <input type="text">
        
 密码:
        <input type="text">
    </form>


    
<h2>输入框文字说明: 使用lable</h2>

    
<form action="">
        <label for="username">用户名:
            <input type="text" id="username">
        </label>
        
        <label for="password">密码:
            <input type="text" id="password">
        </label>
    </form>


    
<h2>自动聚焦autofocus</h2>

    
<form action="">
        <input type="text" autofocus>
    </form>


    
<h2>禁止表单,disabled</h2>

    
<form action="">
        <input type="text" disabled>
    </form>


    
<hr>

    
<h2>fieldset进行分组</h2>

    
<form action="">
        
<fieldset>
            
<legend>个人信息</legend>

            <!-- 

个人信息

 -->
            

                <label for="">姓名
                    <input type="text">
                </label>
            

            

                <label for="">年龄
                    <input type="text">
                </label>
            

        </fieldset>

        
<fieldset>
            

联系方式

            

                <label for="">QQ
                    <input type="text">
                </label>
            

            

                <label for="">WX
                    <input type="text">
                </label>
            

        </fieldset>

        <button>提交</button>
        <button type="reset">重置</button>
    </form>


    
<hr>

    
<h2>input的各种属性</h2>

    
<form action="">
        

            <label for="">姓名
                <input type="text" minlength="2" maxlength="12" placeholder="输入姓名, 至少2个字符">
            </label>
        

        

            <label for="">年龄
                <input type="text" minlength="1" size="3" maxlength="3">
            </label>
        

        <button>提交</button>

        
<hr>

        
<h2>input的datalist</h2>

        
<form action="">
            <input type="text" list="fruits">
        </form>

        <datalist id="fruits">
<option value="香蕉🍌"></option>
<option value="苹果🍎"></option>
<option value="大鸭梨🍐"></option>
        </datalist>
    </form>


    
<hr>

    
<h2>input的权限: 读写,是否禁止</h2>

    
<form action="">
        <input type="text" disabled placeholder="被禁止了">
        <input type="text" readonly value="这里只读">
    </form>


    
<hr>

    
<h2>密码</h2>

    
<form action="">
        <input type="text">
    </form>

    
<form action="">
        <input type="password" placeholder="密码需要大小写字母+字符">
    </form>


    
<hr>

    
<h2>类似按钮的类型</h2>

    
<form action="">
        <input type="submit">
        <input type="reset">
        <input type="button" value="就是个平凡的按钮">
    </form>


    
<hr>

    
<h2>数字类型</h2>

    
<form action="">
        <input type="number" min="2" max="8" value="3" step="2" name="price">
        <input type="range" min="2" max="8" value="3" step="2" name="price">
    </form>


    
<hr>

    
<h2>复选框: checkbox</h2>

    

这是协议内容这是协议内容这是协议内容这是协议内容这是协议内容这是协议内容这是协议内容这是协议内容...

    
<form action="">
        <label for="">是否同意我的协议(不同意就不同使用app)
            <input type="checkbox" checked>
        </label>
    </form>


    
<hr>

    
<h2>单选按钮: radio box</h2>

    
<form action="">
        <label for="">香蕉
            <input type="radio" value="香蕉" name="fruit">
        </label>
        <label for="">苹果
            <input type="radio" value="苹果" name="fruit">
        </label>
        <label for="">大鸭梨
            <input type="radio" value="大鸭梨" name="fruit">
        </label>
    </form>


    
<hr>

    
<h2>输入邮箱,电话,网址</h2>

    
<form action="">
        <label for="">邮箱
            <input type="email" placeholder="username@abc.com">
        </label>
        <label for="">电话
            <input type="tel" placeholder="138-1111-2222">
        </label>
        <label for="">网址
            <input type="url" placeholder="http://edu.51cto.com">
        </label>
        <button>提交</button>
    </form>


    
<hr>

    
<h2>时间和颜色的选择</h2>

    
<form action="">
        <label for="">
            <input type="date">
        </label>
        <label for="">
            <input type="color" value="#10f0f0">
        </label>
    </form>


    
<hr>

    
<h2>隐藏的类型</h2>

    
<form action="">
        <label for="">用户名
            <input type="text">
        </label>
        <label for="">密码
            <input type="text">
        </label>
        <label for="">
            <input type="hidden">
        </label>
    </form>


    
<hr>

    
<h2>图片按钮类型</h2>

    
<form action="">
        <input type="image" src="images/accept111.png" name="点击图片提交" alt="点击提交">
    </form>


    
<hr>

    
<h2>上传文件</h2>

    
<form enctype="multipart/form-data">
        <input type="file" name="文件1">
        
        <button>上传</button>
    </form>


    
<hr>

    
<h2>输入邮箱,电话,网址, 添加验证:必填, 正则域名验证</h2>

    
<form action="">
        <label for="">邮箱
            <input type="email" placeholder="username@abc.com" required pattern=".*@abc.com">
        </label>
        <label for="">电话
            <input type="tel" placeholder="138-1111-2222" required>
        </label>
        <label for="">网址
            <input type="url" placeholder="http://edu.51cto.com">
        </label>
        <button>提交</button>
    </form>


    
<hr>

    
<h2>下拉框,选一个</h2>

    
<form action="">
        <label for="fruit">你爱吃啥水果?
            <select name="fruit" id="fruit">
<option value="香蕉🍌">香蕉🍌</option>
<option value="苹果🍎" selected>苹果🍎</option>
<option value="大鸭梨🍐">大鸭梨🍐</option>
            </select>
        </label>
    </form>


    
<hr>

    
<h2>下拉框,选多个</h2>

    
<form action="">
        <label for="fruit-select">你爱吃啥水果?
            <select name="fruit" id="fruit-select" multiple>
<option value="香蕉🍌">香蕉🍌</option>
<option value="苹果🍎" selected>苹果🍎</option>
<option value="大鸭梨🍐">大鸭梨🍐</option>
            </select>
        </label>
    </form>


    
<h2>多行文本: textarea, 写评论</h2>

    
<form action="">
        <label for="comment">亲,留个好评啊!
            <textarea name="comment" id="comment" cols="50" rows="3"></textarea>
        </label>
    </form>


</body>

</html>

练习

<!DOCTYPE html>
<html lang="en">

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

<body>
    
<nav>
        
<li>购物网站</li>

        
<li>家电</li>

        
<li>水果</li>

    </nav>


    
<aside>
        
<div>
            

最新商品推荐

            
<li>电视</li>

            
<li>洗衣机</li>

            
<li>冰箱</li>

        </div>

        
<div>
            

商品排名

            
<li>苹果001</li>

            
<li>香蕉002</li>

            
<li>大鸭梨003</li>

        </div>

    </aside>


    
<section>
        
<table border="1">
            
<caption>我的购物车</caption>

            
<tr>
                
<th>是否购买</th>

                
<th>商品名称</th>

                
<th>商品链接</th>

                
<th>价格</th>

                
<th>数量</th>

            </tr>

            
<tr>
                
<td>
                    <input type="checkbox" name="check" id="check-apple">
                </td>

                
<td>苹果001</td>

                
<td>
                    <a href="#">
                        <img src="images/apple.png" alt="苹果001">
                    </a>
                </td>

                
<td>8.8</td>

                
<td>3</td>

            </tr>

            
<tr>
                
<td>
                    <input type="checkbox" name="check" id="check-bnanana">
                </td>

                
<td>香蕉002</td>

                
<td>
                    <a href="#">香蕉002</a>
                </td>

                
<td>18.8</td>

                
<td>31</td>

            </tr>

            
<tr>
                
<td>
                    <input type="checkbox" name="check" id="check-pear">
                </td>

                
<td>大鸭梨003</td>

                
<td>
                    <a href="#">大鸭梨003</a>
                </td>

                
<td>28.8</td>

                
<td>13</td>

            </tr>

        </table>


        
<div>
            
<form action="">
                <label for="address">选择地址:
                    <select name="address" id="address">
<option value="北京天安门">北京天安门</option>
<option value="后海" selected> 后海</option>
<option value="海淀中关村">海淀中关村</option>
                    </select>
                </label>
            </form>

        </div>

        
<div>
            

选择付款方式

            
<form action="">
                <label for="">支付宝
                    <input type="radio" value="支付宝" name="pay-type">
                </label>
                <label for="">微信
                    <input type="radio" value="微信" name="pay-type">
                </label>
                <label for="">银行卡
                    <input type="radio" value="银行卡" name="pay-type">
                </label>
            </form>

        </div>

        
<div>
            <input type="submit" value="提交">
        </div>


    </section>


</body>

</html>
<!DOCTYPE html>
<html lang="en">

<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>51Memo-html</title>
</head>

<body>

    
<nav>
        
<li>首页</li>

        
<li>todo</li>

        
<li>已完成</li>

        
<li>已过期</li>

    </nav>

    
<header>
        <img src="images/goal.png" alt="目标">
        
<h2>2018年10大目标</h2>

    </header>

    
<section>
        
<div>
            
<li>10点写100行代码</li>

            
<li>12带你去兜风</li>

            
<li>明天上午买8个苹果</li>

        </div>

        
<div>
            
<h3>请输入备忘录信息</h3>

            
<form action="">
                <input type="text" placeholder="写一下要做的事儿">
                <input type="date">
                
<h4>请选择标签: </h4>

                <label for="">最紧急
                    <input type="radio" name="tag">
                </label>
                <label for="">最重要
                    <input type="radio" name="tag">
                </label>
                <label for="">普通
                    <input type="radio" name="tag">
                </label>

                

                    <input type="submit" value="提交">
                

            </form>

        </div>

    </section>

    
<aside>
        
<div>
            

相似备忘录信息

            
<li>写代码</li>

            
<li>买水果</li>

        </div>

        
<div>
            

近7天完成状态

            <a href="">周总结2018年第8周</a>
        </div>

        
<div></div>

    </aside>

    
<footer>
        
<li>网站信息</li>

        
<li>使用帮助</li>

        
<li>联系方式</li>

        &copy; 2018 xxxxx
    </footer>

</body>

</html>

最后更新于:2018-10-29 17:08:11