HTML，CSS基础

目录

HTML

1.标题标签

2.列表

（1）有序列表

（2）无序列表

（3）自定义列表

3.表格

4. 超链接

5. 图片

6.表单标签

CSS

1.引入方式

2.基本选择器

---

HTML

1.标题标签

标题标签有6个，分别是<h1></h1>-<h6></h6>

<h1> 定义最大的标题，主标题一般表示最重要的内容。 <h6> 定义最小的标题。
<hr> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。

2.列表

（1）有序列表

         有序列表是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

（2）无序列表

         无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表使用 <ul> 标签，每个列表项始于 <li> 标签。

（3）自定义列表

         自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

3.表格

• 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数（table data），即数据单元格的内容。
• cellspacing属性为单元格之间的距离
• cellpadding属性为单元格文字与边框的距离
• colspan属性为横跨单元格的个数
• bgcolor属性为背景颜色

4. 超链接

使用标签 <a>来设置超文本链接。

• href 属性描述了链接的目标。“链接文本” 不必一定是文本，图片或其他 HTML 元素都可以成为链接。
• target 属性定义被链接的文档在何处显示。例如，当target=“blank”时表示重新打开另一个页面。
• href为空，默认为刷新操作，即可回到顶部。
• href="#top" 其中的#表示在当前页面寻找ID值为top的标签。

5. 图片

使用标签<img src=" " alt=" ">来定义，例如：

<img src="./img/黄鹤楼.jpg" alt="这是黄鹤楼图片" width="800"px>

其中alt属性是图片未显示时提示的文字

6.表单标签

表单使用表单标签<form> 来设置，表单是一个包含表单元素的区域。还要使用到输入标签<input>
允许用户在表单中输入内容比如：

• 文本域：多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的，文本域通过<input type="textarea"> 标签来设定。
• 密码字段：密码字段通过标签<input type="password"> 来定义
• 单选框：<input type="radio"> 标签定义了表单单选框选项
•  复选框：<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项
• 提交按钮：<input type="submit"> 定义了提交按钮.当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

CSS

1.引入方式

css引入方式主要有四种，分别是行内样式、内嵌式、外链式、导入式。
（1）行内样式

行内样式是直接把css代码放到HTML标签里面，作为style属性的属性值。

（2）内嵌式

内嵌式是在HTML中创建一个style标签，把css样式写入style标签内，style标签可以写在HTML中的任何位置，通常写在head标签内。

（3）外链式

外链式是把css样式写入.css文件内，然后通过link标签链接。

（4）导入式

导入式和和外链式差不多，都是在外部创建一个css文件，然后在style标签内通过@import url(url);导入，但是与外链式不同的是，外链式是先加载css，再显示HTML，而导入式是先显示HTML，再加载css，所以推荐使用外链式。

2.基本选择器

（1）标记选择器

    标记选择器是指用HTML标记名称作为选择器，为页面中某一类标记对应的元素指定统一的css样式。

标记名{属性1:属性组1;属性2:属性组2;属性3:属性组3;}

（2）类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名。
类名的第一个字符不能使用数字，并且严格区分大小写，一般采用小写的英文字符。

.类名{属性1:属性值1;属性2:属性值2;属性3:属性3;}

该语法中，类名即为HTML元素的class属性值，大多数HTML元素都可以class属性。

（3）ID选择器

    id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式为：

#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

     该语法中，id名即为HTML元素的id属性值。大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于HTML中某一个具体的元素。

（4）交集选择器

有2个选择器构成，其中第一个为标记选择器，第二个为类选择器或id选择器，2个选择器之间不能有空格，如：

p.a{属性1:属性值1;属性2:属性值2;属性3:属性值3;};

<p class="a"></p>

(5)并集选择器

并集选择器是各个选择器通过英文逗号连接而成的，任何形式的选择器（包括标记选择器、类选择器及id选择器等）都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

p,.a{属性：属性值}

（6）后代选择器

后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代，如：

p a{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

<p>
	<a></a>
</p>