标签：推荐   targe   模式   对齐   list   require   value   resize   背景   

     最近开始学习HTML5语言，以下是我对学习HTML的一些知识点的整理。

↑ 文档类型声明： 让浏览器，按照html5的标准对代码进行解释与执行。
↑ 文档类型声明必不可少，而且，必须放在文档最上方。
↑ 如果不写文档类型声明，浏览器会默认按照兼容模式运行，可能会出现不明BUG。

设置网页的字符集编码格式：
GB2312：国标码。简体中文的编码格式。
GBK：扩展的国标码。 比国标码多了更多的编码格式。
utf-8： 万国码。 可以兼容绝大多数国家的语言。

HTML4.01之前，声明字符集编码的格式：

设置网页关键字：
name="keywords" 表示当前语句用于设置网页关键字
content="" 表示网页的关键字内容。多个关键字之间用英文逗号分隔。

设置网页描述：
网页的描述，在搜索引擎中搜索网站时，标题下面的一段文字，就是网页的描述内容。

链接网页小图标：选项卡上的小图片。
rel属性： 选择icon，表示链接的文件，将作为网页的icon图标。
href属性： 选择图片所在的路径地址。

从功能上，HTML标签，分为“块级标签”和“行级标签”。

【块级标签和行级标签的区别】
① 块级标签自动换行，前后隔一行；行级标签不会自动换行，从左往右依次显示；
② 块级标签的宽度默认是100%；行级标签的宽度由文字内容撑开；
③ 块级标签可以设置宽度、高度、边距等属性；行级标签不能设置上述属性

从写法上，HTML标签分为“成对标签”和“自闭合标签(空标签)”
① 成对标签： 成对出现，有开始标签，必须有结束标签，内容包裹在两个标签之间。 例如：

【常见的块级标签】
h标签：标题标签，默认加粗，h1最大，h6最小。

hr标签： 水平线标签。

p标签： 段落标签，表示网页中的一段文字。
br标签： 换行符号，在代码中敲回车，在网页中并没有作用。必须使用
断行

blockquote:引用标签。表示标签中的文字是引用自其他网站的内容。
浏览器默认显示效果：整段向后缩进

cite属性：表示引用内容的来源，常写引用的网址URL

姜浩是个帅哥！

pre标签：预格式标签。 与p标签不同的是，pre标签会保留代码中的空格和回车，在网页直接显示。
最常用的作用，是在网页中显示代码段，保留代码段格式。

jsLoader({
    name : ‘iplookup‘,
    url : ‘http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js‘
});

有序列表 ol order list
一个有序列表由多个li组成

1. 第一项


2. 第二项


3. 第三项

无序列表 ul unorder list

• 第一项
  
  
  
  • 第一项
  
  
  • 第二项
  
  
  • 第三项
  
  

  定义列表 dl
  定义列表包含两部分：
  

  :定义列表的标题，标题顶格显示，一般一个定义列表只有一个标题
  
  :定义列表的描述项，相对于标题向后缩进显示，一个列表可以有多个描述项。
  

  
  

  定义列表的标题

  
  

  定义列表的描述项1

  
  

  定义列表的描述项2

  
  

  定义列表的描述项3

  
  

  了解： 组合标签 figure
  包含两部分：
  img 一张图片
  figcaption： 图片的标题，在图片正下方显示。
  

  
  
  
  

  div 分区标签，用于配合CSS使用。将网页划分为区块，可以包裹各种标签。
  

  
  这是div里面的文字
  
  
  

  【常用的行级标签】span标签：用于包裹行内的文字。 常配合CSS使用修改文字样式。

  姜浩真帅！！！

  [em/strong/i/b 区别]
  1、em和i都能倾斜，strong和b都能加粗。但是，em和strong多了一层强调的含义。（强调的作用：可以让搜索引擎快速的抓取网页的重点部分。实现代码的语义化。）
  2、em和strong都有强调的作用，但是em是倾斜，strong是加粗。而且，strong的强调程度要比em更高。
  em标签，倾斜+强调
  strong标签，加粗+强调
  i标签，倾斜
  b标签，加粗
  u标签，下划线

  【常见引用标签】
  常见的引用标签有：blockquote、q、cite
  区别：
  ① 显示效果上： blockquote整段缩进、q加引号、cite 倾斜
  ② 从功能上： blockquote用于引用一整段内容，是块级标签。 q用于引用一句话，是行级标签。 cite常用于引用作品名、书画名。
  

  块引用

  
  q标签，短引用
  cite引用

  字体大一号和小一号，但是已经被淘汰了，修改字体统一使用css
  小一号字体
  大一号字体

  
  【img图片标签】
  1. src属性：表示图片所在的路径。
  [路径的表示方式]
  ① 网络图片地址。 并不建议使用。
  http://n.sinaimg.cn/fashion/20170725/fVaL-fyiiahz0057431.jpg
  ② 可以使用图片的绝对路径。但是，严禁使用绝对路径。 因为，绝对路径使用file://协议，网页使用http://协议打开无法访问file://协议的文件。
  file:///C:/sunyang.jpg -- 绝对路径写法：file:///盘符:/文件路径
  ③ 使用相对路径。 推荐使用的唯一方式。
  a. 图片在当前文件的下一层， “文件夹名/图片名”
  b. 图片与当前文件在同一层，直接写"图片名"
  c. 图片在当前文件的上已成，"../图片名" 。
  注意： 图片必须包含在项目里面，不能退出项目根目录
  2. width、height 宽度、高度属性
  3. title：鼠标指上时显示的文字
  4. alt： 图片无法加载时，显示的文字。 省略alt，将默认显示title内容
  5. align: 图片周围的文字，相对于图片的排列方式；
  top 文字居上 center 文字居中 bottom 文字局底

  
  
  【a标签 超链接】
  1. href属性： 超链接跳转的地址。可以是网络连接，也可以是本地HTML文件的相对路径。
  2. target属性： 超链接新页面打开的位置。
  _slef在当前页面打开(默认) _blank在新页面打开
  3. title属性：鼠标指在超链接上显示的文字。

  【功能性超链接】
  1. mailto： 给指定邮箱发送邮件。
  点击给帅哥发邮件！
  2. tencent: 与指定QQ聊天。
  与帅哥聊天
  3. 锚链接：点击超链接，可以跳转到页面的指定位置(锚点)
  ① 在页面的指定位置，定义一个锚点：
  
  ② 将超链接的href属性，改为 “#锚点名称”
  跳到div上方
  ③ 跳转到其他页面指定锚点的方式：
  哈哈哈
  
  

  11111111111111
  
  跳到div上方
  这是一个超链接

  【W3C倡导的Web结构】
  1、 内容与表现分离。 Html与CSS分离。
  2、 内容与行为分离。 Html与JavaScript分离。
  3、 Html代码，必须要实现语义化。
  【W3C的规范】
  1.标签名和属性名称必须小写
  2.HTML标签必须关闭
  3.属性值必须用引号括起来
  4.标签必须正确嵌套
  ① 嵌套的标签，不能发生交叉；
  ② 块级标签可以包裹行级，行级标签不能包裹块级； P标签不能包裹P标签等。。。。

  其他的行级标签（了解即可）
  u标签带下划线
  css实现下划线
  s标签带删除线
  css实现删除线
  定义专业术语
  dfn 定义专业术语 abbr 专业术语缩写词
  我们正在学习HTML5，简称为H5。

  code标签：提示搜索引擎，当前为一段计算机代码。
  但是code不会保留代码格式，需要配合pre标签共同使用。
  

  
  
  jsLoader({
      name : ‘iplookup‘,
      url : ‘http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js‘
  });
  
  

  表示变量
  x+y=1

  bdo：定义文本的显示方向
  有一个重要属性dir： ltr 从左往右显示 、 rtl 从右往左显示
  姜浩真帅

  表示需要用户输入的文字
  请输入“Esc”退出系统。

  sub 下标 sup 上标
  H₂O X²

  表示时间
  现在是16:10

  [表格table]
  表格中一行，用tr表示；
  一行中的每个单元格，用td表示；
  首行的表头中每个单元格，用th表示，th默认文字会加粗、居中。

  【表格中的各种属性】
  1. border： 给表格的每个td和整个table加边框。 如果border的值>1,则只有最外层边框加粗，td上的边框不变。
  2. cellspacing:设置单元格与单元格之间的间距。
  cellspacing="0" 可以设置边框之间的间距为0，但是相邻的边框不会合并，而是显示为两条线的宽度。
  [设置表格边框合并]
  可以使用CSS设置：style="border-collapse: collapse;"
  设置边框合并以后，cellspacing属性将会失效。因为两条线已经合并到一起了。
  3. cellpadding: 单元格内边距，单元格中文字与边框之间的距离。
  4. width/height: 表格的宽度、高度
  5. align: 设置表格在浏览器中，居左、居中、居右
  6. bgcolor: 表格背景色
  bordercolor： 表格的边框颜色
  background： 表格背景图。背景色和背景图同时存在时，背景图生效。

  【表格的行列属性】
  作用于tr或者td上的属性：
  1. width、height： 宽度、高度
  2. bgcolor:背景色。
  当表格的属性与行列的属性发生冲突时，优先级采用“近者优先”的原则：table

  3. align: 设置单元格中的文字，水平对齐方式；left center right
  valign: 设置单元格中的文字，垂直对齐方式； top center bottom

  【表格的跨行与跨列】
  1. 跨列： colspan="n" 如果某个单元格跨n列，则该单元格右侧n-1个td就不需要了；
  2. 跨行： rowspan="n" 如果某个单元格跨n行，则该单元格下方n-1个td就不需要了；

  【form表单】
  1、form表单有两个重要的属性：
  action：表示，将表单提交给哪个服务器地址；
  method：表单提交数据的方式，可选值有 get 和 post 两种。

  [get和post区别]
  ① get使用URL传递数据。所有内容在地址栏可见，不安全；
  post的数据无法在地址栏看到，比较安全。
  ② get传递的数据量有限，而且只能传递纯文字内容；
  post可以传递大量数据，并且可以传递图片、视频等文件。
  ③ get的传输速度要比post快。
  [get传递数据的URL格式]
  http://原来的地址.html?name1=value1&name2=value2
  比如：http://127.0.0.1:8020/0595.html?username=123
  所以，input使用时，name属性必不可少。缺少name，将导致该输入框的数据不向后台传递。

  2、 input的常用属性：
  ① type ：表示当前输入框是何种类型的输入框；
  ② name ： 给输入框起别名。向后台传递时，使用name=value的形式传递
  ③ value： 当前input的默认值；
  ④ placeholder: 输入框的提示内容。当输入框有value时，提示内容消失。
  ⑤ hidden： 隐藏当前输入框。 可以写为hidden="hidden",也可以省略属性值，只写
  隐藏的输入框内容，依然可以向后台传递数据
  ⑥ disablod： 禁用当前输入框。 可以显示，不能使用。
  被禁用的输入框内容，将不能向后台传递数据。
  ⑦ checked="checked" 设置单选按钮/多选按钮，默认选中
  3、input的type类型：
  ① text： 普通的文本框；
  ② password： 密码框。 输入的内容 ，显示为小黑点。
  ③ radio： 单选按钮。 单选按钮的value不能省略，这个value需要传到后台；
  单选按钮，凭借name是否相同，区分按钮是否为同一组。 同一组按钮只能选中一个，name必须相同。
  checked="checked" 设置单选按钮，默认被选中。
  ④ checkbox： 多选按钮。 其他与单选按钮相同。
  ⑤ file: 文件上传框。
  accept属性，可以限制只能上传何种类型的文件。 "*"表示可以接受所有文件，"image/*"表示只能接受图片。
  multiple="multiple" 设置可以上传多个文件。
  ⑥ submit： 表单提交按钮。
  ⑦ reset ： 表单重置按钮。点击将表单恢复为初始状态。
  ⑧ image ： 图形提交按钮。src属性导入图片，与submit都具有提交表单的作用。
  ⑨ button： 显示为按钮形状，但是没有任何作用。
  ⑩ hidden： 隐藏的输入框。与普通输入框+hidden="hidden"的作用相同。

  4、 select 下拉选择区块
  ① select里面的每一项，用标签表示；
  ② name属性，需要写到select标签上；
  ③ option标签如果有value属性，则向后台传递的将是value属性的值，如果没有value属性，则传递的是标签之间的文字。
  ④ option添加属性selected="selected"， 设置默认选中项。
  ⑤ select添加属性multiple="multiple"， 设置当前下拉控件可以多选
  ⑥ option添加属性title，表示鼠标指上后显示的文字。
  ⑦ select可以使用 标签对选项进行分组，用label属性显示分组名。
  
  
  青岛
  烟台
  
  
  济南
  临沂
  
  

  5、 textarea 文本域
  ① 文本域大小控制：
  可以用文本域属性cols="20"(宽度多少字符) rows="10"(高度多少行)
  可以使用CSS样式style="width:100px; height:100px;"
  ② 设置文本域大小不能拖动：
  style="resize: none;"
  ③ 设置文本域为只读模式，不能修改：
  
  ④ 文字超出区域处理：
  使用style="overflow: xx;"可以设置文字超出区域的显示的方式：
  >>> overflow: hidden; 超出区域的文字隐藏不显示；
  >>> overflow: scroll; 无论文字多少，都会显示水平垂直滚动条
  >>> overflow: auto; 自动，默认效果。文字多显示滚动条，文字少，不显示滚动条。
  >>> 可以使用overflow-x和overflow-y单独修改两个方向的滚动条
  overflow-y: scroll; overflow-x: hidden;

  【HTML5 智能表单】
  1、H5给我们提供了将form外的input与表单关联的方式。只需要给form表单起一个id，然后给表单外面的input添加form属性，指向这个id，就可以实现表单与input的绑定；
  

  
  
  2、 H5给我们新增了许多input的新的type类型。
  range color date email url
  3、H5新增的input属性：
  ① form属性： 关联指定表单的id。
  ② Placeholder： 输入框的提示内容
  ③ required="required" 必填
  ④ autofocus="autofocus" 指定输入框，自动获得焦点
  ⑤ autocomplete: 是否开启自动提示完成功能。 默认为开启状态，设置为off表示关闭，设置为on表示打开。
  可以给form标签设置autocomplete，控制表单所有输入框的自动提示功能。

  HTML基本标签

  标签：推荐   targe   模式   对齐   list   require   value   resize   背景   

  原文地址：http://www.cnblogs.com/liuqiang1109/p/7297346.html