Web前端自学总结

mac2025-12-30 2

Web前端自学总结

以下仅是自己的总结，和萌新们一起学习，总结一下近些天学习的东西。

自1999年以后HTML 4.01 已经改变了很多,今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式处理，和几个api拖放元素，定位，包括网页应用程序缓存，存储，网络工作者，等。

HTML5新元素： <canvas>标签：定义图形，该标签基于JavaScript的绘图API； <audio>标签：定义音频内容； <video>标签：定义视频； <source>标签：定义多媒体内容video和audio标签； <embed>标签：定义插件，如插件； <track>标签：为诸如 video 和 audio 元素之类的媒介规定外部文本轨道。 <datalist>标签：定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能值。 <keygen>标签：规定用于表单的密钥对生成器字段。 <output>标签：定义不同类型的输出，比如脚本的输出。等等，就不一一列举了！ HTML基本样式 Html5在下图的html后面的访问权限就不用写了，标准HTML5的声明格式为 <!DOCTYPE html> ** <!DOCTYPE> 声明非常重要，它是一种标准通用标记语言的文档类型声明，通过该标签，浏览器能够了解HTML5文档正在使用的HTML规范，<!DOCTYPE> 声明是HTML5文档的起始点，也就是说它必须位于HTML5文档的第一行！**

标签定义及使用说明<!DOCTYPE> 声明位于文档中的最前面的位置，处于标签之前。<!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。在 HTML 4.01 中，<!DOCTYPE> 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML （Standard Generalized Markup Language 标准通用标记语言）。DTD 指定了标记语言的规则，确保了浏览器能够正确的渲染内容。HTML5 不是基于 SGML，因此不要求引用 DTD。提示：总是给您的 HTML 文档添加 <!DOCTYPE> 声明，确保浏览器能够预先知道文档类型。 2. HTML<a>标签：标签定义及使用说明 <a>标签定义超链接，用于从一个页面链接到另一个页面。 <a>元素最重要的属性是 href 属性，它指定链接的目标。在所有浏览器中，链接的默认外观如下：未被访问的链接带有下划线而且是蓝色的. 已被访问的链接带有下划线而且是紫色的. 活动链接带有下划线而且是红色的. <a>属性：属性： New ：HTML5 中的常用新属性。 1. charset：值：char_encoding; 2. href:值：URL; 3. target：值：_blank,_parent,_self,_top; 全局属性 <a>标签支持HTML的全局属性。

<a href="http://www.baidu.com>访问百度首页！</a>

3.HTML<area>标签该标签能够在所需图像中设置作用区域，使用者可以通过点击该目标区域来跳转到相应的页面。

注意： <area>标签始终嵌套在<map>标签内部。 <img>标签中的usename属性与<area>元素中的name想关联。* <area>标签常用属性： 1.alt：值为“text”，规定区域的代替文本，如果使用href属性，则该属性是必需的。 2.coords：值为“coordinates”，规定区域的坐标。 3.href：值为“URL”，规定目标区域的URL。 4.shape：值为“dafault，rect，circle，poly“，规定目标区域的形状。 4.HTML5的<abbr>标签 <abbr>标签用来表示一个缩写词或者首字母略写如：<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p> **5.HTML5的<article>元素该标签定义独立的内容。该标签是HTML5的新标签。 6.HTML5<b>的标签

<p>这是一个普通的文本- <b>这是一个加粗文本</b>。</p>

7.HTML5的<base>标签该标签用来规定页面上所有的链接默认的URL和默认目标

<head><base href="//statics.w3cschool.cn/images/w3c/" target="_blank"></head> <body> <img src="logo.png" width="24" height="39" alt="w3cschool"> <a href="logo.png">w3cschool logo</a> </body>

注意：在一个文档中只能有一个<base>元素，必须位于<head>元素内部。 8.HTML5的<button>标签该标签用来定义按钮，该标签的内容即为你要使用按钮的内容。

9.HTML5的<col>标签 HTML5中的<col>标签用于控制表格中的列，使你方便的为表格中的列应用样式。例子如下：

<table border=1> <colgroup> <col span="2" style="background-color:red"> <col style="background-color:yellow"> </colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> </table>

<col>标签规定了<colgroup>元素内部每一列样式。通过使用<col>标签，可以向整个列应用样式，而不需要重复为每个单元或每一行设置样式。属性常用的为span，规定<col>元素应该横跨的列数。 10.HTML5的<ul>标签 <ul>定义无序列表

<ul> <li>Coffee</li> <li>Tea</li> </ul>

11.HTML5的<dl>标签带有项目和描述的描述列表：

<dl> <dt>咖啡</dt> <dd>黑色的热饮</dd> <dt>牛奶</dt> <dd>白色的冷饮</dd> </dl>

说明： <dl>标签定义一个描述列表。 <dl>标签与<dt>(定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。 12.HTML5的<div>元素 <div>标签定义HTML文档中的一个分隔区过着一个区域部分。 <div>标签常用于组合会计元素，一遍通过CSS来对这些元素进行格式化。实例文档中的一个区域将显示为蓝色：

<div style="color:#0000FF"> <h3>这是一个在 div 元素中的标题。</h3> <p>这是一个在 div 元素中的文本。</p></div>

说明：<div>元素常用于和CSS一起使用，用来布置页面。 13.<hr>元素：当内容的主题发生变化时，使用<hr>标签进行分隔。标签定义及使用说明： <hr>标签定义 HTML 页面中的主题变化（比如话题的转移），并显示为一条水平线。<hr>元素被用来分隔 HTML 页面中的内容（或者定义一个变化）。 14.<h1>至<h6>元素

定义和用法： HTML5 通过<h1> - <h6>标签可定义标题。<h1>定义最大的标题。<h6>定义最小的标题。由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。 15.<header>元素 HTML5中，<header>标签用来表示介绍性的内容，即定义了文档的页眉。标签定义及使用说明<header>标签定义文档或者文档的一部分区域的页眉。<header>元素应该作为介绍内容或者导航链接栏的容器。在一个文档中，您可以定义多个<header>元素。注释：<header>标签不能被放在<footer>、<address>或者另一个 <header>元素内部。 16.<html>元素定义和用法 HTML5 <html>标签是所有其他 HTML 元素（除了 <!DOCTYPE> 标签）的容器。 <html>标签告知浏览器这是一个 HTML 文档。 <html>元素是 HTML 文档中最外层的元素。 <html>元素也可称为根元素。目前先更新到这，随后会继续更新.

最新回复(0)