Day1html&css

最新推荐文章于 2025-10-02 12:52:35 发布

原创最新推荐文章于 2025-10-02 12:52:35 发布 · 226 阅读

0 ·

CC 4.0 BY-SA版权

Day1

Html

1.html的简介

(1) HyperText Mark-up Language的缩写, 超文本标记型语言，网页的语言。

a) HyperText 超文本: 超出文本的范畴

b) Mark-up标记：理解为标签，html中所有的操作都是通过标签来实现的

(2) html程序遵循规范

a) html程序<html>开始，</html>结束

b) html程序包含两部分内容：head和body

i. <head>设置页面信息</head>

ii. <body>显示到页面上的内容</body>

c) html的标签有开始标签，同时也要结束标签

d) html的代码不区分大小写的

e) 有些标签没有结束标签，需要在标签内结束 <br/><hr/>

(3) html的操作思想

通过修改标签的属性值来实现标签内数据样式的变化。标签相当于一个容器，通过修改容器的属性值，实现容器内数据样式的变化。

2.字体标签

(1) 文字标签<fount>

(2) 标题标签<h1></h1>

(3) 水平线标签<hr/>

(4) 注释标签

(5) 特殊字符 (空格)

3.列表标签

(1) 普通标签

dl></dl>:定义列表的范围

<dt></dt>:定义上层内容

<dd></dd>: 定义下层内容

(2) 有序列表标签

使用 <ol></ol>: 定义有序列表的范围

ol标签上面有属性 type：排序的方式值1 a i

之后在ol标签里面：<li></li>: 封装具体的内容

(3) 无序列表标签

标签 <ul></ul>: 定义无序列表的范围

ul标签上面有属性 type：设置特殊符号值disc circle square

之后在ul标签里面： <li></li>: 封装具体的内容

4. 图形标签

(1) 标签：<img src="图片的路径名称"/>

(2) 属性： src：图片的路径名称

width：图片宽度

height：图片的高度

border：图片的边框的粗细

alt:显示在图片上面的内容

5. 超链接标签

(1) 标签：<a href="链接到的地址">显示在页面上的内容</a>

(2) 属性: href：链接到地址 (想要一个超链接没有效果，在href属性值写成#)

target：超链接的打开方式值：_self,当前页面打开； _blank,在新标签页打开

6. 表格标签

(1) 表格对数据进行格式化，使数据显示更加清晰，结构分明

标签

定义表格的范围

table标签里面表示行

<th></th>(居中和加粗)

tr标签里面表示列

属性

border：设置表格线

bordercolor：设置表格线的颜色

cellspacing: 设置单元格之间的距离

cellpadding: 设置文字和单元格之间的距离

width: 设置表格的宽度

height：设置表格的高度

align：设置对齐方式，值 left center right

align：设置某个单元格对齐方式

(2) 合并单元格

td标签上面操作

a) rowspan：跨行

b) colspan：跨列

(4) 标题标签：<caption>标题内容</caption>

(5) 如果单元格里面没有内容，使用占位符替代（使用空格 ）

7. 表单标签

(1) 把输入的数据提交到服务器上（存到服务器），这个过程称为表单

(2) 如果写表单，首先定义表单的范围<form></form>

属性:

action：提交的服务器的地址

method：表单的提交方式（有很多种，常见的有两种 get和post）

(4) 输入项：可以输入内容或者选择内容的地方

a) 输入项里面必须要有name属性

b) 在单选输入项和复选输入项以及下拉选择输入项里面都需要有属性value，设置的值

c) <input type="输入项的类型"/>

输入项的类型

普通输入项

密码输入项

单选输入项

复选输入项

文件输入项

隐藏项

普通按钮

代码

text

password

radio

checkbox

file

hidden

button

属性

必须有name属性，同时name的属性值必须要相同

默认选中，使用checked="checked"

必须有name属性，同时name的属性值必须要相同

默认选中，使用 checked="checked"

可以写value属性，设置输入项的默认值

(5) 下拉选择输入项

</select>

selected="selected"默认选中

(6) 文本域

(7) 提交按钮和其他的按钮

提交按钮： <input type="submit"/>

属性 value：设置提交按钮显示的内容

重置按钮：<input type="reset"/>

属性 value：设置重置按钮显示的内容

回到初始状态

使用图片提交：<input type="image" src="图片路径"/>

8. 其他的标签的使用

（1）pre：原样输出

p：段落标签

s：删除线

u: 下划线

b：加粗

i：斜体

（2）div : 自动换行

span：在一行进行显示

css

(1) css的简介

层叠样式表

css目的是：把网页的内容和样式进行分离，利用代码的维护。

使用css，不能单独使用，要和html结合使用

(2) css和html的结合方式

结合方式

使用html标签里面的属性 style="css的代码"

使用html的标签

使用html标签实现 link，写在head里面

使用html的style标签，在标签里面使用语句样式操作

代码

css的代码;

</style>

@import url(1.css);

</style>

实现方式

首先创建css文件，在css文件里面写css代码

在html中使用link标签引入css文件

首先创建css文件，在css文件里面写css代码

写style标签，在标签里面 @import url(css路径);

(3) css的选择器

a) css优先级: 后加载的优先级高

b) 格式规范：属性名称1:属性值1;属性名称2:属性值2;

c) 选择器：作用在哪个标签上

选择器

标签选择器

class选择器

id选择器

原理

使用标签名称作为选择器

每个html标签上面都有一个属性class，通过设置class属性的值

每个html标签都有一个属性id，通过设置id的属性值

代码

div { background-color: red;

}

.haha {

background-color:red;

}

#hehe {

background-color:green;

}

d) 选择器的优先级

style > id选择器 > class选择器 > 标签选择器

(4) css的扩展选择器

a)关联选择器

设置嵌套标签的样式

代码

divp {

background-color:red;

}

b)组合选择器

设置不同的标签具有相同的样式

代码

div,p{

background-color:green;

}

c)伪元素选择器

比如超链接为例，

状态：原始状态、鼠标放上去的状态、点击状态、点击之后的状态

:link :hover :active :visited