html

1 HTML的简介和语法

HTML简介

HTML是Hyper Text Markup Language的缩写:超文本编辑语言;
HTML主要用来标记网页的内容和结构;

HTML的发展史:

1991html --> 1995html2 --> 1996-html3.2 --> 1997-html4.0 --> D[1999-html4.01]
D --> 2000xhtml1.0 --> 2001xhtml1.1 --> 2005xhtml2.0
D --> 2008html5 --> 2014html5:-ing

HTML文档和语法

  • 文档

html文档

  • 文档的头部

html文档头部

  • 语法

HTML语法

书写规范:属性值一般小写;属性值要有双引号;嵌套要缩进;常用属性(全局属性):id;class;style;title;

书写规范

2 HTML标签总图

html标签总图

3 章节标签

文档章节相关的标签:body、header、nav、aside、section、footer;

章节标签

4 标题标签

标题标签:<h1></h1>----<h6></h6>

标题标签

5 文本标签

<a>标签

  • 创建一个指向另一个文档的链接,target控制在哪个窗口打开,默认为self;

超链接

target="inner";

inner target

  • 创建一个内部锚点;

文档锚点

  • 打开邮箱、在手机上打开拨号软件;

邮箱、拨号

抄送、主题:
抄送主题

强调标签

斜体:<em></em>

粗体:<strong></strong>

强调

<span>标签

特定的样式给特定文字:<span></span>

span

<br>标签

换行:<br>

换行

引用标签

引用:<cite></cite><q></q>;

代码:<code></code>;

格式化:<b></b><i></i>;

引用标签

6 组合内容标签

分区:<div></div>;

div应用
div应用1

段落:<p></p>;

<p>
    this is a paragraph!
</p>

列表:<ul></ul>/<ol></ol>/<dl></dl>;

  • ul
    无序列表
  • ol
    有序列表
    有序列表
  • dl
    注释列表

原样式:<pre></pre>;

区块:<blockquote></blockquote>;

7 嵌入内容标签

嵌入图片:img;

插入图片

嵌入页面:iframe;

插入页面

嵌入插件:object、embed;

object插件
embed插件

嵌入视频:video(autoplay:自动播放;loop:循环播放;controls:控制按钮;poster:封面;track:字幕;);

嵌入视频

嵌入音频:audio;

嵌入图形图像:canvas(基于像素)、Svg(基于矢量);

嵌入图像

嵌入热点区域:map—area;

热点区域

8 表格标签

<table></table>;<caption></caption>

<thead></thead>;<tbody></tbody>;<tr></tr>;<th></th>;<td></td>;<tfoot></tfoot>

表格标签

跨列:colspan

跨列

跨行:rowspan

跨行

9 表单标签

表单 form method=(post/get);

跨行

输入 input(file/checkbox(checked/disable)/radio/text(placeholder/readonly/hidden)/submit/name/value)

跨行

按钮 button

跨行

选择框 select/option(selected/optgroup)

跨行

文本区域 textarea

跨行

标签 label

跨行

html5新增的标签:

email/url/number/tel/search/range/color

Date/month/week/time/datetime/datetime-local

10 实体字符

跨行

11 语义化

语义化的作用:

  • SEO(Search Engine Optimization)
  • 提高代码的可访问性
  • 提高代码的可读性

如何做到语义化:用正确的标签来表示相应的内容;

原文地址:https://www.cnblogs.com/luwanlin/p/10066887.html