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

- 日理万妓 2022-10-06 11:49 181阅读 0赞

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

二、&nbsp

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

table、tbody、tr、th、td

1、

：整个表格以标记结束。

2、

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

3、

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

4、

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

5、

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

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

四、超链接 href title target

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

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

语法：

![下载失败时的替换文本][Image 1]

举例：

![My Image][Image 1]

讲解：

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

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

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

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

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

语法：

讲解：

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

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。
>     
>     层模型：绝对定位，相对定位，固定定位。

[Image 1]: