javaweb -html -CSS

HTML是一种超文本标记语言

超文本:超过了文本的限制,比普通文本更强大,除了文字信息,还可以定义图片、音频、视频等内容。

标记语言:由标签"<标签名>"构成的语言。

CSS:层叠样式表,用于控制页面的样式(表现)。

常见标签

类别 标签 说明

文本处理标签
 

-

一级标题 - 六级标题(h1到h6字体逐渐变小)

换行、段落
文本加粗、倾斜、下划线、删除线(具有强调作用)
超链接(属性:href、target)
 图片 音视频标签
 
图片(路径:绝对路径、相对路径)
音频、视频
布局标签
没有语义的布局标签,配合CSS实现页面布局
表格标签
/
表格、表头、表格主体 行/单元格

表单标签
 
定义表单(属性:action、method)
表单项(文本输入框、按钮...)
表单项(下拉列表/选项)
类别 属性 说明
盒子模型 width, height 作用:控制元素尺寸、内边距、边框、外边距,从而控制页面的布局展示
高度、宽度
box-sizing 高度和宽度的计算方式;content-box, border-box
padding 内边距(上、右、下、左;上下、左右)
border 边框
margin 外边距(上、右、下、左;上下、左右)
flex弹性布局 display 作用:是一种一维的布局模型,为元素之间提供强大的空间分布和对齐能力。
flex: 使用flex布局
flex-direction 设置主轴方向(row: x轴,水平方向;column: y轴,垂直方向)
justify-content 子元素在主轴上的对齐方式

样式

若是需要更改某个标签下字体的颜色,有三种样式

1、内部样式

在style标签里直接定义需要标签字体的颜色(如以下代码style标签定义span标签内的字体颜色)

2、行内样式

在定义标签时直接在标签后跟需要的颜色(如以下代码2024年05月15日 20:07

3、外部样式

通过调用外部css文件中的代码为某个标签定义颜色(如

下面为css文件中的内容

javaweb -html -CSS_第1张图片

以下均为没有内容的示例,可以自己往title等标签内加入内容测试。




  
  
  
  
  
  
  


  
  

央视网 2024年05月15日 20:07

选择器

以上的设置样式的方法有缺陷,方式一、三会直接将所有span标签的字体都设为灰色,方式二书写步骤繁琐,但选择器可以解决这个问题。

选择器有元素选择器,类选择器与id选择器,其中元素选择器就是上文介绍的方法

类选择器

语法:在style标签内   .类名{这个类需要的修改},使用时在标签后声明是哪个类就行(如 2024年05月15日 20:07

id选择器

语法:在style标签内 #id名{此id需要的修改}   ,使用时标签内声明是哪个id即可(如 2024年05月15日 20:07

优先级顺序如下(从高到低):

  1. ID 选择器(#id:优先级最高。

  2. 类选择器(.class)、属性选择器(如 [type="text"])、伪类选择器(如 :hover:优先级次之。

  3. 元素选择器(divspan 等):优先级最低。




  
  
    

  
  
  
  
  


  
  
  

2024年05月15日 20:07



 

你可能感兴趣的:(html,前端,javascript)