JavaWeb前端——HTML/CSS

HTML/CSS概述

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

JavaWeb前端——HTML/CSS_第1张图片

HTML

1. 不区分大小写。

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

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

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

JavaWeb前端——HTML/CSS_第2张图片

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

JavaWeb前端——HTML/CSS_第3张图片

绝对路径/相对路径:

JavaWeb前端——HTML/CSS_第4张图片

推荐使用:相对路径

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

图片:

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

JavaWeb前端——HTML/CSS_第5张图片

举例父元素:body

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

HTML正文标签

JavaWeb前端——HTML/CSS_第6张图片

JavaWeb前端——HTML/CSS_第7张图片

HTML超链接标签

JavaWeb前端——HTML/CSS_第8张图片 

HTML表格标签

JavaWeb前端——HTML/CSS_第9张图片

JavaWeb前端——HTML/CSS_第10张图片

举例: 

JavaWeb前端——HTML/CSS_第11张图片

JavaWeb前端——HTML/CSS_第12张图片

HTML表单标签

JavaWeb前端——HTML/CSS_第13张图片

 JavaWeb前端——HTML/CSS_第14张图片

JavaWeb前端——HTML/CSS_第15张图片

表单项

JavaWeb前端——HTML/CSS_第16张图片

JavaWeb前端——HTML/CSS_第17张图片 

JavaWeb前端——HTML/CSS_第18张图片 

HTML 和 XML 对比

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

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

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

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

CSS

CSS 引入方式:

JavaWeb前端——HTML/CSS_第19张图片

外联样式:

外部文件:

引入方式:

rel:relationship

herf:hypertxt reference

JavaWeb前端——HTML/CSS_第20张图片

举例演示:

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

JavaWeb前端——HTML/CSS_第21张图片

颜色表示形式:

JavaWeb前端——HTML/CSS_第22张图片

代码演示:

JavaWeb前端——HTML/CSS_第23张图片

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

盒子模型

JavaWeb前端——HTML/CSS_第24张图片

JavaWeb前端——HTML/CSS_第25张图片

盒子不包含 margin

 页面布局常借用两个标签:

标签,标签

JavaWeb前端——HTML/CSS_第26张图片

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

标签

使用

时:

1. 使用

标签将所有内容包裹起来 

2. 给该

设置id,在样式里面指定该 id 的属性

JavaWeb前端——HTML/CSS_第27张图片

 标签

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

JavaWeb前端——HTML/CSS_第28张图片

JavaWeb前端——HTML/CSS_第29张图片

CSS 选择器

JavaWeb前端——HTML/CSS_第30张图片

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

JavaWeb前端——HTML/CSS_第31张图片

JavaWeb前端——HTML/CSS_第32张图片

快捷键:

ctrl + shift + / :注释

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

ctr + alt + l:格式化

你可能感兴趣的:(前端学习,笔记)