HTML与CSS菜鸟总结
2014-07-15 22:55
106 查看
摘要: 一个门外汉学了HTML基础与CSS基础一周后的总结，请大家多多指教！
HTML
一：关于HTML:
1、HTML 是用来描述网页的一种语言。 HTML 文档 = 网页
2、HTML 标签是由尖括号包围的关键词，比如 <html>
3、HTML 标签通常是成对出现的，比如 <b> 和 </b>
4、标签对中的第一个标签是开始标签，第二个标签是结束标签
5、开始和结束标签也被称为开放标签和闭合标签
6、Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
二、HTML 标签：
1、<body> 元素：<body> 元素定义了 HTML 文档的主体。这个元素拥有一个开始标签 <body>，以及一个结束标签 </body>。 元素内容是另一个 HTML 元素（如p 元素）。
2、<html> 元素：<html> 元素定义了整个 HTML 文档。 这个元素拥有一个开始标签 <html>，以及一个结束标签 </html>。元素内容是另一个 HTML 元素（如body 元素）。
3、HTML 标题是通过 <h1> - <h6> 等标签进行定义的，<h1> 定义最大的标题。<h6> 定义最小的标题。<h1>F08</h1>
4、HTML 段落是通过 <p> 标签进行定义的。<p>LOVE</p>
5、HTML 链接是通过 <a> 标签进行定义的。<a href="http://www.baidu.com">This is a link</a>在 href 属性中指定链接的地址。
6、HTML 图像是通过 <img> 标签进行定义的。<img src="11.jpg" alt="文本"/>图片不存在时显示文本。
7、HTML水平线：<hr /> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。<!-- This is a comment -->
8、可以在HTML 代码中加入<br />进行换行。
9、HTML中的列表：无序列表：ul>li；有序列表：ol>li；自定义列表：dl>dt>dd
10、表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用 <th> 标签进行定义。border="1"如果不定义边框属性，表格将不显示边框。
11、HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。没特殊的意思。
12、HTML <span> 元素是内联元素，可用作文本的容器。没特殊的意思。
13、表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。表单使用表单标签（<form>）定义。
14、背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。
15、嵌套的 HTML 元素：
<html>
<body>
<p>大家好！</p>
</body>
</html>
CSS
css样式：加载css样式有以下几种：
1、外部样式：<link href="layout.css" rel="stylesheet" type="text/css" />这种形式是把css单独写到一个css文件内，然后在源代码中以link方式链接。它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。
2、内嵌样式：<style type="text/css"> h2 { color:#000;}</style>它是以<style>和</style>结尾，写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面。
3、内部样式：<p style="font-size:18px;">内部样式</p>这种在标签内以style标记的为行内样式，行内样式只针对标签内的元素有效，因其没有和内容相分离，所以不建议使用。
css优先级：
1、id优先级高于class优先级高于元素优先级高于伪类优先级高于通配。
2、后面的样式覆盖前面的。
3、指定的高于继承
4、行内样式高于内嵌或外部样式，内嵌样式高于外部样式。
总结：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的
css盒模型组成:
1、元素盒：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。
2、行盒：定线，中线，基线，底线（line-heigh控制文字行高以中线为基准）。
3、EM盒：
4、内嵌盒：
folat浮动:不浮动none,left向左浮动，right向右浮动。（clear：left 清除浮动）。
position定位：静态定位static，相对定位relative，绝对定位absolute，固定定位fixed。
overflow处理溢出：visible默认 不裁剪不加滚动条，hidden裁剪内容不显示超出部分，scroll裁剪内容提供滚动条，auto必要时裁剪内容加滚动条。
制定裁剪区域：clip属性确定对象的显示区域，取值为rect（top right bottom left）|auto如任意一边用auto相当于该边未作裁剪。
元素的可见性：隐藏：1、display：none； 2、visibility：hidden；区别1，display在渲染时直接去掉這一元素，visibility渲染界面时不渲染，渲染树中存在。（display空间不保留visibility空间保留）2、display，visibility共同具有诛连性。
HTML
一：关于HTML:
1、HTML 是用来描述网页的一种语言。 HTML 文档 = 网页
2、HTML 标签是由尖括号包围的关键词，比如 <html>
3、HTML 标签通常是成对出现的，比如 <b> 和 </b>
4、标签对中的第一个标签是开始标签，第二个标签是结束标签
5、开始和结束标签也被称为开放标签和闭合标签
6、Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
二、HTML 标签：
1、<body> 元素：<body> 元素定义了 HTML 文档的主体。这个元素拥有一个开始标签 <body>，以及一个结束标签 </body>。 元素内容是另一个 HTML 元素（如p 元素）。
2、<html> 元素：<html> 元素定义了整个 HTML 文档。 这个元素拥有一个开始标签 <html>，以及一个结束标签 </html>。元素内容是另一个 HTML 元素（如body 元素）。
3、HTML 标题是通过 <h1> - <h6> 等标签进行定义的，<h1> 定义最大的标题。<h6> 定义最小的标题。<h1>F08</h1>
4、HTML 段落是通过 <p> 标签进行定义的。<p>LOVE</p>
5、HTML 链接是通过 <a> 标签进行定义的。<a href="http://www.baidu.com">This is a link</a>在 href 属性中指定链接的地址。
6、HTML 图像是通过 <img> 标签进行定义的。<img src="11.jpg" alt="文本"/>图片不存在时显示文本。
7、HTML水平线：<hr /> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。<!-- This is a comment -->
8、可以在HTML 代码中加入<br />进行换行。
9、HTML中的列表：无序列表：ul>li；有序列表：ol>li；自定义列表：dl>dt>dd
10、表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用 <th> 标签进行定义。border="1"如果不定义边框属性，表格将不显示边框。
11、HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。没特殊的意思。
12、HTML <span> 元素是内联元素，可用作文本的容器。没特殊的意思。
13、表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。表单使用表单标签（<form>）定义。
14、背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。
15、嵌套的 HTML 元素：
<html>
<body>
<p>大家好！</p>
</body>
</html>
CSS
css样式：加载css样式有以下几种：
1、外部样式：<link href="layout.css" rel="stylesheet" type="text/css" />这种形式是把css单独写到一个css文件内，然后在源代码中以link方式链接。它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。
2、内嵌样式：<style type="text/css"> h2 { color:#000;}</style>它是以<style>和</style>结尾，写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面。
3、内部样式：<p style="font-size:18px;">内部样式</p>这种在标签内以style标记的为行内样式，行内样式只针对标签内的元素有效，因其没有和内容相分离，所以不建议使用。
css优先级：
1、id优先级高于class优先级高于元素优先级高于伪类优先级高于通配。
2、后面的样式覆盖前面的。
3、指定的高于继承
4、行内样式高于内嵌或外部样式，内嵌样式高于外部样式。
总结：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的
css盒模型组成:
1、元素盒：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。
2、行盒：定线，中线，基线，底线（line-heigh控制文字行高以中线为基准）。
3、EM盒：
4、内嵌盒：
folat浮动:不浮动none,left向左浮动，right向右浮动。（clear：left 清除浮动）。
position定位：静态定位static，相对定位relative，绝对定位absolute，固定定位fixed。
overflow处理溢出：visible默认 不裁剪不加滚动条，hidden裁剪内容不显示超出部分，scroll裁剪内容提供滚动条，auto必要时裁剪内容加滚动条。
制定裁剪区域：clip属性确定对象的显示区域，取值为rect（top right bottom left）|auto如任意一边用auto相当于该边未作裁剪。
元素的可见性：隐藏：1、display：none； 2、visibility：hidden；区别1，display在渲染时直接去掉這一元素，visibility渲染界面时不渲染，渲染树中存在。（display空间不保留visibility空间保留）2、display，visibility共同具有诛连性。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Html，XMl，Css，Web技术的入门总结
- HTML,CSS的命名的习惯总结.
- Java程序员从笨鸟到菜鸟之（十五）Html基础积累总结（下）
- html、css重难点总结
- Html、CSS、JS代码注释的规范总结
- 样式 css HTML 常用总结
- HTML和CSS总结（基础版）
- 网页html制作目录文件及CSS命名规范总结
- Java程序员从笨鸟到菜鸟之（十七）CSS基础积累总结（下）
- html css 小技巧小bug 总结
- 菜鸟学习笔记——jQuery中.css(),.each(),.append(),.html()方法总结
- Java程序员从笨鸟到菜鸟之（十五）Html基础积累总结（下） .
- Java程序员从笨鸟到菜鸟之（十五）Html基础积累总结（下） .
- Java程序员从笨鸟到菜鸟之（十四）Html基础积累总结（上）
- Java程序员从笨鸟到菜鸟之（十六）CSS基础积累总结（上）
- CSS和html里面的一些按钮 方法总结
- Java程序员从笨鸟到菜鸟之（十四）Html基础积累总结（上）
- Java程序员从笨鸟到菜鸟之（十六）CSS基础积累总结（上）
- Java程序员从笨鸟到菜鸟之（十七）CSS基础积累总结（下）
- HTML及CSS总结