文档结构

<!-- 声明文档的类型 标记该文档为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. FlytestingToolkit工具派送，懒人的测试思考

    工欲善其事必先利其器,在IT路上摸爬这些年,去年我们分享了<Fiddler录制jmeter脚本,干货分享>,今天我们有另外的思考,我懒,故我思考. 下载解压后是这样的: 双击 Flytes ...

  2. C语言基础:结构体 分类： iOS学习 c语言基础 2015-06-10 21:47 28人阅读 评论(0) 收藏

    结构体:是一种用户自定义的数据类型 结构体定义 struct 结构体名 {     成员类型1  成员变量名1;     成员类型2  成员变量名2;      -. }; typedef   原类型 ...

  3. springboot项目文件上传（绝对路径）并使用tomcat虚拟路径进行图片预览

    前言 项目中,需要上传文件,但是可能会比较多,所以不能放入项目目录中,需要指定目录并按顺序放置.并且:还需要这些数据可以预览(图片等). 那么问题就是:上传完成之后我存入服务器,并拿到绝对路径,存入数 ...

  4. 抓老鼠 codeForce 148D - Bag of mice 概率DP

    设dp[i][j]为有白老鼠i只,黑老鼠j只时轮到公主取时,公主赢的概率. 那么当i = 0 时,为0 当j = 0时,为1 公主可直接取出白老鼠一只赢的概率为i/(i+j) 公主取出了黑老鼠,龙必然 ...

  5. Hadoop之HDFS

    摘要:HDFS是Hadoop的核心模块之一,围绕HDFS是什么.HDFS的设计思想和HDFS的体系结构三方面来介绍. 关键词:Hadoop  HDFS   分布式存储系统 HDFS是Hadoop的核心 ...

  6. sqlserver linux 容器运行

    sqlserver linux 版本的容器大小目前已经相对比较小了,对于开发来说已经比较方便了 docker-compose 文件 version: "3" services: d ...

  7. 用C#通过反射实现动态调用WebService 告别Web引用（转载）

    我们都知道,调用WebService可以在工程中对WebService地址进行WEB引用,但是这确实很不方便.我想能够利用配置文件灵活调用WebService.如何实现呢? 用C#通过反射实现动态调用 ...

  8. C语言写CGI程序

    一.CGI概述 CGI(公用网关接口)规定了Web服务器调用其他可执行程序(CGI程序)的接口协议标准.Web服务器通过调用CGI程序实现和Web浏览器的交互, 也就是CGI程序接受Web浏览器发送给 ...

  9. [转]Spring事务<tx:annotation-driven/>

    在使用SpringMVC的时候,配置文件中我们经常看到 annotation-driven 这样的注解,其含义就是支持注解,一般根据前缀 tx.mvc 等也能很直白的理解出来分别的作用.<tx: ...

  10. netty答题

    1,介绍一下netty netty封装了Java原生的nio,是一个异步和数据驱动的网络编程框架, 与tcp: netty -> Java Runtime Socket (io.nio.nio2 ...