目录
一、HTML学习
HTML是超文本标记语言(HyperText Markup Language)的缩写。我们用 HTML 来构建 Web 页面即所谓的网页,HTML定义了网页内容的含义和结构。
1.HTML 文档结构分析
新建一个html文件(注意添加html的后缀)
如下图
HTML 使用"标记"(markup)来注明文本、图片和其他内容,以便于在浏览器中显示。一个 HTML 元素包括开始标签、结束标签、内容和元素几部分。
●开始标签(Opening tag):包含元素的名称(本例为 p),被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
●结束标签(Closing tag):与开始标签相似,只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误,这可能会产生一些奇怪的结果。
●内容(Content):元素的内容,本例中就是所输入的文本本身。
●元素(Element):开始标签、结束标签与内容相结合,便是一个完整的元素。
2.HTML 文档相关说明
注释: 在 code 软件中,输入Ctrl + /
即可快捷的进行注释
空元素:一般来说,元素都拥有开始标签,内容,结束标签。但有一些元素只有一个开始标签,通常用来在此元素所在位置插入/嵌入一些东西,如<br>, <hr>, <input>, <img>, <a>
等等。
元素的属性
元素是可以有相关属性的。属性包含元素的额外信息,这些信息不会在浏览器中显示出来。
一个属性必须包含如下内容:
一个空格,在属性和元素名称之间。(如果已经有一个或多个属性,就与前一个属性之间有一个空格。)
属性名称,后面跟着一个 = 号。
一个属性值,由一对引号 "" 引起来。
3.标题(heading)
HTML 提供了从大到小6级标题,分别是:<h1> ~ <h6>
4.超链接
可以把任何东西加上超链接
一个超链接如下:
点击"百度一下",就会跳转到百度界面
href
即为要跳转去的地址 URL(Uniform Resorce Locator)
target
属性为_blank
表示在新的页面打开超链接(默认是在当前页面打开即_self
)
超链接标签包含的内容(当前为文字"百度一下")即为显示在页面上供用户点击的
锚点
锚点,也称为书签,用于标记页面的某个元素或位置。通过锚点,我们可以轻易的在长页面内实现跳转。
先使用id
属性生成某元素的锚点,然后再使用超链接指向该锚点即可。
5.图片及文件路径 img
在页面插入一张图片如下:(绝对路径)
src
属性为要显示图片文件的位置 URL,即图片文件的路径alt
属性当获取图片出现问题时显示的文字(占位符
相对路径:
6.表格 Table
使用<table>
等标签
7.列表 List
列表分为有序列表和无序列表两种
无序列表使用<ul>
标签,默认使用实心圆点作为每项的标志,其它的标志可以是空心圆circle
,实心方块square
以及不出现标志
有序列表使用<ol>
标签,默认使用数字作为每项的标志,其它的标志可以是大写字母A
,小写字母a
,罗马字母i
等
8.区块元素和内联元素
区块元素在浏览器显示时,通常会以新行来开始(和结束)
内联元素不是以新行开始
二、CSS学习
CSS是级联样式表(Cascading Style Sheets)的缩写。HTML 用于撰写页面的内容,而 CSS 将决定这些内容该如何在屏幕上呈现。
1.CSS的简单使用
在html文件中需要导入外部的css文件,在同一目录下新建一个css文件
注:导入的css文件与新建的css的文件名字要相对应
示例如下:
html文件:
css文件:
最终效果:
以上是外部样式表的使用,此外还有内部样式表和内联样式方法使用css,但 引入外部样式表是目前使用样式的主流方式
2.CSS基本语法
CSS样式规则由两个主要的部分构成:选择器,以{}
包裹的一条或多条声明
选择器是需要改变样式的对象,每条声明由一个属性和一个值组成
id 选择器
示例如下:
注:id 选择器适用范围只有一个元素
class 选择器
示例:
class 选择器的前面有 .
元素的class值可以多个,也可以重复
3.颜色, 尺寸, 对齐
颜色
可以采用颜色名称或使用颜色RGB16进制值,来设定前景或背景的颜色
尺寸和对齐
height
和 width
设定元素内容占据的尺寸
常见的尺寸单位有:像数 px
,百分比 %
等
对于元素中的文本,我们可以简单的设置text-align
属性为left, center, right等
示例:
4.盒子模型
盒子模型指的是一个 HTML 元素可以看作一个盒子
- Content 盒子的内容,如文本、图片等
- Padding 填充,也叫内边距,即内容和边框之间的区域
- Border 边框,默认不显示
- Margin 外边距,边框以外与其它元素的区域
示例:
边框与边距:无论边框、内边距还是外边距,它们都有上下左右四个方向
5.定位
position
属性用于对元素进行定位
static
设置为静态定位position: static;
,这是元素的默认定位方式,也即你设置与否,元素都将按正常的页面布局进行。
relative
设置为相对定位position: relative;
,这将把元素相对于他的静态(正常)位置进行偏移
fixed
设置为固定定位position: fixed;
,这将使得元素固定不动(即使你上下左右拖动浏览器的滚动条)。
此时元素固定的位置仍由top, bottom, left, right
属性确定,但相对的是视口(viewport,就是浏览器的屏幕可见区域)
此时滑动页面,发现左下角不会随着页面滚动而移动
absolute
设置为绝对定位position: absolute;
,将使元素相对于其最近设置了定位属性(非static)的父元素进行偏移。
如果该元素的所有父元素都没有设置定位属性,那么就相对于<body>
这个父元素。
6.溢出、浮动
溢出
当元素内容超过其指定的区域时,可以通过溢出overflow
属性处理溢出的部分。
溢出属性有以下几个值:
- visible 默认值,溢出部分不被裁剪,在区域外面显示
- hidden 裁剪溢出部分且不可见
- scroll 裁剪溢出部分,但提供上下和左右滚动条供显示
- auto 裁剪溢出部分,视情况提供滚动条
滚动可以单独对上下或左右方向进行,示例如下:
浮动
在一个区域或容器内,可以设置float
属性让某元素水平方向上向左或右进行移动,其周围的元素也会重新排列
图片向右浮动示例如下:
7.不透明度
opacity
可以
对任何元素(不过常用于图片)设置不透明度
值在[0.0~
1.0]之间,值越低,透明度越高
示例如下:
、
8. 组合选择器
后代选择器
以空格作为分隔,如:.haha p
代表在div
元素内有.haha
这种类的所有元素
如图,引用“haha”的显示为黄色,不引用的不显示为黄色
子选择器
也称为直接后代选择器,以>
作为分隔,如:.haha > p
代表在有.haha
类的元素内的直接<p>
元素
如图所示,第三行是span元素下的p元素,但不显示为黄色
9.伪类和伪元素
伪类(pseudo-class)或伪元素(pseudo-element)用于定义元素的某种特定的状态或位置等
基本语法:
/* 选择器后使用 : 号,再跟上某个伪类/伪元素 */
selector:pseudo-class/pseudo-element {
property:value;
}
三、总结
html设计基本框架、图片、文本、表格等,css对html元素用选择器加以修饰,使用html与css相结合已经可以设计一些简单的页面;一般使用外部样式表调用css文件,但要注意的是html文件中要有调用css相对应文件名字的语句,html文件中在调用css选择器时也要有正确的调用语句。由于css的整体结构看起来很缭乱,特别是css语句有很多的时候,想修改或删除一些选择器时找起来十分麻烦,所以一般使用scss来代替css编写相关程序,再将scss转化成css格式。使用html和css编写一些简单页面不是很困难,但要设置复杂页面目前来说还很困难,还有待后续学习