HTML学习之路总结

2019-05-18  本文已影响0人  鹅鹅鹅曲项向天歌呀

学习连接 : http://www.w3school.com.cn/html/html_headings.asp
这里讲的更详细,我只是总结我的学习精华

HTML 元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

开始标签 元素内容 结束标签
<p> 元素的内容是开始标签与结束标签之间的内容 </p>

1、空元素在开始标签中进行关闭（以开始标签的结束而结束）。比如 <br /> ,HTML、XHTML 和 XML 都接受这种方式。(<br/>标签定义换行)
2、大多数 HTML 元素可拥有属性。

HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
　1、属性总是以名称/值对的形式出现，比如：name="value"。
　2、属性总是在 HTML 元素的开始标签中规定。
例如:

<a href="http://www.w3school.com.cn">This is a link</a>

适用于大多数 HTML 元素的属性:

属性 描述
class 规定元素的类名（classname）
id 规定元素的唯一 id
style 规定元素的行内样式（inline style）
title 规定元素的额外信息（可在工具提示中显示）

HTML 标题

标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
　1、<h1> 定义最大的标题。<h6> 定义最小的标题。
　2、<hr /> 标签在 HTML 页面中创建水平线。

HTML 段落

段落是通过 <p> 标签定义的。

HTML 样式

style 属性用于改变 HTML 元素的样式。
例如:

<body style="background-color:yellow">

背景颜色 : style="background-color:yellow"
字体,颜色,大小 : style="font-family: 'Apple Chancery';color: #ff0000;font-size: 20px"
文本对齐 : style="text-align:center"

HTML 格式化

HTML 可定义很多供格式化输出的元素，比如粗体和斜体字。

标签 描述
<b> 粗体文字
<big> 大号字体
<em> 着重文字
<i> 斜体
<small> 小号文字
<strong> 加重语气
sub> 定义下标字
<sup 定义上标字
<del> 删除文字
<ins> 下划线文字

HTML 引用

HTML <q> 元素定义短的引用。
HTML <blockquote> 元素定义被引用的节(长引用)。
引用、引用和术语定义:

标签 描述
<address> 定义地址
<bdo> 定义文字方向
<blockquote> 长引用
<q> 短引用
<abbr> 定义缩写或首字母缩略语
<dfn> 定义项目或缩写的定义
<cite> 元素定义著作的标题

HTML 计算机代码

HTML 使用可变的字母尺寸，以及可变的字母间距。在显示计算机代码示例时，并不需要如此。<kbd>, <samp>, <code> 元素全都支持固定的字母尺寸和间距。
“计算机输出”标签:

标签 描述
<code> 定义计算机代码
<samp> 定义计算机代码样本
<tt> 定义打字机代码
<var> 定义变量
<pre> 预格式文本

HTML 注释

注释标签 <!-- 注释内容 -- > 用于在 HTML 插入注释。

HTML CSS

通过使用 HTML4.0，所有的格式化代码均可移出 HTML 文档，然后移入一个独立的样式表>。
外部样式表

<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; margin-left: 20px">
标签 描述
<style> 定义样式定义。
<link> 定义资源引用。
<div> 定义文档中的节或区域（块级）。
<span> 定义文档中的行内的小块或区域。

HTML 连接

连接由 <a> 标签定义。

<a name="tips">这里定义了锚,名字为tips</a>
<a href="#tips">这里使用了锚,语法"#锚的m",点击跳至该命名锚的链接</a>

HTML 图像

图像由 <img> 标签定义。
语法 : <img src="图片地址" />

背景图片 : <body background="URL" >

标签 描述
<img> 定义图像
<map> 定义图像地图。
<area> 定义图像地图中的可点击区域.

例如

<p> 这是一只傻不拉几的二哈
  <img
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557820909599&di=fb1b26468c56455c70432d41d7b07710&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20180721%2F4d0a1e90d9e2475088661142099dbf6d.jpeg"
          border="5"
          alt="这是一只二哈哈哈哈"
  align="middle"
  usemap="#erha"/>
</p>
<map name="erha" id="erha">

  <area
  shape="circle"
  coords="100,100,30"
  target="_blank"
  alt="点击到指定区域"
  href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557820909599&di=fb1b26468c56455c70432d41d7b07710&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20180721%2F4d0a1e90d9e2475088661142099dbf6d.jpeg">

</map>

HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格 描述
<table> 定义表格
<caption> 定义表格标题。
<th> 定义表格的表头。
<tr> 定义表格的行。
<td> 定义表格单元。
<thead> 定义表格的页眉。
<tbody> 定义表格的主体。
<tfoot> 定义表格的页脚。
<col> 定义用于表格列的属性。
<colgroup> 定义表格列的组。

例如:

<table border="5" cellpadding="5" cellspacing="5" bgcolor="aqua" frame="hsides">
    <caption>表格的标题</caption>
    <tr>
        <th bgcolor="red">Heading1</th>
        <th>Heading2</th>
        <th>Heading3</th>
    </tr>
    <tr>
        <td>1,1</td>
        <td>1,2</td>
        <td>1,3</td>
    </tr>
    <tr>
        <td colspan="3" align="middle">占用两列</td>
    </tr>
    <tr>
        <td rowspan="2">两行</td>
        <td>3,2</td>
        <td rowspan="2">两行</td>
    </tr>
    <tr>
        <td>4,2</td>
    </tr>

</table>

HTML 列表

无序列表始于 <ul> 标签。

有序列表始于 <ol> 标签。

自定义列表以 <dl> 标签开始。

标签 描述
<ol> 定义有序列表。
<ul> 定义无序列表。
<li> 定义列表项。
<dl> 定义定义列表。
<dt> 定义定义项目。
<dd> 定义定义的描述。

例如:

<ul>
    <li>无序列表1</li>
    <li>无序列表2</li>
</ul>
<ol>
    <li>有序列表1</li>
    <li>有序列表2</li>
</ol>
<dl>
    <dt>苹果</dt>
    <dd>苹果含有维生素ABCDEFG....</dd>
    <dt>梨子</dt>
    <dd>梨子里面水分超级多....止咳化痰..</dd>
</dl>

HTML 块

大多数 HTML 元素被定义为块级元素或内联元素。
可以通过 <div> 和 <span> 将 HTML 元素组合起来。

HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
HTML <span> 元素是内联元素，可用作文本的容器。

标签 描述
<div> 定义文档中的分区或节（division/section）。
<span> 定义 span，用来组合文档中的行内元素。

HTML 类

对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。为相同的类设置相同的样式，或者为不同的类设置不同的样式。
例如:

<head>
    <meta charset="UTF-8">
    <title>学习的标题</title>
    <style>
        .apples {
            background-color: bisque;
            color: #000;
            margin: 20px;
            padding: 20px;
        }

        span.red{ color: red}
    </style>
</head>
<body>

<div class="apples">
    <p>哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒</p>
</div>
<h1>我的<span class="red">天呐</span></h1>
</body>

HTML 布局

引用CSS 样式,后期专门学习.

HTML 响应式设计

RWD 指的是响应式 Web 设计（Responsive Web Design）
RWD 能够以可变尺寸传递网页
RWD 对于平板和移动设备是必需的
动态布局,根据浏览器的缩小放大改变布局的样式.

HTML 框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

框架结构标签（<frameset>）定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/columns 的值规定了每行或每列占据屏幕的面积

<frameset cols="25%,50%,25%">
    <frame src="/example/html/frame_a.html">
    <frame src="/example/html/frame_b.html">
    <frame src="/example/html/frame_c.html">
</frameset>

注意:不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！

HTML 内联框架

HTML iframe 标签

标签 描述
<iframe> 定义内联的子窗口（框架）

HTML 背景

<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">

URL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码。

HTML 脚本

JavaScript 使 HTML 页面具有更强的动态和交互性。

标签 描述
<script> 定义客户端脚本。
<noscript> 为不支持客户端脚本的浏览器定义替代内容。 
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>

HTML 头部

<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

标签 描述
<head> 定义关于文档的信息。
<title> 定义文档标题。
<base> 定义页面上所有链接的默认地址或默认目标。
<link> 定义文档与外部资源之间的关系。
<meta> 定义关于 HTML 文档的元数据。
<script> 定义客户端脚本。
<style> 定义文档的样式信息。 
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>我是标题</title>
    <base href="http://www.baidu.com" target="_blank"/>
    <link rel="stylesheet" type="text/css" href="XXX.css"/>
    <style>
        body{background-color: lightseagreen}
    </style>
    <meta name="描述" content="描述内容"/>
</head>
<body>
<a href="http://www.XXX">来来来</a>
</body>
</html>

HTML 实体

HTML 中的预留字符必须被替换为字符实体。

显示结果 描述 实体名称 实体编号
空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
" 引号 &quot; &#34;
' 撇号 &apos; (IE不支持) &#39;
￠ 分（cent） &cent; &#162;
£ 镑（pound） &pound; &#163;
¥ 元（yen） &yen; &#165;
€ 欧元（euro） &euro; &#8364;
§ 小节 &sect; &#167;
© 版权（copyright） &copy; &#169;
® 注册商标 &reg; &#174;
™ 商标 &trade; &#8482;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;

HTML URL

英文全称是 Uniform Resource Locator，中文也译为“统一资源定位符”。
比如 http://www.w3school.com.cn/html/index.asp，遵守以下的语法规则：

scheme : // host . domain : port / path / filename

解释：

Scheme 访问 用于...
http 超文本传输协议 以 http:// 开头的普通网页。不加密。
https 安全超文本传输协议 安全网页。加密所有信息交换。
ftp 文件传输协议 用于将文件下载或上传至网站。
file 您计算机上的文件。

HTML URL 编码

URL 编码会将字符转换为可通过因特网传输的格式。
URL 只能使用 ASCII 字符集来通过因特网进行发送。
由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格。URL 编码通常使用 + 来替换空格。

HTML Web 服务器

如果希望向世界发布您的网站，那么您必须把它存放在 web 服务器上。

HTML 颜色

颜色由红色、绿色、蓝色混合而成。
颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。

HTML 颜色名

这个......太多了,不说了.
提示 : 仅有 16 种颜色名被 W3C 的 HTML 4.0 标准支持，它们是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。
如果使用其它颜色的话，就应该使用十六进制的颜色值。

HTML 文档类型

<!DOCTYPE> 声明帮助浏览器正确地显示网页。
HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

版本 年份
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013 
<!DOCTYPE html>

HTML 速查手册

...没啥用,可以忽略...

XHTML 简介

XHTML 指的是可扩展超文本标记语言
XHTML 与 HTML 4.01 几乎是相同的
XHTML 是更严格更纯净的 HTML 版本
XHTML 是以 XML 应用的方式定义的 HTML
XHTML 是 2001 年 1 月发布的 W3C 推荐标准
XHTML 得到所有主流浏览器的支持

XHTML 元素

XHTML 元素必须正确嵌套
XHTML 元素必须始终关闭
XHTML 元素必须小写
XHTML 文档必须有一个根元素

XHTML 属性

XHTML 属性必须使用小写
XHTML 属性值必须用引号包围
XHTML 属性最小化也是禁止的

HTML 表单

HTML 表单用于收集用户输入。
HTML 表单包含表单元素。表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

    请输入地址:<br/>
    <input type="text" name="address">
    请选择性别:<br/>
    <input type="radio" name="sex" value="boy" checked> 男
    <br/>
    <input type="radio" name="sex" value="girl" > 女
    <br/>
    请提交信息:<br/>
    <input type="submit" value="提交">

<form action="action_page.php">

如果省略 action 属性，则 action 会被设置为当前页面。

<form action="action_page.php" method="GET/POST">

    <input type="radio" name="sex" value="boy" checked> 男

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>

元素....
 
</form>
属性 描述
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 规定向何处提交表单的地址（URL）（提交页面）。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。

HTML 表单元素

<select>
    <option value="山东">山东</option>
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="杭州">杭州</option>
</select>

<textarea name="message" rows="10" cols="20">
    啦啦啦阿拉啦啦啦啦啦啦阿拉啦啦啦啦啦啦阿拉啦啦啦啦啦啦阿拉啦啦啦啦啦啦阿拉啦啦啦
</textarea>

<button type="button" onclick="alert('你好呀,html!')">点我</button>

<input list="mylist">
    <datalist id="mylist">
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
        <option value="D">D</option>
    </datalist>

HTML 输入类型类型

    输入类型：text:<br/>
    <input type="text" name="allname">
    <br/>
    输入类型：password <br/>
    <input type="password" name="psw">
    <br/>
    输入类型：submit <br/>
    <input type="submit" value="Submit">
    <br/>
    输入类型：radio <br/>
    <input type="radio" name="sex" value="boy">boy
    <br/>
    <input type="radio" name="sex" value="girl">girl
    <br/>
    输入类型：checkbox <br/>
    <input type="checkbox" name="vehicle" value="Bike">bike
    <br/>
    <input type="checkbox" name="vehicle" value="Car">car
    <br/>
    输入类型：number
    <input type="number" name="quantity" min="1" max="5">
    <br/>
    输入类型：date<br/>
    <input type="date" name="riqi">

HTML 输入属性

<input type="text" value="value规定输入字段的初始值">
<br/>
<input type="text" value="readonly这段文字只读不能修改" readonly>
<br/>
<input type="text" value="disabled不可用，不可点击" disabled>
<br/>
<input type="text" value="size 属性规定输入字段的尺寸" size="20">
<br/>
<input type="text" value="maxlength属性规定输入字段允许的最大长度" maxlength="40">
<br/>

暂停更新一下，学学css，后期更新。。。。

HTML5 简介

HTML5 支持

HTML5 元素

HTML5 迁移

HTML5 代码约定

HTML5 画布

HTML5 SVG

HTML5 画布vsSVG

HTML 媒体

HTML 对象

HTML 音频

HTML 视频

HTML 地理位置

HTML 拖放

HTML Web存储

HTML 应用缓存

HTML Web Workers

HTML SSE

上一篇下一篇

猜你喜欢

热点阅读