没有合适的资源?快使用搜索试试~ 我知道了~
首页前端HTML5+CSS+JavaScript学习笔记.docx
前端HTML5+CSS+JavaScript学习笔记.docx

前端HTML5+CSS+JavaScript详细学习笔记,来自菜鸟教程、w3cSchool和b站视频教程的总结,包括基础知识和示例代码,欢迎大家指正
资源详情
资源评论
资源推荐

第(一)阶段 HTML5
1.1 html 标签
标签告知浏览器这是一个 文档。
标签是 文档中最外层的元素。
标签是所有其他 元素(除了 <!DOCTYPE>标签)的容器。
补充:标签
声明位于文档中的最前面的位置,处于 标签之前。
声明不是一个 标签;它是用来告知 浏览器页面使用了哪种
版本。
提示:总是给的 文档添加 声明,确保浏览器能够预先知道文档类型。
1.2 body 标签
标签定义文档的主体。
元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等)。
1.3 head 标签
元素是所有头部元素的容器。
元素必须包含文档的标题(!),可以包含脚本、样式、 信息 以及其他更多的
信息。以下列出的元素能被用在 元素内部:
<title>标签定义文档的标题,在所有 文档中是必需的。!元素有以下功能:
① 定义浏览器工具栏中的标题

② 提供页面被添加到收藏夹时的标题
③ 显示在搜索引擎结果中的页面标题
<base>标签为页面上的所有的相对链接规定默认 "#或默认目标。
① 在一个文档中,最多能使用一个 $元素。 $标签必须位于 元素内部。
② 请把 $标签排在 元素中第一个元素的位置,这样 区域中其他元素
就可以使用 $元素中的信息了。
③ 如果使用了 $标签,则必须具备 %&属性或者 %'属性或者两个属性都具备。
<meta>标签提供了 文档的元数据。元数据不会显示在客户端,但是会被浏览器解
析。(元数据( )是数据的数据信息。)
( 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者及其他元数据。
元数据可以被使用浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他
服务调用。
<style>标签定义 文档的样式信息。
① 在 $元素中,可以规定在浏览器中如何呈现 文档。
② 每个 文档能包含多个 $标签。
<link>标签定义文档与外部资源的关系。)*+标签最常见的用途是链接样式表。
)*+元素是空元素,它仅包含属性 %&。此元素只能存在于 部分,不过它可出现任何次数。
<script>标签用于定义客户端脚本,比如 , - ./%)0。

1
① $/%)0元素既可包含脚本语句,也可以通过 2$%/2属性指向外部脚本文件。
② , - ./%)0通常用于图像操作、表单验证以及动态内容更改。
③ 如果使用 2$%/2属性,则 $/%)0元素必须是空的。
④ 此元素可以存在于 部分和 部分。
<noscript>标签素用来定义在脚本未被执行时的替代内容(文本)。
此标签可被用于可识别 *$/%)0标签但无法支持其中的脚本的浏览器。如果浏览器支
持脚本,那么它不会显示出 *$/%)0元素中的文本。
1.4 h1-h6 标签
3标签被用来定义 标题。
定义重要等级最高的标题。定义重要等级最低的标题。
1.5 p 标签
0标签定义段落。
折行
如果希望在不产生一个新段落的情况下进行换行(新行),请使用 %4标签:
<p>This is<br />a para<br />graph with line breaks</p>
1 0元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,也可以在样式表
中规定。
)
斜体
4) 加粗4 5下划线45 删除线4 $50
上
标
4$50
/*%居中4/*% 6*$07空格

1.6 div 标签
)-标签定义 文档中的一个分隔区块或者一个区域部分。
)-标签常用于组合块级元素,以便通过 ..来对这些元素进行格式化。
1 注意:默认情况下,浏览器通常会在 )-元素前后放置一个换行符。然而,可以通过
使用 ..改变这种情况。
1.7 a 标签
标签定义超链接,用于从一个页面链接到另一个页面。
元素最重要的属性是 %&属性,它指定链接的目标。在所有浏览器中,链接的默
认外观如下:
① 未被访问的链接带有下划线而且是蓝色的
② 已被访问的链接带有下划线而且是紫色的
③ 活动链接带有下划线而且是红色的
1 如果没有使用 %&属性,则不能使用 %8 *'、) 、%、 %'以及 0属性。
通常在当前浏览器窗口中显示被链接页面,除非规定了其他 %'。
9 %':;<$&;,在当前浏览器窗口中显示被链接页面
= %':;< *+;,在新的浏览器窗口中显示被链接页面
> 使用 $标签使页面中的所有标签在新窗口中打开 $ %':2< *+24
链接 3* 属性
① * 属性规定锚( */%)的名称,可以使用 * 属性创建 页面中的书签。
② 书签不会以任何特殊方式显示,它对读者是不可见的。

③ 当使用命名锚(* */%$)时,我们可以创建直接跳至该命名锚(比如页面中某
个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
④ 提示:可以使用 )属性来替代 * 属性,命名锚同样有效。
⑤ 实例
首先,我们在 文档中对锚进行命名(创建一个书签):
<a name="tips">基本的注意事项 - 有用的提示</a>
然后,我们在同一个文档中创建指向该锚的链接:
<a href="#tips">有用的提示</a>
您也可以在其他页面中创建指向该锚的链接:
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的
提示</a>
在上面的代码中,我们将 ?符号和锚名称添加到 "#的末端,就可以直接链接到 !0$
这个命名锚了。
1.8 有序列表和无序列表
0:;)$/;333333实心圆 0:;/)%/;333333空心圆 0:;$@5 %;333333实心方块
0:;;4; ;4;(;4;);4;A;
剩余63页未读,继续阅读














安全验证
文档复制为VIP权益,开通VIP直接复制

评论5