HTML和CSS

来源：互联网发布：mac卸载office365 编辑：程序博客网时间：2024/06/10 07:20

HTML

HTML：超文本标记语言。Hyper Text Markup Larguage

html中都是由标签组成的。

html中的数据都会封装在标签中。因为可以通过标签中的属性值来改变对封装内数据进行操作。

确定html代码的范围：<html></html>

在该范围中可以定义两部分内容，一部分是头、一部分是体。

<html>

<head></head>封装网页中的一些属性信息，比如标题

<body></body>网页的显示数据。

</html>

标签的特点：对于数据进行封装，那么就有开始标签和结束标签，但是也有一些标签只体现单一功能，所以不需要结束标签，规范中要求标签必须要结束，所以这样的标签在内部结束。

如：<br/><hr/><img/><input/>

格式：<标签名属性名=“属性值”>数据</标签名>

<标签名属性名=“属性值” />

常见标签：

1、字体<font>：<font size=“7” color=“#ffff00”>数据</font>

关于网站的配色方案，可以去一些制作精美的网站查看代码进行收集。

特殊部分：如果要在页面上吓死一些特殊的符号，需要进行转译：

<：&lt； >：&gt； &：&amp 空格：&nbsp

标题：<h1><h2><h3><h4>......<h6>

2、列表<dl></dl>：先定义范围再进行区分

上层项目<dt>自动缩进

下层项目<dd>

项目图形标签：<ul>有序；<ol>无序；这两个标签中的列表项都有<li>标签封装

3、图片标签<img>：<img src="图片链接" alt="图片说明文字" />

4、表格标签<table>：

表格由行所组成<tr>；行由单元格说组成<td><th>

表格中默认都有一个标签<tbody>

<table> (下级都有一个tbody标签，无论有没有写)

</table>

表格最常用的标签，用于对数据进行格式化。

标题标签：<caption>

常用属性：

cellspacing：单元格间的距离

cellpadding：数据的内边距

border-color：单元格边框颜色

width：宽度

height：高度

colspan：占行中单元格数量，同行合并

rowspan：占列中单元格数量，同列合并

5、超链接<a>：

当被点击后，会启动引擎所对应的解释程序，去查找指定主机

1.先找本地主机的host文件。如果没有找到该主机的IP地址

2.去公网的DNS服务器上找对应的ip地址

当点击超链接时，就会出现邮件相关联的解释程序

另一个作用：定位标记

6、表单标签<form>：该标签是可以和服务端进行交互的

表单标签中的元素<input>：该标签中type属性值不同，对应的组件也不一样：

1.text：文本框，输入的文本可见

2.password：密码卡，输入文本不可见

3.radio：单选框，注意要被选中，必须要给单选框定义一个name属性。当有多个单选框且只能有一个被选中，那么这个单选框的name属性值必须相同。

4.checkbox：复选框，当对多个数据进行同时选中。

5.file：可以进行文件选择的组件。通常用于附件，或者文件上传

6.hidden：隐藏组件，该组件不会在页面上显示，但是其定义的name和value属性可以提交到服务端

7.button：按钮组件，自定义一个没有任何默认效果的按钮，可以通过注册事件并加入指定效果。

8.reset：重置按钮，把组件中被操作的效果还原到初始状态

9.submit：提交按钮，将组件中添加的数据提交到指定的目的

10.image：图像组件，为了避免提交按钮的难看，可以通过image的src属性俩捏一个好看的按钮图片完成提交效果。

下拉菜单标签<select>：每一个下拉菜单项都由option进行封装

文本区域<textarea>：表单组件通常都需要定义name和value属性，因为需要将数据发送到服务端，服务端只有知道了该name的值才可以对提交的数据进行分别获取。

form标签的常见属性：

action：指定数据提交的目的地；method：提交方式，常见get和post，get为默认提交方式

get和post的区别：

get会将提交的数据显示在地址栏上

post不会将数据显示在地址栏上

get提交的数据的体积收地址栏的限制。

post可以提交大体积数据。

get对于敏感信息不安全

post对于敏感信息安全

get会将提交信息封装在请求行中，也就是http消息头之前

post会将提交信息封装在数据体中，也就是http消息头之后的空行后

对于服务端而言

表单提交尽量用post，因为涉及到编码问题，Tomcat服务器默认ISO8859解码，对于post提交的中文，在服务端可以直接使用setCharcaterEncoding(”GBK“)解决问题。但是get提交的中文，在服务端只能通过ISO8859-1将数据编码一次，再通过指定的码表如GBK解码。

使用表单的组件不一定要定义form标签。只有需要将数据进行服务端的提交的时候才会用到form标签。

7、其他：

<title></title>：标题

<base />：href指定页面中所有超链接的目标结尾用"/"表示目录

快捷键标签：<label></label>，accesskey属性指定快捷键，要用Alt+指定键组合。for属性指定作用的表单元素，id值必须相同

<pre></pre>：保证数据原样显示，怎么输入，怎么显示

<p></p>：段落标签每一组p之前有空行

<i></i>斜体；<u></u>下划线； <sub></sub>下标； <sup></sup>上标；<br/>换行；<hr/>分割线；<b></b>加粗

<marquee></marquee>：移动标签，默认从右往左移动

direction属性：移动方向；behavior属性：移动样式：alternate到边后返回；slide到边后停止；scroll到边后从头开始。

————————————————————————————————————————————

CSS

CSS(Casading Style Sheets)：层叠样式表，将网页中的演示分离出来，完全有CSS来控制，增强样式的复用性以及可扩展性。

CSS代码格式：选择器{属性名：属性值；属性名：属性值；...}

CSS和html相结合的四种方式：

1、每一个标签都有一个style属性。（属性方式）如：

2、当页面有多个标签有相同样式时，可以进行复用（内嵌方式，放在<head>标签中）

3、当多个页面中的标签样式相同时，还可以将样式单独封装成一个CSS文件，通过在每个页面中定义：

@import url("CSS文件")（必须放在style首行）

CSS代码

</style>

4、通过html中的head标签中的link标签链接一个CSS文件。

技巧：方式3和4前提都需要一个CSS文件，并把其链接进来。

方式3用的是CSS代码，方式4用的是html代码。

具体：为了提高相同的样式的复用性以及可扩展性，可以将多个标签样式进行单独定义，并封装成CSS文件

如：P.CSS,DIV.CSS.....

在另一个CSS文件中使用CSS的import将多个标签样式文件导入。

然后在html页面上，使用link标签导入这个汇总的CSS文件即可

汇总CSS文件：

@import url("P.CSS");

@import url("DIV.CSS");

html文件中：<link href="汇总CSS文件" rel="stylesheet" type="text/css" />

选择器：其实就是样式要作用的标签容器。当样式分离后，html作用于用标签封装数据。然后将CSS加载到指定标签上，CSS依赖于标签。

选择器的基本分类：

1、标签选择器：其实就是html中的每一个标签名。

2、类选择器：其实就是每一个标签的class属性。用“.”的形式表示。只用来给css所使用。可定义对不同标签进行相同样式的设定。

3、ID选择器：其实就是每一个标签中的ID属性。但是要保证UD唯一性。用“#”来标识。ID不仅仅可以被CSS所使用，还可以被javascript使用。

优先级：ID选择器》类选择器》标签选择器。

扩展选择器：

1、关联选择器：其实就是对标签进行样式定义

选择器选择器...{...}

2、组合选择器：对多个选择器进行相同样式定义。将多个选择器通过逗号分隔。

选择器,选择器...{...}

3、伪元素选择器：其实就是元素的一种状态。

a:link：超链接被点击前状态

a:visited：超链接点击后状态

a:hover：悬停在超链接上状态

a:action：点击超链接时状态

a是标签；标签:状态

在定义浙西的状态时没有一个顺序 LVHA

p:first-letter

p:first-line

:focus：IE不支持，但火狐支持。

CSS滤镜其实通过一些代码完成丰富的样式。如：图片的水印效果，倒影效果，拖影效果。

当使用到CSS的更多属性时，还需要查阅CSS api

网页设计时常用div+css，div用于封装数据区域。

div：行级区域；

span：块级区域

p：行级区域。p中不能嵌套div，两个p之间有空行。