Web前端自学总结

最新推荐文章于 2024-09-14 17:54:00 发布

稣貘

最新推荐文章于 2024-09-14 17:54:00 发布

阅读量304

点赞数

文章标签： web前端 html5

本文链接：https://blog.csdn.net/weixin_44179306/article/details/102864659

版权

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>标签
该标签能够在所需图像中设置作用区域，使用者可以通过点击该目标区域来跳转到相应的页面。

<img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif">
  <area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif">
  <area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif">
</map>

注意：
<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>标签
该标签用来定义按钮，该标签的内容即为你要使用按钮的内容。

<button type="button">点我!</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>元素

<h1>这是标题 1</h1>
<h1>这是标题 2</h1>
<h2>这是标题 3</h2>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</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>元素也可称为根元素。
目前先更新到这，随后会继续更新.