HTML

<html>

<head>

</head>

</html>

标签放在需要修饰的内容的两边

属性放在左标签里、单标签就放在单标签里

属性：bgcolor/background/

文字：<font></font>

属性：size(-7~+7之间)/color/face(字体)

<h1>一级标题</h1> (有 h1到 h6)自带加粗放大居中功能

<pre></pre> ---预设格式，代码中是什么格式，浏览器显示的就是什么格式

图片：<img src="图片地址" />

属性：width/height/border/align="top/bottom/center"/alt="鼠标放在图片上时显示的描述信息"/hspace(水平方向的距离)/vspace(垂直方向的距离)

内容滚动：<marquee >内容</marquee>

--属性：direction="up/down/right/left", srolldelay=""值越大，速度越小，behavior="alternate"来回滚动

onmouseover=this.stop( ); onmouseout=this.start( );

超链接：<a href="链接地址"></a>

锚标记：例如在网页的底部点击返回顶部，则可以返回底部

特殊字符：   空格

< 小于 <

> 大于 >

表格：表格里可以放几乎所有内容，包括文字、列表、图片等等

<table> --表示一个表格

<tr> --表示一行

<th></th> --表示一个单元格，显示为标题

</tr>

<tr> --表示一行

<td></td> --表示一个单元格

</tr>

</table>

属性：

表格：bgcolor/background/border/bordercolor/width/height/

cellspacing/cellpadding/align="left/center/right"(表格中浏览器的位置)

行：bgcolor/background/height/align(该行文字位置)

单元格：bgcolor/background/width/rowspan="2"(合并2行)，colspan="2"(合并2列)，align(单元格文字位置)

表单：<form action="提交地址" method="提交方式"></form>提交方式有两种：get提交方式不安全，post:提交方式安全

把这句加到body里面包含整个表单内容，点击提交按钮是可以提交表单内容。

表单内容：文本框<input type="text"> 属性：size/value/readonly/disanbled/maxlength

密码区<input type="password">

单选：每个单选项都要写<input type="radio" name="">选项每个选项的name必须一致。 checked="checked"表示默认

多选：每个单选项都要写<input type="checkbox" >选项 checked="checked"表示默认

下拉列表：<select>

<option>选项</option> 加上selected="selected"表示默认

</select>

上传文件：<input type="file">

按钮：<input type="button"><input type="submit"><input type="reset"> 属性中加上value=""更改按钮中默认的文字

文本区：<textarea rows="10" clos="100"> cols、rows设置文本区大小

可以输入默认显示文字，也可不写显示空文本区

</textarea>

列表：

无序列表：<ul type="disc/circle/square"> 可以写type设置列表样式，不写type时默认实心点。

<li>列表内容</li> ----加上 style="list-style:none"去掉列表选项前的标记

</ul>

有序列表：<ol type="1/i/I/a/A">默认样式1,2,3... 加上start="5"表示编号从5开始，5必须是阿拉伯数字表示

</ol>

外部框架：用来分割整个浏览器（以下代码放在 head标签里）

</frameset>

怎么实现框架中点击左页面，右页面发生效果改变：

左：<a href="" target="右页面别名"></a>

右：<frame src="" name="右页面别名"></frame> (</frame>可有可无)

可以设置窗口链接的显示位置 target：

_blank/_self/_top/_parent

<br/> 换行

<hr/> 水平线属性：width/size/color/align

margin：外边距

padding：内边距

行元素：使用该标签后不换行如：font等

块元素：该标签有换行功能如：p/h1~h6等

块元素才有 align属性

CSS

背景：

背景色：background-color: red ---可以不写 -color和-image，系统会根据后面接的内容判断是颜色还是图片地址

背景图：background-image: url()

背景图的平铺：background-repeat: no-repeat/repeat/repeat-x/repeat-y

背景图的偏移：background-position:左右上下；（值可正可负）

文字：font-size:123px;

color/font-size/family(字体)/weight(粗细，不用px)/line-height:

text-align:/text-decoration:none(去除下划线)/letter-spacing

CSS 为 HTML控制格式

在 HTML 中链接 CSS 的方式：

1. 连接样式（首选/推荐） <link rel="stylesheet" href="css文件地址">

2. 导入样式 @import "css文件地址"

3. 内嵌就是直接放在 html文件中 head里的

4. 行内样式表

选择器：符号与别名之间不加空格，别名不用中文，不要数字开头

1. id选择器 html文件中在标签里用 id="别名"接收，css文件里用 #别名{设置格式}

2. 类选择器用 class=""接收，用 .别名{ }设置。

3. 标签选择器在 css文件中用标签名 { }设置对贴了该标签的所有内容都生效

标签里只能接收一个 id 选择器，可以接收多个类选择器。当一个标签里有多种选择器时，优先级为 id选择器 >类选择器 >标签选择器

4. 伪类选择器一般用在超链接中

a linked: blue;链接状态（一开始显示颜色）

a hover: red; 悬浮状态（鼠标放在链接位置）

a active: yellow; 激活状态（鼠标点击）

a visited: grey; 访问后状态

其他：如 table tr:

float：left

display: block 显示为块状

秒客网

HTML&CSS基础知识总结

HTML

CSS

相关文章