前台Html5 思维导图模板_ProcessOn思维导图、流程图

Html5

基本结构

分支主题

① 一个文档声明：<!DOCTYPE HTML>② 一个html标签对：<html></html>③ 一个head标签对：<head></head>④ 一个body标签对：<body></body>

文档类型：<!DOCTYPE HTML>

<HTML>标签的语义化

<head>标签

标题标签：<title>

<meta>

作用：通俗点说，meta标签就是用来告诉“搜索蜘蛛”这个页面是干嘛的。

1、meta标签name属性

2、meta标签http-equiv属性

定义页面所使用的语言

语法：<head><meta http-equiv=\"content-type\" content=\"text/html; charset=gb2312\"/></head>说明：这段代码告诉浏览器该页面所使用的字符集是gb2312，即国际汉字码。只需要了解就行

实现页面的自动刷新跳转

语法：<head><meta http-equiv=\"refresh\" content=\"6;url=http:/www.baidu.com\"/></head>举例：<!DOCTYPE html> <html xmlns=\"http://www.w3.org/1999/xhtml\"><head><meta http-equiv=\"refresh\" content=\"6;url=http://www.baidu.com\"/></head><p>这个页面在6秒之后自动跳转到百度首页</p></body></html><meta>标签对于一般页面制作者来说，实际意义不大，只有在整站设计开发的实战中，我们才会用到非常多的meta标签属性。只需要了解meta标签的基本功能就行了，哪怕代码不会写都没关系，以后不会再回过头来看就行了。

<link>

作用：用于外部文件的链接

语法：<head><link rel=\"stylesheet\" type=\"text/css\" title=\"tem\" href=\"/temp.css/\"></head>

<style>

<base>

作用：为整个页面定义所有链接的基础定位，其主要的作用是为了确保文档中所有的相对URL，都可以被分解成正确的文档地址，使在文档本身被移动或重命名的情况下也可以正确解析。

语法：<head><base href=\"http://lvyestudy\"/></head><base>标签经常使用在创建文档集合中，为了不破坏文档中任何链接，使用者通过在每个文档中放置正确的<base>标签，便可以在目录甚至服务器之间移动整个文档集合。

<body>排版标签

html注释

标题标签

<h1>~<h6>其中<h1>标题的重要性最高，<h6>标题最低。一般一个页面只能有一个<h1>，而<h2>~<h6>可以有多个。

段落标签<p>

换行标签

方法一：采用两个<p>标签方法二：采用换行标签<br/>

br>用来给文字换行，而<p>标签用来给文字分段。

水平线标签<hr/>

div span

[object Object]

文件格式化标签

粗体标签<b>、推荐<strong>

斜体标签<i>、<cite>、推荐<em>

上标标签<sup>

下标标签<sub>

删除线标签<s>、推荐<del>

下划线标签<u>推荐<ins>

图像标签<img>

标签属性

<标签名属性1=\"属性值1\" 属性2=\"属性值2\" …> 内容 </标签名>

链接标签

<a href=\"跳转目标\" target=\"目标窗口的弹出方式\">文本或图像</a>

href：链接目标的url地址target：其中self为默认值，blank为在新窗口中打开方式。

1.外部链接需要添加 http:// www.baidu.com2.内部链接直接链接内部页面名称即可比如 < a href=\"index.html\"> 首页 </a >3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href=\"#\")，表示该链接暂时为一个空链接。4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

内部

name 属性

首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：<a name=\"tips\">基本的注意事项 - 有用的提示</a>然后，我们在同一个文档中创建指向该锚的链接：<a href=\"#tips\">有用的提示</a>也可以在其他页面中创建指向该锚的链接：<a href=\"http://www.baidu.com/html/html_links.asp#tips\">有用的提示</a>

外部

脚本

空链接

<a href=\"#\">这是会跳到页首的</a><a href=\"javascript:void(0)\">这个不会跳动</a>

锚点定位

1.使用“a href=”#id名>“链接文本\"</a>创建链接文本（被点击的） <a href=\"#two\"> 2.使用相应的id名标注跳转目标的位置。 <h3 id=\"two\">第2集</h3>

base 标签

base 写到 <head> </head> 之间把所有的连接都默认添加 target=\"_blank\"

特殊字符标签

注释标签

路径

相对路径

1. 图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如img src=\"logo.gif\" /。2. 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如img src=\"img/img01/logo.gif\" /。3. 图像文件位于HTML文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如img src=\"../logo.gif\" /。

绝对路径

“D:\\web\\img\\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。

列表标签

无序列表

有序列表

自定义列表

表

表格

表格标签

<table> <tr> <tr></tr>中只能嵌套<td></td> <td>单元格内的文字</td>  ...可以容纳所有的元素 </tr> ...</table>

table-表 tr-行 td-单元格（无列）

可使表格内所有内容对齐

表格结构

<thead></thead>：用于定义表格的头部。<tbody></tbody>：用于定义表格的主体。位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。

表格标题

<table> <caption>我是表格标题</caption></table>

合并单元格

跨行合并：rowspan跨列合并：colspan

1. 表格提供了HTML 中定义表格式数据的方法。2. 表格中由行中的单元格组成。3. 表格中没有列元素，列的个数取决于行的单元格个数。4. 表格不要纠结于外观，那是CSS 的作用。

表单

表单域

<form action=\"url地址\" method=\"提交方式\" name=\"表单名称\"> 各种表单控件</form>

1. Action 在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。2. method 用于设置表单数据的提交方式，其取值为get或post。3. name 用于指定表单的名称，以区分同一个页面中的多个表单。注意：每个表单都应该有自己表单域。

method

get提交方式

post提交方式匿名提交

表单控件

input

radio 单选

checkbox 复选

button 普通按钮submit 提交resit 重置

imag

属性

check 被选中的

maxlength 最大长度

file 文件域

textarea控件(文本域)

下拉菜单

1. select</select中至少应包含一对option></option。2. 在option 中定义selected =\" selected \"时，当前项即为默认选中项。

label

单标签换行标签<br />、水平线标签<hr/>、图像标签<img><input/>控件、link

CSS

样式规则

样式

内部式

行内式

<标签名 style=\"属性1:属性值1; 属性2:属性值2; 属性3:属性值3;\"> 内容 </标签名>

外部式

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

CSS字体样式属性

font-size:字号大小

可以使用相对长度单位，也可以使用绝对长度单位。相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。

font-family:字体

网页中常用的字体有宋体、微软雅黑、黑体等p{ font-family:\"微软雅黑\";}可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。

1. 现在网页中普遍使用14px+。2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。3. 各种字体之间必须使用英文状态下的逗号隔开。4. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。5. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: \"Times New Roman\";。6. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

CSS Unicode字体

font-weight:字体粗细

数字 400 等价于 normal，而 700 等价于 bold。但是我们更喜欢用数字来表示。

可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。

font-style:字体风格

字体标签 i和em可使字体倾斜

CSS实现字体风格——normal：默认值，浏览器会显示标准的字体样式。italic：浏览器会显示斜体的字体样式。oblique：浏览器会显示倾斜的字体样式。平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。

font:综合设置字体样式

字体连写

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

CSS外观属性

color:文本颜色

两两相同可缩写

line-height:行间距

属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px一般情况下，行距比字号大7.8像素左右就可以了。

text-align:水平对齐方式

left：左对齐（默认值）right：右对齐center：居中对齐

text-indent:首行缩进

text-decoration 文本的装饰

CSS选择器

基础选择器

标签选择器（元素选择器）

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  或者元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

类选择器

.类名{属性:属性值；}（属性可有多个）标签调用的时 class=“类名” 即可。

1.长名称或词组可以使用中横线来为选择器命名。2.不建议使用“_”下划线来命名CSS选择器。3.不要纯数字、中文等命名，尽量使用英文字母来表示。

上面点声明下面class调用

多类名选择器

最终“多类名显示蓝色”，按css样式里的上下顺序来

id选择器

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

通配符选择器

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

* { margin: 0; /* 定义外边距*/ padding: 0; /* 定义内边距*/}

id选择器与类选择器的最大区别是使用次数不同id是唯一的只可使用一次，类选择器可使用多次

复合选择器

交集选择器

并集选择器

适用于集体声明用，隔开

后代选择器

外层写前，内层写后，中间用空格隔开

也支持这种

子元素选择器

后代选择器是指所有后代，子代选择器则指最近的后代，用>分割

特殊情况，用<a><a/>分割下一个<a>中间间距<ul><li>所以不会选择

伪类选择器

链接伪类选择器

- :link /* 未访问的链接 */- :visited /* 已访问的链接 */- :hover /* 鼠标移动到链接上 */- :active /* 选定的链接 */lvha顺序不可颠倒

eg

快捷键

1. 生成标签直接输入标签名按tab键即可比如 div 然后tab 键，就可以生成 <div></div>2. 如果想要生成多个相同标签加上 * 就可以了比如 div*3 就可以快速生成3个div3. 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了4. 如果有兄弟关系的标签，用 + 就可以了比如 div+p 5. 如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab 键就可以了

前台