• python之前端


    HTML5 简介

    HTML

    HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。

    HTML5的设计目的是为了在移动设备上支持多媒体。

    HTML5 简单易学。


    什么是 HTML5?

    HTML5 是下一代 HTML 标准。

    HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。

    HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。


    HTML5 是如何起步的?

    HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。。

    WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。

    HTML5 中的一些有趣的新特性:

    • 用于绘画的 canvas 元素
    • 用于媒介回放的 video 和 audio 元素
    • 对本地离线存储的更好的支持
    • 新的特殊内容元素,比如 article、footer、header、nav、section
    • 新的表单控件,比如 calendar、date、time、email、url、search


    一、 HTML介绍:
    ---------------------------------------
    1. 什么是HTML?
       超文本标记语言,  <标签名>--标记(标签、节点)
       
    2. HTML是由:标签和内容构成

    3. 程序语言有两种:解释性语言(HTML、PHP、Javascript)和编译型语言(C、C++、Java)


    4. HTML的标签组成部分、属性、实体

        HTML的实体: <:&lt;  >:&gt;  空格:&nbsp;
        
    5. HTML中注释: <!-- .... -->
            注释的目的:1. 辅助说明  2.代码调试
            
    6. HTML标签(标记)的语法: 标签是由"<"和">"括起来
            双标签:<标签名>....</标签名>
            单标签:<标签名/>
            
    7. HTML中的颜色:可以是颜色单词:red/blue/green/yellow...
                还可以是:#000000 --- #ffffff
                其中前两位表示红色,中间两位绿色,后两位表示蓝色。
                
    二、 HTML中HEAD头部设置
    ----------------------------------------
        ....

    三、 HTML中的文本标签
    ----------------------------------------
        1. *<br/> 换行
        2. *<p>...</p> 换段
        3. <i>...</i> 斜体
        4. <em>...</em> 强调斜体
        5. <b>...</b> 加粗
        6. *<strong>...</strong> 强调加粗
        7. *<hn>...</hn> 其中n为1--6的值。 标题标签(加粗、独立行)
        8. <cite></cite>
         9. <sub>... </sub>  <sup>...</sup>
        10.*<del></del> 删除线
        ....
        
    四、*HTML中中的超级链接A
    ------------------------------------------------
        <a href=""></a> 超级链接标签
            属性:href必须,指的是链接跳转地址
                  target: 表示链接的打开方式:
                        _blank  新窗口
                        _parent 父窗口
                        _self   本窗口(默认)
                        _top    顶级窗口
                        framename 窗口名
                  title:文字提示属性(详情)
        锚点链接:
            定义一个锚点:<a id="a1"></a>
            使用锚点:      <a href="#a1">跳到a1处</a>
            
            
    五、 *图片标签img
    ---------------------------------------    
        <img /> 在网页中插入一张图片
        属性:src: 图片名及url地址
            alt: 图片加载失败时的提示信息
            title:文字提示属性
            width:图片宽度
            height:图片高度
            border:边框线粗细
            
    六、 多媒体标签(熟悉)
    ------------------------------------




    七、 *表格标签
    ------------------------------------
        table
        caption
        tr
        th
        td
        
        thead
        tbody
        tfoot

    八、 **表单标签
    ------------------------------------
        1. form: 表单标签,内有属性:action、method、name、enctype...
        
        2. 表单项标签:
             input :最常用的通用的表单项标签:其中type属性值决定为什么表单项。
                属性:type=text(单行文本)、password(密码)、radio(单选)、
                      checkbox(多选)、file(文件上传),image(图片按钮)、
                      button(普通按钮)、submit(提交) 、reset(重置)、
                      hidden(隐藏)、还有HTML5支持的属性。
                      
             select
                option
            
             textarea
            
        
        
    九、 iframe标签
    ------------------------------------

    十、其他标签(布局标签)
    ------------------------------------

    form表单标签
    ---------------------------------------------------------
        1. <form></form> --表单标签
            form标签常用属性:
                *action属性:提交的目标地址(URL)
                *method属性:提交方式:get(默认)和post
                    get方式是URL地址栏可见,长度受限制(IE2k 火狐8k),相对不安全.
                    post方式是URL地址不可见,长度不受限制,相对安全.
                enctype:提交类型
                target: 在何处打开目标 URL。
                name:属性为表单起个名字.HTML5不支持。用 id 代替。
        
        2. <input> 表单项标签input定义输入字段,用户可在其中输入数据。在 HTML 5 中,type 属性有很多新的值。
            具体在下面有详解:
            如:<input type="text" name="username">
            
        3. <select> 标签创建下拉列表。
            *name属性:定义名称,用于存储下拉值的
             size:定义菜单中可见项目的数目,html5不支持
             disabled 当该属性为 true 时,会禁用该菜单。
             multiple 多选
             *<option>  下拉选择项标签,用于嵌入到<select>标签中使用的;
                *value属性:下拉项的值
                *selected属性:默认下拉指定项.    
     
        4. *<textarea> 多行的文本输入区域
             *name :定义名称,用于存储文本区域中的值。
             *cols :规定文本区内可见的列数。
             *rows :规定文本区内可见的行数。
             disabled: 是否禁用
             readonly: 只读
             ...
        
        5. *<button> 标签定义按钮。
            您可以在 button 元素中放置内容,比如文档或图像。这是该元素与由 input 元素创建的按钮的不同之处。
            
        
        6. <fieldset> html5标签--fieldset 元素可将表单内的相关元素分组。
            disabled属性:定义 fieldset 是否可见。
            form属性: 定义该 fieldset 所属的一个或多个表单。

        7. <legend> html5标签--<legend> 标签为 <fieldset>、<figure> 以及 <details> 元素定义标题。
                <form>
                  <fieldset>
                    <legend>健康信息:</legend>
                    身高:<input type="text" /><br/>
                    体重:<input type="text" /><br/>
                  </fieldset>
                </form>
                
         8. <optgroup> html5标签--<optgroup> 标签定义选项组。此元素允许您组合选项
            样例:
                <select>
                  <optgroup label="Swedish Cars">
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                  </optgroup>
                  <optgroup label="German Cars">
                    <option value="mercedes">Mercedes</option>
                    <option value="audi">Audi</option>
                  </optgroup>
                </select>
                
         9. <datalist> html5标签--<datalist> 标签定义可选数据的列表。与 input 元素配合使用,就可以制作出输入值的下拉列表。
                样例:
                    <form action="demo_form.asp" method="get">
                        <input list="browsers" name="browser">
                        <datalist id="browsers">
                            <option value="Internet Explorer">
                            <option value="Firefox">
                            <option value="Chrome">
                            <option value="Opera">
                            <option value="Safari">
                        </datalist>
                        <input type="submit">
                    </form>
        
        10. <input/>  表单项中的属性,可以提供
               *type属性:表示表单项的类型:值如下:
                    text:单行文本框
                    password:密码输入框
                    checkbox:多选框 注意要提供value值
                    radio:单选框   注意要提供value值
                    file:文件上传选择框
                    button:普通按钮
                    submit:提交按钮
                    image:图片提交按钮
                    reset:重置按钮, 还原到开始(第一次打开时)的效果
                    hidden:表单隐藏域,主要是和表单一块提交的信息,但是不需要用户修改
                *name属性:表单项名,用于存储内容值的
                *value属性:输入的值(默认指定值)
                size属性:输入框的宽度值
                maxlength属性:输入框的输入内容的最大长度
                readonly属性:对输入框只读属性
                *disabled属性:禁用属性
                *checked属性:对选择框指定默认选项
                accesskey属性:指定快捷键(不常用) (IE:alt+键  火狐:alt+shift+键)
                tabindex属性:通过数字指定tab键的切换顺序(不常用)
           
                src和alt是为图片按钮设置的
            
                注意:reset重置按钮是将表单数据恢复到第一次打开时的状态,并不是清空
                    image图片按钮,默认具有提交表单功能。
            
            
      二、frameset 标签 -- 代替body标签定义了框架页,并且定义了框架将分为多少行与多少列
    ------------------------------------------------------------------------------------
        1. frameset 标签常用属性:  
            *cols -- 定义了框架含有多少列与列的大小(每个值使用逗号分隔),
                取值为象素px或者百分比%
            *rows -- 定义了框架含有多少行与行的大小(每个值使用逗号分隔),
                取值为象素px或者百分比%
            *border -- 定义frame定义的框架页的边框(单位像素),使用css实现
            frameborder -- 定义框架页是否边框(此属性应写在frame标签内部,不应在此出现)
            framespacing -- 定义框架页之间间隔的距离,使用css实现
       
       <noframes>标签
            可为那些不支持框架的浏览器显示文本,和<body>组合使用
            可以做为浏览器不支持iframe标签时显示     
       *<iframe>标签
            创建一个包含另外一个文档的内联框架,iframe标签内的内容。

       frame标签 -- 定义frameset标签中每个框架页的内容
            frame标签是单独出现的,<frame />
            常用属性:
              frameborder -- 定义了内容页的边框,取值为(1|0),缺省值为1
                1 -- 在每个页面之间都显示边框
                0 -- 不显示边框
              *name -- 在一个框架页链接到另一框架页时使用(另一个框架页可以使用target定义链接页)
              noresize -- 定义了浏览者是否可以通过拖拽改变框架页尺寸,取值为(noresize)
              scrolling -- 定义是否有滚动条,取值为(yes|no|auto),缺省值为auto
                yes -- 显示滚动条
                no -- 不显示滚动条
                auto -- 当需要时再显示滚动条
              *src -- 定义了内容页URL
              border – 设置边框粗细     
            

  • 相关阅读:
    C# 高效字符串连接 StringBuilder介绍
    C#图解教程
    C#中string类型是值类型还是引用类型?
    UML类图10分钟快速入门
    C#设计模式--单例模式
    计算机是如何启动的?
    2018年计划
    转:SQL进阶之变量、事务、存储过程与触发器
    2020/02/06,武汉
    2020/02/06,渐渐,from eason for you for her
  • 原文地址:https://www.cnblogs.com/zhangyux/p/6388881.html
Copyright © 2020-2023  润新知