• HTML笔记


    极客HTML笔记

    为什么学习HTML5

    1. 自2010年推出HTML5以来大受欢迎

    2. 跨平台运行

    3. 硬件要求低

    4. flash之外的选择

    新特性:用于绘画的canvas标签

    • 用于媒介回放的video和audio标签

    • 对本地离线存储的更好支持

    • 新的特殊内容元素。 如:article、footer、header、nav、section

    • 新的表单控件。 如:calendar、date、time、email、url、search

    HTML5的版本:<!DOCTYPE html>

    常用标签属性:

    <h1>:align ----------对齐方式

    <body>:bgcolor----背景颜色

    <a>:target-------------规定在何处打开链接

    通用属性:

    class----------------规定元素类名

    id----------------------规定元素唯一id

    style-------------------规定元素样式

    title--------------------规定元素的额外信息

    与格式化有关的标签:
      <b>b标签定义粗体文字</b> 
    <big>big定义大号文字</big> 但是在html5中已经被淘汰了
    <em>em标签定义着重文字</em>
    <i>i标签定义斜体字</i>
    <small>small标签定义小号字</small>
    <strong>strong标签定义加重语气</strong>
    <sub>sub标签定义下标字</sub>
    <sup>sup标签定义上标字</sup>
    <ins>ins标签定义插入字</ins>
    <del>del标签定义删除字</del>
    HTML样式

    <style>:样式的定义

    <link>:资源引用

    属性:rel=“stylesheet":外部样式表

       type=“text/css”:引入文档的类型

       margin-left:边距

    样式的插入方法:外部样式表、内部样式表、内联样式表

      外部样式表:<link rel="stylesheet" type="text/css" href="mystyle.css>
    内部样式表 :
    <style type=" text/css">
           body{
               background-color:red
           }
           p{
                margin-left:20px
            }
    </style>
      内联样式表:<p style = "color:red>
    a标签

    herf属性:指向另一个文档的链接

    name属性:创建文档内的链接-----这个属性可以用href属性指向在文档内部跳来跳去

    target属性:_slef  _blank  _parent  _top

    imag标签:

    alt属性:替换文本属性。当图片显示不出来时,显示该文字内容

    width属性:宽

    height属性:高

     <a href="http://www.baidu.com">百度的文字链接</a>
     <a href="http://www.baidu.com"><img src="image/aaa.png" width="100" height="100" alt="该图片显示错误"> </a>
     <br/>
     <a name = "tips">hello</a>
     <a href="#tips">跳转到hello</a>
    

      

    表格相关标签:

    table标签定义表格 cellpadding属性:规定单元边沿与其内容之间的空白 cellspacing规定单元格之间的空白

    caption定义表格标题---即表格之上标题,居中加粗显示

    th定义表格的表头---即表格中的第一行

    tr定义表格的行

    td定义表格的列

    thead定义表格的页眉

    tbody定义表格的主体

    tfoot定义表格的页脚

    col定义表格的列属性

    列表相关标签

    <ol>----------有序列表 ordered list 属性:A,a,I,i,strat

    <ul>----------无序列表 unordered list 属性:disc(实心圆),circle(空心圆),square(方形)

    <li>----------列表项 list item

    自定义列表

    <dl>----------列表

    <dt>----------列表项

    <dd>----------描述

    HTML块:

    1. HTML块元素

      块元素在显示时,通常会以新行开始。 如:<h1><p><ul>

    2. HTML内联元素

      内联元素通常不会以新行开始。 如:<b><a><img>

    3. HTML<div>元素

      <div> 元素也被成为块元素,其主要作用是组合HTML元素的容器。主要配合css样式使用

    4. HTML<span>元素

      <span>元素是内联元素,可作为文本的容器

    HTML表单:

    常用表单标签

    <form>--------------表单

    <input>------------输入域

    • name属性:当get方式提交时,name属性值就相当于?后面的键,输入框就相当于键对应的值。

    • text属性:文本框

    • password属性:密码框

    • checkbox属性:复选框

    • radio属性:单选框-------------需使用name属性成为一组

    • submit属性:提交

    • file属性:文件

    <textarea>-------文本域

    <label>------------控制标签

    <fieldset>--------定义域

    <legend>-----------域的标题

    <select>-----------下拉列表

    <option>-----------下拉列表的选项------需用select标签包起来,成为一组

    <optgroup>--------选项组

    <button>-----------按钮

    HTML框架:

    1. 框架标签(frame已过时):不能加body,去掉原有body标签

      框架对于页面的设计有着很大的作用

    2. 框架集标签(frameset已过时):

      框架集标签定义如何将窗口分割为框架

      每一个frameset定义一系列行或列

      rows/cols的值规定了每行或每列占屏幕的面积

    3. 常用标签:

      noresize:固定框架大小

      cols:列

      rows:行

    4. 内联框架 iframe(重点):可以在body中使用

    <frameset rows="20%,50%,30%">
        <frame src="frame2.html"></frame>
        <frame src="frame1_2.html"></frame>
        <frame src="frame1_3.html"></frame>
    </frameset> <iframe src="frame2.html" frameborder="0" width="400" height="400"> </iframe>

      

    HTML颜色:

    背景标签:Background---可设置背景图片

    背景颜色:Bgcolor

    颜色:是由一个十六进制符号来定义,这个符号有红色、绿色和蓝色的值组成(RGB)

      颜色最小值:0(#00)    颜色最大值:255(#FF)
    红色:#FF0000 绿色:#00FF00 蓝色:#0000FF

    HTML5:

    HTML5的出现,对于Web来说意义是非常重大的,因为他想要把目前Web上存在的各种问题一并解决掉。

    • Web浏览器之间的兼容性很低

    • 文档结构不明确

    • Web应用程序的功能受到了限制

    语法的改变:

    • 内容类型

    • DOCTYPE声明

    • 指定字符编码

    • 可以省略标记的元素

    • 具有boolean值的属性

    • 省略引号

    新增的结构元素:

    sectoin、article、aside、header、hgroup、footer、nav、figure

    新增的其他元素:

    video、audio、canvas、mark、progress、time、command、details.......

    新增的input元素:

    email、url、number、range、Date Pickers

    废除的元素:

    • 能使用CSS替代的元素:basefont、big、center、font、s、tt、u、等

    • 不再使用frame框架

    • 只有部分浏览器支持的元素

    • 其他废除的元素

    新增的属性和废除的属性:

    新增的属性 contentEditable、designMode、hidden、spellcheck、tabindex(按tab键时的访问顺序)

    • 表单相关的属性

    • 链接相关的属性

    • 其他属性

    废除的属性---很多

    新增的主体结构元素

    感觉更加语义化

    • article元素:独立完整的文章。可嵌套使用。更加语义化。可配合<header><p><footer>使用

    • section元素:用于对网站或应用程序中页面上的内容进行分块。------------推荐<div>

    • nav元素: navigator导航元素,用作页面导航的链接组,可链接到其他或当前页面。

    • aside元素:用来表示当前页面或文章的附属信息部分。如文章的名词解释、广告、侧边栏等。

    • time元素:与微格式 datetime属性 pubdate属性

    • pubdate元素:该属性用于明确发布时间

    新增的非主体结构元素:

    • header元素:是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面的一个内容区块的标题.

    • footer元素:作为其上层父级内容区块或是根区块的脚注。如作者、相关阅读链接及版权信息等。

    • hgroup元素:是将标题及其子标题进行分组的元素。通常会将h1~h6进行分组。

    • address元素:用来在文档中呈现联系信息。

    表单新增元素与属性:

    • form属性

    • formaction属性

    • formmethod属性

    • formenctype属性

    • formtarget属性

    • autofocus属性:打开页面时自动获得焦点,第一优先级使用

    • required属性:表单中该选项是否允许为空。为required时必须填写,为空时会出现提示

    • labels属性

    • 标签的control属性:在HTML5中,可以在标签内部放置表单元素,并通过control属性来访问该表单元素。

    • 文本框的placeholder属性:(占位符),是指当文本框处于未输入状态时显示的输入提示,模糊显示提示

    • 文本框的list属性:为单行文本框增加一个list属性,该属性的值为datalist属性的id。datalist也是新增元素,该元素类似于选择框,本身不显示,而是当文本框获得焦点时以提示输入的方式显示。允许自行输入。

    • 文本框的Autocomplete属性

    • 文本框的pattern属性:对input元素使用,并将属性值设置为某格式的正则表达式,在提交时会进行检查

    • 文本框的SelectionDirection属性:对input元素与textarea元素,当用鼠标选区文字时,获取选取方向

    • 复选框的indeterminate属性: (不确定),对checkbox元素,在JS使用说明处于“尚未明确是否选取”状态。

    • image提交按钮的height属性与weight属性

  • 相关阅读:
    application , application pool., W3wp ,httpapplication, domain
    HDFS
    spark
    Hive
    container docker
    Azure&& hdinsight
    Native Code
    拥抱重构
    六个重构方法可帮你提升80%的代码质量
    重构 小步进行曲
  • 原文地址:https://www.cnblogs.com/turbosha/p/10157136.html
Copyright © 2020-2023  润新知