文档结构

<!-- 声明文档的类型 标记该文档为HTML5的文件 -->

<!DOCTYPE html>

<!-- 页面的根节点 -->

<!-- html中的标签都是闭合标签  闭合标签包含 双闭合和单闭合

双闭合：<html></html>

单闭合：<meta />

 -->

<html>

    <head>

        <!-- 声明头部的元信息  对我们文档 规定编码格式 -->

        <meta charset="utf-8" />

        <!-- 包含头部的信息  是一个容器 包含 style title meta script link等 -->

    </head>

    <body>

        <!-- 包含浏览器显示的内容标签 div p a img input等等 -->

        这是我们的文档结构

    </body>

</html>

head标签相关内容

<!DOCTYPE html>

<html lang="en">

<head>

    <!-- 文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用（移动端） -->

    <!-- 文档的标题 -->

    <title>路飞学城</title>

     <!-- 常用两个属性

        http-equiv:它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

      -->

    <!--指定文档的内容类型和编码类型 -->

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <!-- 5秒之后 重定向 到路飞学城的网站 -->

    <!-- <meta http-equiv="refresh" content="5;URL=https://www.luffycity.com"/> -->

    <!--告诉IE浏览器以最高级模式渲染当前网页-->

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <!-- 为了我们的SEO优化  工作的时候下面这两句 要写-->

    <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">

    <meta name="description" content="路飞学城">

    <!-- 定义我们的网站图标 -->

    <link rel="icon" href="./fav.ico">

    <!-- 引入外部样式表 -->

    <link rel="stylesheet" type="text/css" href="./index.css">

    <!-- 定义内部样式表 -->

    <style type="text/css">

    </style>

    <!-- 定义内容脚本文件 -->

    <script type="text/javascript">

    </script>

    <script src="./index.js"></script>

</head>

<body>

</body>

</html>

常用标签

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="utf-8">

    <title>常用标签一</title>

</head>

<body>

    带你逐步提升技能                          更有Linux运维工程师，带来最极致的成长体验。

    <div class="p1">

        <p style="height: 2000px" id="p1">顶部</p>

    </div>

    <!-- body相关标签 -->

    <!-- heading :标题 h1~h6  没有h7标题-->

    <div class="heading">

        不仅有独家<h3>Python全栈开发课程</h3>，带你逐步提升技能。更有Linux运维工程师，带来最极致的成长体验。

        <!-- 块级元素 ： 1.独占一行  2.可以设置宽高-->

        <h1>路飞学城</h1><h2>路飞学城</h2>

        <h3>路飞学城</h3>

        <h4>路飞学城</h4>

        <h5>路飞学城</h5>

        <h6>路飞学城</h6>

        <h7>路飞学城</h7>

    </div>        

    <div class="p1">

        <!-- 段落标签 -->

         <p><strong>路飞学城</strong>立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,<br>金融分析,<span>人工智能</span>等互联网最前沿技术,开启职业生涯新可能</p>

         <hr>

         <p>路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,<s>金融分析</s>,人工智能等互联网最前沿技术,开启职业生涯新可能</p>

     </div>

    <div class="anchor">

        <!-- a标签属于行内标签： 在一行内显示  设置宽高 不起作用-->

        <!-- _self:默认值：在当前网站打开资源

            _blank:在新的网站打开资源 -->

        <a href="https://www.luffycity.com" target="_blank" title="luffy">路飞学城</a>

        <a href="./a.zip">下载压缩包</a>

        <a href="mailto:zhaoxu@tedu.cn" style="width: 1000px;height: 100px">联系我们</a>

        <!-- 返回页面顶部的内容 -->

        <a href="#">跳转到顶部</a>

        <!-- 返回每个id -->

        <a href="#p1">跳转顶部的段落标签</a>

         <!-- javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。把a的默认动作取消了 -->

            <a href="javascript:alert(1)">内容</a>

            <a href="javascript:;">内容</a>

    </div>

    <div class="lists">

        <!-- 无序列表 -->

            <ul type="none" >

                <li>我的账户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;</li>

                <li>我的订单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;</li>

                <li>我的优惠券&nbsp;&nbsp;&nbsp;&nbsp;&gt;</li>

                <li>我的收藏&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;</li>

                <li>退出&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;</li>

            </ul>

            <!-- ol有序列表 -->

            <ol style="list-style: none">

                    <li>我的账户></li>

                    <li>我的订单></li>

                    <li>我的优惠券></li>

                    <li>我的收藏></li>

                    <li>退出></li>

            </ol>

        </div>

        <div class="image">

            <!-- 1.可设宽高 2.在一行内显示   它叫行内块标签-->

                <img src="./homesmall.png" alt="python的图片" style="width: 200px;height: 200px">

                <img src="./homesmall2.png" alt="python2的图片"  style="width: 200px;height: 200px">

        </div>

        <!-- 

            三种：

            1.块级元素   独占一行，可设宽高 如果不设置宽度 浏览器的宽度

            2.行内元素  在一行内展示 不能设置宽高   它的宽高根据内容去填充

            3.行内块元素  在一行内展示  可设宽高

    小练习：

    展示两张图片 独占一行 鼠标移上去显示小手的状态

         -->

</body>

</html>

表格table

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表格</title>

</head>

<body>

    <!-- 表格 -->

    <table border="1" cellspacing="0">

        <!-- 表格头 -->

        <thead>

            <tr>

                <th></th>

                <th>星期一</th>

                <th>星期二</th>

                <th>星期三</th>

                <th>星期四</th>

                <th>星期五</th>

            </tr>

        </thead>

        <!-- 表格主题 -->

        <tbody>

            <!-- 表格主体的每一行 -->

            <tr>

                <td rowspan="3">上午</td>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

            <tr>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

            <tr>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

            <tr>

                <td rowspan="2">下午</td>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

            <tr>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

        </tbody>

        <tfoot>

            <tr>

                <td colspan="6">课程表</td>

            </tr>

        </tfoot>

    </table>

</body>

</html>

表单form

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表单控件</title>

</head>

<body>

    <div class="form">

        <!-- form标签是一个块级元素   被提交 -->

        <form action="https://www.baidu.com" method="get">

            <p>

                <!-- label标签行内元素  input是行内块元素-->

                <label for='user'>用户名:</label>

                <input type="text" name="username" id="user" placeholder="请输入用户名">

            </p>

            <p>

                <label for="password">密码：</label>

                <input type="password" name="password" id="password" placeholder="请输入密码">

            </p>

            <!-- 单选框  checked会被默认选中，产生互斥的效果 name值要相同-->

            <p>

                用户性别：

                <input type="radio" name="sex" value="男" checked="">男

                <input type="radio" name="sex" value="女">女

            </p>

            <!-- 复选框 -->

            <p>

                用户的爱好:

                <input type="checkbox" name="checkfav" value="吃" checked="check">吃

                <input type="checkbox" name="checkfav" value="喝">喝

                <input type="checkbox" name="checkfav" value="玩">玩

                <input type="checkbox" name="checkfav" value="乐">乐

            </p>

            <p>

                <!-- 文件上传 -->

                <input type="file" name="textFile">

            </p>

            <p>

                <!-- 文本域 -->

                自我介绍：

                <textarea cols="20" rows="5"  name="txt" placeholder="请做自我介绍"></textarea>

            </p>

            <p>

                <!-- 下拉列表 -->

                <select name="sel" size="3" multiple="">

                    <option value="深圳" selected>深圳</option>

                    <option value="北京">北京</option>

                    <option value="沙河">沙河</option>

                    <option value="山东">山东</option>

                    <option value="福建">福建</option>

                </select>

            </p>

            <p>

                <!-- 显示普通的按钮 -->

                <input type="button" name="btn" value="提交" disabled="disabled">

                <!-- 重置按钮 -->

                <input type="reset" name="">

                <!-- 提交form表单使用 type=submit按钮 -->

                <input type="submit" name="btn" value="submit">

            </p>

        </form>

        <button type="button">按钮</button>

    </div>

</body>

</html>

标签分类

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>标签分类</title>

</head>

<body>

    <div class="wrapper">

        <!-- 块级元素  ：div p h1~h6 ol ul table form li

            1.独占一行

            2.可以设置宽度和高度，如果设置了宽度和高度，则就是当前的宽高，如果宽度和高度没有设置，宽度是父盒子的宽度，高度根据内容填充

        -->

        <div class="left">

            这是路飞学城的战场

            <div>这是我的区域

                <!-- <div style="width: 500px;height: 100px">这是我的爱好</div> -->

                <ul>

                    <li>

                        <h2>抽烟</h2>

                    </li>

                    <li>

                        <ol>

                            <li>喝酒</li>

                            <li>烫头</li>

                        </ol>

                    </li>

                </ul>

            </div>    

        </div>

        <div class="right">

            <!-- a span br i em strong label 

                行内元素：在一行内展示，不能设置宽度和高度，宽度和高度根据内容填充

            -->

            <a href="#" style="width: 200px;height: 100px">百度</a>

            <a href="#">路飞</a>

            <span style="width: 100px;height: 200px">一些文本</span>

            <span>一些文本</span>

        </div>

        <div class="inline-block">

            <!-- 行内块 :

                1.在一行内展示

                2.可设置宽高

            -->

            <img src="./homesmall.png" alt="一张图片">

            <input type="text" name="username" style="width: 200px;height: 50px">

        </div>

        <!-- 标签嵌套规则

        块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素

        有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是h1~h6 p

         -->    

    </div>

</body>

</html>

html基础代码示例的更多相关文章

  1. 019 01 Android 零基础入门 01 Java基础语法 02 Java常量与变量 13 数据类型转换的代码示例

    019 01 Android 零基础入门 01 Java基础语法 02 Java常量与变量 13 数据类型转换的代码示例 本文知识点:Java中的数据类型转换案例 学习视频有误,导致没法写文,文章内容 ...

  2. Java基础知识强化之IO流笔记72：NIO之 NIO核心组件（NIO使用代码示例）

    1.Java NIO 由以下几个核心部分组成: Channels(通道) Buffers(缓冲区) Selectors(选择器) 虽然Java NIO 中除此之外还有很多类和组件,Channel,Bu ...

  3. 【Java基础】2、Java中普通代码块，构造代码块，静态代码块区别及代码示例

    Java中普通代码块,构造代码块,静态代码块区别及代码示例.Java中普通代码块,构造代码块,静态代码块区别及代码示例 执行顺序:静态代码块>静态方法(main方法)>构造代码块>构 ...

  4. java基础之----java常见异常及代码示例

    概述 java中有两种错误类型,一个是Exception,一个是Error,都在java.lang包下,一般来说程序中的try...catch捕获的是Exception类型的异常,而Error类型的错 ...

  5. Mysql基础代码（不断完善中）

    Mysql基础代码,不断完善中~ /* 启动MySQL */ net start mysql /* 连接与断开服务器 */ mysql -h 地址 -P 端口 -u 用户名 -p 密码 /* 跳过权限 ...

  6. SELECT控件操作的JS代码示例

    SELECT控件操作的JS代码示例 1 检测是否有选中 if(objSelect.selectedIndex > -1) { //说明选中 } else { //说明没有选中 } 2.动态创建s ...

  7. Python实现各种排序算法的代码示例总结

    Python实现各种排序算法的代码示例总结 作者:Donald Knuth 字体:[增加 减小] 类型:转载 时间:2015-12-11我要评论 这篇文章主要介绍了Python实现各种排序算法的代码示 ...

  8. 领域驱动开发推荐代码示例 — Microsoft NLayerApp

    简介: Microsoft NLayerApp是由微软西班牙团队出品的基于.NET 4.0的“面向领域N层分布式架构”代码示例,在codeplex上的地址是:http://microsoftnlaye ...

  9. 通过.NET实现后台自动发送Email功能的代码示例

    原文:通过.NET实现后台自动发送Email功能的代码示例 通过.NET实现后台自动发送邮件功能的代码,可以将一些基础信息放到web.config文件中进行保存: Web.config文件信息段: & ...

随机推荐

  1. bug生命周期和bug状态处理

    首先,测试人员发现 BUG ,做好记录并上报至 BUG 数据库.接着,开发组长或经理确定该 BUG 是否有效 之后指定 BUG 的优先级并安排给相关开发人员.否则拒绝该 BUG 的修复. 然后,该 B ...

  2. QT 5.4.1 for Android Ubuntu QtWebView Demo

    QT 5.4.1 for Android Ubuntu QtWebView Demo 2015-5-15 目录 一.说明: 二.参考文章: 三.QtWebView Demo在哪里? 四.Qt Crea ...

  3. ODBC的基础架构

    *) 基本概念:1. 应用程序(Application)2. ODBC驱动管理器(ODBC Driver Manager) 负责管理应用程序和驱动程序间的通信,主要功能包括:解析DSN (数据源名称, ...

  4. 从 0 到 1 合理高效使用 GitHub 的资料

    来自:https://github.com/xirong/my-git/blob/master/how-to-use-github.md 说明 作为一名开发者,Github上面有很多东西值得关注学习, ...

  5. [LeetCode&Python] Problem 104. Maximum Depth of Binary Tree

    Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...

  6. php-fpm简介

    What is PHP-FPM? PHP-FPM (FastCGI Process Manager) is an alternative PHP FastCGI implementation with ...

  7. Ubuntu 18.10连接Windows 桌面

    ========================= 适用于Linux连接Windows远程桌面 Linux版本:CentOS.Ubuntu等 1.终端命令安装远程桌面客户端工具,具体命令如下: sud ...

  8. 网络流初步：<最大流>——核心（增广路算法）（模板）

    增广路的核心就是引入了反向边,使在进行道路探索选择的时候增加了类似于退路的东西[有一点dp的味道??] 具体操作就是:1.首先使用结构体以及数组链表next[ MAXN ]进行边信息的存储 2.[核心 ...

  9. StreamSets SDC RPC Pipelines说明

    主要目的是进行跨pipeline 数据的通信,而不仅仅是内部pipeline 的通信,之间不同网络进行通信 一个参考图 pipeline 类型 origin destination 部署架构 使用多个 ...

  10. 洛谷 4389 付公主的背包——多项式求ln、exp

    题目:https://www.luogu.org/problemnew/show/P4389 关于泰勒展开: https://blog.csdn.net/SoHardToNamed/article/d ...