html css代码基础,HTML、CSS基础知识(示例代码)

一、标签是没有语义的，它的作用就是为了设置单独的样式用的

二、&nbsp

三、创建表格的四个元素：

table、tbody、tr、th、td

1、

：整个表格以标记结束。

2、

…：当表格内容非常多时，表格会下载一点显示一点，但如果加上标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。

3、

…：表格的一行，所以有几对tr 表格就有几行。

4、

…：表格的一个单元格，一行中包含几对...，说明一行中就有几列。

5、

…：表格的头部的一个单元格，表格表头。

6、表格中列的个数，取决于一行中数据单元格的个数。

四、超链接 href title target

标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情

五、使用标签来插入图片。

语法：

举例：

讲解：

1、src：标识图像的位置；

2、alt：指定图像的描述性文本，当图像不可见时(下载不成功时)，可看到该属性指定的文本；

3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

4、图像可以是GIF，PNG，JPEG格式的图像文件。

六、网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

语法：

讲解：

1.

：标签是成对出现的，以开始，以结束。

2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

3.method ： 数据传送的方式(get/post)。

用户名:

密码:

注意:

1、所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在

标签之间(否则用户输入的信息可提交不到服务器上哦！)。

2、method:post/get的区别这一部分内容属于后端程序员考虑的问题。感兴趣的小伙伴可以查看本小节的wiki，里面有详细介绍。

七、在CSS中也有注释语句：用/*注释语句*/来标明(Html中使用)

内联式、嵌入式、外部式

八、CSS选择器：标签选择器、类选择器(.)、ID选择器(#)、子选择器(>)、

包含选择器( )、通用选择器(*)、伪类选择符(hover)、分组选择符(,)

类选择器和ID选择器的区别：

1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的(不能使用 ID 词列表)。

包含选择器和子选择器的区别：

子选择器仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

九、CSS的继承、层叠与特殊性

CSS的某些样式是具有继承性的。

有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。

注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办？

层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

！important具有最高权值

十、CSS格式化排版

十一、CSS盒模型

在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有：

、

、

...

、

1. 、

• 、

、

、

常用的内联元素有：

、、
、、、、、、、、

常用的内联块状元素有：

、

什么是块级元素？在html中

、

、

、

、

• 和
• 就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。

  a{display:block;}

  块级元素特点：

  1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。(真霸道，一个块级元素独占一行)

  2、元素的高度、宽度、行高以及顶和底边距都可设置。

  3、元素宽度在不设置的情况下，是它本身父容器的100%(和父元素的宽度一致)，除非设定一个宽度。

  在html中，、、、 和就是典型的内联元素(行内元素)(inline)元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。

  内联元素特点：

  1、和其他元素都在一行上；

  2、元素的高度、宽度及顶部和底部边距不可设置；

  3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

  内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，、标签就是这种内联块状标签。

  inline-block 元素特点：

  1、和其他元素都在一行上；

  2、元素的高度、宽度、行高以及顶和底边距都可设置。

  块级元素的盒模型：边框、宽度和高度、填充、边界

  十二、CSS布局模型

  CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。

  层模型：绝对定位，相对定位，固定定位。