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属性

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/turbosha/p/10157136.html