目录
一、HTML整体架构
1.<!DOCTYPE html>表示文档的类型，表示该文件为 HTML5 文件，并不是标签。
2.<html></html>是HTML文档的根标签，其中<html>代表文档的开始，</html>代表文档的结束，
3.<head></head>是头部标签，
4.<title></title>当用浏览器查看此网页时，在浏览器的标题栏中将显示此标签中的内容。
5.<body></body>定义了文档的主体部分，即网页的具体内容。
6.<meta>描述网页的具体摘要信息，包括文档内容类型，字符编码信息，搜索关键字，网站提供的功能和服务的相关描述等。
7.<meta charset="utf-8">其中“utf-8”是一种字符编码，charset=”utf-8”是告知浏览器此页面属于什么字符编码格式，
二、meta相关属性知识
1.name ：定义元信息的名称，与 content 属性配合使用。
常见的 name 属性值有：description（网页描述）、keywords（关键词）、author（作者）、copyright（版权）、等
例示：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="description" content="免费 Web & 编程 教程">
<meta name="author" content="Runoob">
三、HTML标签基础知识
1. 双标签：<标签名> 内容 </标签名> 如：<body>内容</body>
单标签：<标签名 /> 如：<br />
2.标签关系：嵌套关系：<head> <title> </title> </head>
并列关系：<head></head>
<body></body>
3.常见语义化标签：
<title>：页面主体内容。
<hn>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。
<ul>：无序列表。
<ol>：有序列表。
<header>：通常用来放置整个页面或页面内的一个内容区块的标题。通常包括网站标志、主导航、全站链接、搜索框。
<nav>：标记导航。仅对页面中重要的链接群使用。
<main>：页面主要内容，一个页面只能使用一次。如果是web服务应用，
<article>：定义外部的内容，其中的内容独立于文档的其余部分。
<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
<footer>：页脚，只有当父级是body时，才是整个页面的页脚。 等等
4.常见文本格式：<strong>加粗，<em>斜体，<del>删除线，<ins>下划线，
四、HTML标签属性
1.属性语法： class, id, style, title,
2.<img />标记属性： src 路径， alt 替换文本， border 图像边框
3.链接标签：<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
4.锚点定位：
第一步：使用 <a href="#id名">链接文本</a> 创建链接文本<a href="#two">文本</a>
第二步：使用相应的id名标注跳转目标的位置<p id="two">文本</p>
五、路径
相对路径：以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。
绝对路径：绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的“D:\web\img\logo.gif”，
六：选择器
包含选择器：一层往下找例如：.a .ab .ac{}
伪类选择器： link --链接点击之前，visited--链接点击之后 hover--悬停， active--激活鼠标点击不松手。
:nth-child(n)：选择其父元素的第n个子元素，n可以是数字、公式或关键字（如odd或even）。
:nth-last-child(n)：选择其父元素的倒数第n个子元素。
:nth-of-type(n)：选择其父元素中第n个特定类型的元素。
:nth-last-of-type(n)：选择其父元素中倒数第n个特定类型的元素。
七、CSS样式--（CSS精灵技术）
1.文本字体样式：
字体胖瘦：font-weight: normal;
阴影：text-shadow: 1px 2px 5px gray;
字体类型：font-family: "微软雅黑";
文本缩进：text-indent: 2em; 16px=1em
文本行高：line-height: 2;
2.CSS精灵技术:
技术目的：为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites. CSS雪碧)。
背景图片：background-image:url(路径)
背景是否复制：background-repeat: no-repeat;
定位x轴、y轴：background-position：0 0；
扫一扫
2174
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
