首页  思维导图  详情

html

2017-02-07 12:00:58   71  举报





AI智能生成

为你推荐

查看更多



HTML（上）

Html

html转换流程

HTML

web前端 HTML5 CSS3 HTML CSS

第十六章 HTML5脚本编程

html

html解析流程

HTMLl

前端开发

作者其他创作

大纲/内容

HTML

网页样式

选择器

标签选择器

标签名{属性名：属性；属性名：属性}

类选择器

.标签名{属性名：属性；属性名：属性}

ID选择器

#id{属性名：属性；属性名：属性}

<h1 style=\"font-size:18px\">行内式的使用方法</h1>

标签名，.类名，＃ID｛并集选择器｝

标签名.类名｛交集选择器｝

外部标签名内部标签名｛后代选择器｝

引入CSS样式的方式

行内样式

嵌入样式

导入样式

规定当前文档与被链接文档之间的关系，只有stylesheet被所有浏览器所适用

子主题

CSS的属性

类型

字体类型：font-family

字体渲染：text-shadow

字体大小：font-size

字体风格：font-style

oblique微斜

italic倾斜

字体粗细：font-weight

字体大写：font-variant

字体属性：font

font{风格粗细大小类型}

文本修饰样式：text-decoration

下划线：underline

删除线：line-through

颜色：color

背景

背景颜色：background-color

背景图像：background-image

背景图片重复方式：bakground-repeat

背景关联：background-attachment:fixed（背景不随着文字滚动）

区块

单词间距：word-spacing

字母间距：letter-spacing

首行缩进：text-indent

显示方式：display

行高：line-height

盒子模型

margin:0px auto;网页居中

边框：border

边框风格：style；边框厚度：width；边框颜色上下左右

border-style:点dotted 实solid 双double 虚dashed;

display控制元素的显示与隐藏

display:block将元素显示为块级元素，前后设置换行

display:inline将元素显示为航迹元素，先后不换行

display:none将元素隐藏

浮动

float

clear清除浮动

both清除左右浮动

overflow盒子溢出处理

visible内容会被裁剪，被裁剪得内容出现在盒子外部

hidden内容会被裁剪，并且其余内容不可见

定位

position

velative相对定位

将出现在它所在的位置上，让这个元素“相对于”它的起点进行移动

absolute绝对定位

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

z-index设置层次

列表

项目编号类型：list-style-type

项目编号图像：list-style-image

项目标记位置：list-style-position

inside标记显示在里面

onside标记显示在外面

超链接伪类

未单击访问时超链接样式 a:link

单击访问后超链接样式 a:visited

鼠标悬浮其上的超链接样式 a:hover

鼠标单击未释放的超链接样式 a:active

设置鼠标形状：cursor

默认光标：default

超链接的指针：pointer

span{cursor:pointer;}

指示程序正在忙：wait

指示可用的帮助：help

指示文本：text

标签及属性

<html> 与 </html> 之间的文本描述网页

<head> 与 </head> 之间的文本是网页头部可见内容

<title> 与 </title> 之间的文本是网页标题

<body> 与 </body> 之间的文本是可见的页面内容

<h1> 到 </h6> 之间的文本被显示为标题

<p> 与 </p> 之间的文本被显示为段落

<br/> 换行 <hr/> 水平线

<em> 与 </em> <i> 与 </i>之间的文本为斜体

<strong> 与 </strong> 之间的文本被加重

<img/> 与 </img>HTML 图像是通过 <img> 标签进行定义的。

<a> 与 </a> HTML 链接是通过 <a> 标签进行定义的。

·······

锚链接（跳转到指定标签）：<a href=\"#name\"></a><p name=\"name\"></p>

特殊符号

  空格

> 大于号

< 小于号

www.w3school.com.cn

UTF-8，GB2312，GBK

<ul><li> 与 </li></ul> 无序列表

属性type：disc实心圆，square方块，circle空心圆

<ol><li> 与 </li></ol> 有序列表

属性type：1aAIi

<dl><dt><dd> 与 </dd>备注</dt></dl> 定义列表

<table> 与 </table> 表格标签，里面可以嵌套列表

<th> 与 </th> 定义表头

<tr> 与 </tr> 定义表格的行

<td> 与 </td> 定义表格的单元

<thead> 与 </thead> <tbody> 与 </tbody> <tfoot> 与 </tfoot>。。。

属性（水平对齐align：left左对齐，center居中，right右对齐；absmiddle图片居中对齐垂直对齐valign：top顶端对齐，middle居中对齐，bottom底端对齐，baseline基线对齐）

水平合并colspan，列表合并rowspan

<frameset> 与 </frameset>(写在body外面)

属性（定义框架横向排序cols=\

<form> 与 </form> 表单标签，里面可以嵌套表单元素

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。当您使用 GET 时，表单数据在页面地址栏中是可见的如果表单正在更新数据，或者包含敏感信息（例如密码）。POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。

<input type=\"text\"> 定义用于文本输入的单行输入字段

<input type=\"password\"> 定义密码框。

<input type=\"radio\"> 定义单选按钮。

<input type=\"radio\" name=\"sex\"（相同单选按钮的name要一致） value=\"female\">Female

<input type=\"checkbox\" name=\"复选框之间的name要一致\"> 定义复选框。

<input type=\"submit\"> 定义提交表单的按钮。

<input type=\"reset\"> 定义重置表单的按钮。

<input type=\"button\"> 定义表单的普通按钮。

<button type=\"button\" onclick=\"alert('Hello World!')\">Click Me!</button>

<input type=\"file\"> 定义文件选择框。

<input type=\"hidden\">隐藏域

<select> 定义下拉列表<option> 定义待选择的选项</option></select>

<select name=\"cars\" size=\"每次出现的长度\"><option value=\"volvo\" selected = \"selected\"（默认选中）>Volvo</option><option value=\"saab\">Saab</option><option value=\"fiat\">Fiat</option><option value=\"audi\">Audi</option></select>

<textarea> 元素定义多行输入字段（文本域）</textarea>

<textarea name=\"message\" rows=\"10\" cols=\"30\">这是预定义的文本内容</textarea>

<datalist> 元素规定预定义选项列表。<option value=\"预定义内容\"></datalist>

<fieldset域><legend域标题>语义化表单</legend></fieldset>

关联表单