HTML+CSS

html标签

关系:包含和并列关系

类型:

1.基本结构标签

1.1 根标签<html></html>

1.2 头部标签<head></head>

1.3标题标签<title></title>

1.4主体标签<body></title>

2.文本标签

2.1语义化标题:<h1></h1>~<h6></h6>

2.2段落标签:<p></p> (换行+间距)

2.3换行标签:<br/>

2.4加粗字体:<strong></strong> <b></b>

2.5斜体标签:<em></em> <i></i>

2.6删除标签:<del></del>(中划线)

2.7下划线:<ins></ins>

3.容器标签

3.1<div></div> (可以嵌套任何内容)

3.2<span></span>(包裹少量文本,如单独给某个字加样式)

4.多媒体标签

4.1图像标签:<img />(必备属性:src路径)

4.2音频标签:<audio>(src: 音频文件路径 controls:示默认播放控件(如播放 / 暂停按钮)autoplay:页面加载后自动播放 loop:循环播放)

4.3视频标签:<video>

5.链接标签

5.1链接标签:<a> </a>

属性:href(目标地址)、target(打开方式)、title(悬浮提示)、rel(链接关系)

6.表格标签

基本语法:<table><tr><td>单元格内的文字</td>...</tr>...</table>

7.列表标签

7.1无序列表<ul></ul>

基本语法格式:<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>...</ul>

7.2有序列表:

基本语法格式:<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>...</ol>

7.3自定义列表:

基本语法格式:<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd></dl>

8.表单标签

8.1表单容器<form></form>

8.2表单控件<input></input>

8.3文本域:<textarea></textarea>

8.4选择框:<select></select>

8.5选项:<option></option>

8.6标签元素:<label>(关联<input>的id)

CSS基本语法

1.选择器

1.1语法结构

选择器{

属性1:属性值;

属性2:属性值;

.......

}

1.2类型

元素选择器:直接用标签名,作用于所以标签元素。

类选择器:以.开头,作用于所有class属性元素。

id选择器:以#开头,作用于唯一id属性匹配元素,一个页面只有一个。

2.引入css的三种方式

内联样式:直接写在html元素的style属性中。

内部样式表:写在html文件<style></style>标签内,通常放在<head>中。

外部样式表:单独创建.css文件,通过<link>标签引入。

3.字体属性

font-family:指定字体,可设多个备选字体。

font-size:控制字大小,单位有 px、em、rem 等。

font-weight:设置字粗细,值为关键字或数值。

font-style:控制字样式,有正常、斜体等。

4.文本属性

color:设置文本颜色,支持多种取值方式。

text-align:控制文本对齐方式,如左、中、右。

text-decoration:设置文本装饰,如下划线、删除线。

text-indent:指定首行缩进,常用 em 单位。

line-height:设置行高,影响文本行间距。

5.三大特性

层叠性:冲突样式按优先级和顺序叠加生效。

继承性:子元素可继承父元素部分样式。

优先级:不同选择器样式应用有先后规则。

6.盒子模型

内容区:元素内容,由 width 和 height 定义。

内边距:内容与边框间距,padding 控制。

边框:包裹内容和内边距,border 设置。

外边距:元素与外界间距,margin 控制。


HTML+CSS
http://localhost:8090//archives/html-biao-qian
作者
王雅慧
发布于
2025年09月21日
许可协议