导图社区 HTML

HTML

关于HTML的思维导图，分享了网页样式、标签及属性的知识，有兴趣的可以看看哟。

编辑于2023-05-27 23:46:10 湖南

开发

银发书生

HTML

社区模板帮助中心，点此进入>>

银发书生

相似推荐
大纲

HTML

网页样式

选择器

标签选择器

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

类选择器

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

ID选择器

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

<pre class="prettyprint linenums prettyprinted"><code class="language-html"><h1 style="font-size:18px">行内式的使用方法</h1></code></pre>

标签名，.类名，＃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

背景图片X,Y轴起始位置：background-position

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

区块

单词间距：word-spacing

字母间距：letter-spacing

垂直与文本对其方式：vertical-align,text-align

首行缩进：text-indent

显示方式：display

行高：line-height

盒子模型

定义宽高：width,height

内边距上下左右：padding-top,right,bottom,left

外边距上下左右：margin-top,right,bottom,left

margin:0px auto;网页居中

边框：border

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

<pre>border-style:点dotted 实solid 双double 虚dashed; </pre>

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> 之间的文本被显示为标题

与 之间的文本被显示为段落

换行 <hr/> 水平线

与 与 之间的文本为斜体

与 之间的文本被加重

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

<pre><img src="图片地址" width="宽度" height="长度" <code>alt="</code><code>用来为图像定义一串预备的可替换的文本"</code> title="鼠标悬停出文字"/></pre>

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

·······

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

特殊符号

空格

&gt;   大于号

&lt;   小于号

&copy;   版权符号©

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="200px,*,100px"纵向排序rows）

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

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

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

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

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

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

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

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

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

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

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

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

<input type="hidden">隐藏域

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

<pre><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></pre>

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

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

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

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

关联表单

<pre id="line1"><label for="<a class="attribute-value">male</a>">男</label> <input type="<a class="attribute-value">radio</a>" name="<a class="attribute-value">gender</a>" id="<a class="attribute-value">male</a>"/></pre>