自学html5需要写笔记吗,html/css基础笔记（菜鸟整理）

HTML+CSS基础课程，笔记

8天前354浏览0评论

网页标签

----------------------------------------------------------------------------

段落标签：

test

引用标签： 引用文本 *###简短文本的引用，自动加上双引号*

段落引用：

引用文本

#段落文本的引用，自动缩进，自动加上双引号，外层无需添加

空标签：没有HTML内容的标签就是空标签，空标签只需要写一个开始标签

#空格

#换行。html 中是忽略回车和空格的

---

#水平横线。

代码标签：代码语言 #简短的代码

代码标签：

语言代码段

#主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符

ul-li标签：ul-li是没有前后顺序的信息列表。每项li前都自带一个圆点。

• 精彩少年
• 美丽突然出现

ol-li标签：每项ol前都自带数字

1. 精彩少年
2. 美丽突然出现

----------------------------------------------------------------------------

div标签：

排版容器

#为网页划分独立的版块

div命名：

…

----------------------------------------------------------------------------

table标签：表格。table表格在没有添加css样式之前，在浏览器中显示是没有表格线的

创建表格的四个元素：table、tbody、tr、th、td

1、

：整个表格以标记结束。

2、

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

3、

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

4、

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

5、

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

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

表格摘要：

表格标题：

标题文本 #显示位置在表格上方

----------------------------------------------------------------------------

超链接标签：

---鼠标悬浮显示文字 title="text"

链接显示的文本

---在新窗口打开超链接 target="_blank"

链接显示的文本

---发送邮件 mailto:email@aa.com? subject=邮件主题 & body=邮件内容

链接显示的文本

----------------------------------------------------------------------------

插入图片 #没有对应结尾标签

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

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

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

----------------------------------------------------------------------------

表单标签

1.

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

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

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

例：

用户名:

密码:

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

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

！！！数据传送的方式建议用post。

---------------------------------

文本密码输入框：

1、type：

当type="text"时，输入框为文本输入框;

当type="password"时, 输入框为密码输入框。

2、name：为文本框命名，以备后台程序ASP 、PHP使用。

3、value：为文本输入框设置默认值。(一般起到提示作用)

举例：

姓名：

密码：

---------------------------------

文本域：支持多行文本输入

单选框，复选框：radio/checkbox

下拉列表框，节省空间：

下拉列表框多选：

提交按钮，提交数据：

重置按钮，重置表单信息：

form表单中的label标签：

注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

男

女

输入你的邮箱地址

=========================================

CSS

=========================================

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。

CSS加在

网页头部里。

--------------------------------------------------------------------

快速修改段落部分文字的颜色。

1.

里添加 需要变色的文字

2.

里添加CSS样式span{color:red; }

--------------------------------------------------------------------

CSS代码语法

CSS注释代码：/*注释语句*/

Html注释代码：

--------------------------------------------------------------------

CSS 样式代码插入的形式：内联式、嵌入式、外部式

!!!内联式：把css代码直接写在现有的HTML标签中。

这里文字是红色。

注意要写在元素的开始标签里，并且css样式代码要写在style=""双引号中

!!!嵌入式：在

部分把css样式代码写在标签之间

!!!外部式：把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名。在

内，使用标签将css样式文件链接到HTML文件内。

注意：

1、css样式文件名称以有意义的英文字母命名，如 main.css。

2、rel="stylesheet" type="text/css" 是固定写法不可修改。

三种方法的优先级：内联式 > 嵌入式 > 外部式(-就近原则：离被设置元素越近优先级别越高)

------------------------------------------------

什么是选择器：在{}之前的部分就是“选择器”，作用对象，也就是“样式”作用于网页中的哪些元素。

选择器{

样式;

}

标签选择器：其实就是html代码中的标签。

、

、

、

类选择器： .类选器名称{css样式代码;}

类选择器在css样式编码中是最常用到的，(可以设置不同颜色)

1、英文圆点开头

2、其中类选器名称可以任意起名(但不要起中文噢)

例：胆小如鼠

ID选择器：在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：

1、为标签设置id="ID名称"，而不是class="类名称"。

2、ID选择符的前面是井号(#)号，而不是英文圆点(.)。

类和ID选择器的区别：

相同点：可以应用于任何元素

不同点：

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

胆小如鼠的小女孩，就一直没有这个勇气来回答

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

三年级