<!--
 Html,CSS,JS 三者的关系 ==> 人，衣服，动作。
 以下展示 html 常用基本编码
 -->
<!-- Html
    在PyCharm中新建html文件默认给出的基本标签如下：
    ----------------------
    <!DOCTYPE html>                 表示标准的html解析格式 w3c
    <html lang="en">                html文档  en 英文， zh中文
    <head>                          页面的头，是一对主动闭合标签 <head></head>
        <meta charset="UTF-8">      自闭和标签
        <title>Title</title>        页面标题
    </head>
    <body>                          页面主体 <body></body>

    </body>
    </html>
    ----------------------
-->
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>      　　　　　　　　　　　　　　　　　　　　　　　　<!--此对标签之间都是定义页头外观及行为的-->
    <meta charset="UTF-8">
    <!--<meta http-equiv="refresh" content="1">     　<!--页标题左侧的图标每隔1秒刷新一次-->
    <!--<meta http-equiv="refresh" content="2;http://www.baidu.com">    <!--页面2秒时刷新并跳转到指定链接-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">       <!--兼容到IE浏览器的最高版本-->
    <meta name="keywords" content="大师兄">    　　　　　　　　　　<!--检索关键字，通常是一个词语，要查看网页源代码才能看到-->
    <meta name="description" content="大师兄是个低调的攻城狮"> 　　<!--检索摘要，通常是一个句子，要查看网页源代码才能看到-->
    <title>网页标题名称</title>
    <link rel="shortcut icon" href="title_icon.jpg">    　　　　<!-- 链接导入shortcut icon title图标 -->
    <!--<link rel="stylesheet" href="XXX">                  　　<!--链接导入css样式表-->
    <!--<script src="xxxxx"></script>           　　　　　　　　　<!--导入js文件-->
    <style>　　　<!--写css样式的地方>　　
    </style>        　　　　　　　　　　　　　　　　　　
</head>
<body>
    <p>年轻,就是拿来折腾的。</p>      　　　　　　　　　　　　　　　　<!-- p是段落标签，段间有明显的距离；br是换行标签，行间没有距离-->
    <p>让自己具备一技之长的资本，<br>是需要无数个夜晚的静思，</br>无数寂寞时光的堆积而成的。</p>

    <h1>白羊座</h1>                  　　　　　　　　　　　　　　　<!-- h是页内标题标签，标题会区分开正文字体 -->
    <h2>白羊座</h2>
    <h3>白羊座</h3>
    <h4>白羊座</h4>
    <h5>白羊座</h5>
    <h6>白羊座</h6>
    <div>                   　　　　　　　　　　　　<!-- 块级标签的宽度占整个页面宽度--><!--div是块级标签的白板，只有一种属性-->
        块级标签
    </div>
    <span>                  　　　　　　　　　　　　<!-- 行内标签的宽度随标签内容变化，是包裹标签内容的大小--><!--span是行内标签的白板，没有属性-->
        行内标签
    </span>
    <!--
        <form> 标签用于为用户输入创建 HTML 表单。
        表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
        表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
        表单用于向服务器传输数据。
        action 提交到那个接口
        method post 还是 get
        enctype="multipart/form-data" 指定上传文件类型
    -->
    <form action="/login" method="post" enctype="multipart/form-data">
        <span>是否让页面记住密码</span>
        <input type="checkbox" checked="checked">   　　　　<!--复选框，默认选中-->
        <input type="radio" checked="checked">      　　　　<!--单选钮，默认选中-->
        <input type="radio" name="r1" checked="checked">
        <input type="radio" name="r1" >             　　　　<!--互斥的一对单选钮，第一个默认选中，用相同name实现互斥-->
    </form>
    <div>
        <input type="text">             　　　　　　　　　　　<!--普通文本输入框，输入可见字符-->
        <input type="password">         　　　　　　　　　　　<!--密文文本输入框，输入字符以掩码显示-->
        <input type="submit" >          　　　　　　　　　　　<!--提交按钮，表单数据直接提交到后台-->
        <input type="file" >            　　　　　　　　　　　<!--实现上传文件功能-->
        <input type="reset" >           　　　　　　　　　　　<!--重置按钮，把表单数据重置-->

        <input type="text" id="i1">
        <label for="i1">用户名</label>  　　　　　　　　　　　<!--label是标签，用for绑定控件id,实现点击控件的标签即如点击控件一样的效果-->
    </div>
    <textarea>                      　　　　　　　　　　　　　<!--可滚动显示的多行文本显示区域，也可通过拖拽右下角调整区域的大小-->
        标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后，
        后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，
        一些公司联合起来，成立了一个叫做
        Web Hypertext Application Technology Working Group （Web超文本应用技术工作组 -WHATWG） 的组织。
        WHATWG 致力于 Web 表单和应用程序，而W3C（World Wide Web Consortium，万维网联盟）
        专注于XHTML2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。
    </textarea>
    <div>
        <select >                               　　　　　　<!--下拉选框，显示选中的单项-->
            <option>乌鲁木齐</option>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option>深圳</option>
            <option>天津</option>
            <option>重庆</option>
            <option>郑州</option>
        </select>
        <select size="2" multiple="multiple">   　　　　　　<!--滚动选框，显示指定个数的多个选项-->
            <option>乌鲁木齐</option>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option>深圳</option>
            <option>天津</option>
            <option>重庆</option>
            <option>郑州</option>
        </select>
        <select size="4" multiple="multiple">   　　　　　　<!--滚动选框，分组显示指定个数的多个选项-->
            <optgroup label="直辖市">
                <option>北京</option>
                <option>上海</option>
                <option>广州</option>
                <option>深圳</option>
                <option>天津</option>
                <option>重庆</option>
            </optgroup>
            <optgroup label="省会城市">
                <option>成都</option>
                <option>郑州</option>
                <option>乌鲁木齐</option>
            </optgroup>
        </select>
    </div>
    <div>
        <a href="http://www.baidu.com" target="_blank">跳转到百度主页</a>  <!--target="_blank"是在新页面打开跳转的链接-->
        <img src="title_icon.jpg" alt="加载失败" title="白羊座">
        <!-- img 图片标签
            src 图片地址
            alt 当图片加载失败的时候 显示文案
            title 鼠标悬浮到图片上时 显示的文案
        -->
    </div>
    <div>
        <!-- ul 定义无序列表
            不指定 type 默认圆点
            指定type则按type显示
        -->
        <ul>
            <li>第一天学习ui自动化</li>
            <li>第二天学习ui自动化</li>
        </ul>
        <ul type="square">
           <li>HTML</li>
           <li>XHTML</li>
           <li>CSS</li>
        </ul>
        <!-- ol 定义有序列表
            不指定 type 默认阿拉伯数字升序
            指定type则按type a A 1 I i 显示
        -->
        <ol type="1" reversed="reversed">
          <li>Coffee</li>
          <li>Tea</li>
          <li>Milk</li>
        </ol>
    </div>
    <div>
        <!-- table 表格标签
            thead 表头
                tr 行
                th 列
                th 的属性 colspan="2" 代表一列占几列
            tbody 表体
                tr 行
                td 列
        -->
        <table border="1">r
            <thead>
                <tr>
                    <th>id</th>
                    <th>姓名</th>
                    <th>班级</th>
                    <th>课程</th>
                    <th>分数</th>
                    <th colspan="2">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td rowspan="3">1</td>
                    <td rowspan="3">张三</td>
                    <td>白羊座</td>
                    <td>语文</td>
                    <td>100</td>
                    <td>编辑</td>
                    <td>保存</td>
                </tr>
                <tr>
                    <td>白羊座</td>
                    <td>数学</td>
                    <td>100</td>
                    <td>编辑</td>
                    <td>保存</td>
                </tr>
                <tr>
                    <td>白羊座</td>
                    <td>英语</td>
                    <td>100</td>
                    <td>编辑</td>
                    <td>保存</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

前端知识学习——html的更多相关文章

  1. 安全测试2_Web前端知识学习

    上次讲到安全的简介,这次就来简单的学习下基本的前端知识(html.js.css(不作讲解),牛逼的请忽略!!! 1.Html简单概述: Html和Html DOM 2.Html字符实体(借用别人的,详 ...

  2. 前端学习：JS面向对象知识学习（图解）

    前端学习:JS面向对象知识学习(图解) 前端学习:JS(面向对象)代码笔记 JS面向对象图解知识全览 创建类和对象 方式1:使用Object()函数 方式2:使用自变量 方式3:使用工厂函数 创建多个 ...

  3. Salesforce LWC学习(十七) 前端知识之 onclick & onblur & onmousedown

    在Salesforce LWC学习(八) Look Up组件实现篇中,我们实现了公用的lookup组件,使用的过程中,会发现当我们输入内容以后,搜索出来的列表便无法被清空. 针对此种情况我们打算优化一 ...

  4. 移动端 Web 开发前端知识整理

    文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...

  5. web前端知识体系总结

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  6. web前端开发学习内容

    应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准                       代码能 兼容主流浏览器.ie6.7.8.9 ff 等.    ...

  7. 3 HTML&JS等前端知识系列之javascript的基础

    preface 作为一名运维开发,必须懂得前端知识,比如javascript,dom等等,下面就聊聊javascript. include 数据格式 条件判断,循环流程等. 函数 面向对象 what ...

  8. Web 前端开发学习之路（入门篇）

    字数1374 阅读4622 评论0 喜欢49 以前学习过一段时间的web前端开发,整理了一些我看过的/我认为比较好的学习资料(网站.书籍).不要问我为啥没有进阶版,我只是一条产品汪而已,求轻喷.＝＝ ...

  9. 自己总结的web前端知识体系大全【欢迎补充】

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

随机推荐

  1. linux命令随身记

    赋予权限命令:chmod 755 * 查询进程: ps -ef |grep abc 查看含有"abc"的活动进程 ps -ef |grep -v abc 查看不含abc的活动进程 ...

  2. 9.4python开发之virtualenv与virtualenvwrapper

    在使用 Python 开发的过程中,工程一多,难免会碰到不同的工程依赖不同版本的库的问题: 亦或者是在开发过程中不想让物理环境里充斥各种各样的库,引发未来的依赖灾难. 此时,我们需要对于不同的工程使用 ...

  3. Kotlin 二分法算法游戏--猜价格

    本人最新想学习算法,算法是提高程序性能的关键! 程序就是数据结构和算法! 写了一个二分法的游戏,供大家参考: 当然,语言基于kotlin import java.util.* /** * Create ...

  4. 剑指Offer - 九度1214 - 丑数

    剑指Offer - 九度1214 - 丑数2013-11-21 21:06 题目描述: 把只包含因子2.3和5的数称作丑数(Ugly Number).例如6.8都是丑数,但14不是,因为它包含因子7. ...

  5. python学习笔记七：浅拷贝深拷贝

    原理 浅拷贝 import copy b = copy.copy(a) demo: >>> a=[1,['a']] >>> b=a >>> c=c ...

  6. 基类VS接口

    该篇引用 CLR via C# 中的13.11节. 应该设计基类还是接口,这个问题不能一概而论,下面提供一些指导性原则: 1. IS_A关系(指属于,例如汽车属于交通工具) vs CAN_DO关系(指 ...

  7. 洛谷P1101单词方阵

    题目描述 给一n×n的字母方阵,内可能蕴含多个“yizhong”单词.单词在方阵中是沿着同一方向连续摆放的. 摆放可沿着 8个方向的任一方向,同一单词摆放时不再改变方向,单词与单词之间可以交叉,因此有 ...

  8. java的四种内部类（转）

    一般来说,有4中内部类:常规内部类.静态内部类.局部内部类.匿名内部类. 一.常规内部类:常规内部类没有用static修饰且定义在在外部类类体中.  1.常规内部类中的方法可以直接使用外部类的实例变量 ...

  9. Android记事本开发02

    今天: 继续学习基础知识. 昨天: 学习了ADB工具的基本命令. Android项目的目录结构. AndroidManifest.xml Android应用程序的打包和安装 遇到的问题: 无.

  10. SimpleMDE编辑器 + 提取HTML + 美化输出

    开发步骤: 1. 安装和引入(npm或者bower都可以) $ bower install simplemde --save //css - debug目录下为开发版本 <link rel=&q ...