JavaWeb前端——HTML/CSS

HTML/CSS概述

HTML:学习标签,CSS:学习样式

HTML

1. 不区分大小写。

2. 属性可以使用单引号/双引号

3. 在记事本/编辑器中编写html语言,通过浏览器解析渲染语言

4. 语法结构松散(编写时要尽量严谨)

VScode中后缀为html的文件中直接敲 ! + Enter:可自动生成html格式

绝对路径/相对路径:

推荐使用:相对路径

相对路径:. / 可以省略,. . / 不可以省略

图片:

宽度和高度:一般只设置一个,另一个等比例缩放

举例父元素:body

<span></span>标签:没有语义的标签,用于包裹行内元素​​​​​​​

HTML正文标签

HTML超链接标签

 

HTML表格标签

举例: 

HTML表单标签

 

表单项

 

 

HTML 和 XML 对比

XML:可扩展标记语言,类似HTML

XML设计宗旨:传输数据,HTML设计宗旨:显示数据

HTML 标签都是预定义好的,XML标签没有被预定义

相比于 XML,目前更加常用的是 JSON 用于传输数据

CSS

CSS 引入方式:

外联样式:

外部文件:

引入方式:

rel:relationship

herf:hypertxt reference

举例演示:

!!注意:样式间使用分号!!

颜色表示形式:

代码演示:

小 tips:使用识色器可以拿到颜色的 rgb 表示法

盒子模型

盒子不包含 margin

 页面布局常借用两个标签:<div>标签,<span>标签

<div>标签默认是父元素宽度:例如是<body>宽度,此时 <div> 标签元素会独占一行

<div>标签

使用<div>时:

1. 使用<div>标签将所有内容包裹起来 

2. 给该<div>设置id,在样式里面指定该 id 的属性

 <span>标签

行内标签,一行内可以使用多个<span>标签

CSS 选择器

 优先级:id选择器>类选择器>元素选择器

快捷键:

ctrl + shift + / :注释

alt + B:使用浏览器打开文件

ctr + alt + l:格式化