HTML-CSS

初识web前端

Web标准也称为网页标准,由一系列的标准组成,大部分由W3C( World Wide Web Consortium,万维网联盟)负责制定。

三个组成部分: HTML:负责网页的结构(页面元素和内容)。 CSS:负责网页的表现(页面元素的外观、位置等页面样式,如:颜色、大小等)。 JavaScript:负责网页的行为(交互效果)。

什么是HTML、CSS?

HTML(HyperText Markup Language):超文本标记语言。

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

标记语言:由标签构成的语言 HTML标签都是预定义好的。例如:使用<a>展示超链接,使用<img>展示图片,<video>展示视频。

HTML代码直接在浏览器中运行,HTML标签由浏览器解析。

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

一、HTML快速入门

1.HTML结构标签

<html>     

        <head>               

                <title>标题</title>     

        </head>     

        <body>         

        </body>

</html>

2.特点

HTML标签不区分大小写

HTML标签属性值单双引号都可以

HTML语法松散

二、VS Code开发工具介绍

Visual Studio Code(简称 VS Code )是 Microsoft 于2015年4月发布的一款代码编辑器。

VS Code 对前端代码有非常强大的支持,同时也其他编程语言(例如:C++、Java、Python、PHP、Go等)。

VS Code 提供了非常强大的插件库,大大提高了开发效率。

官网: https://code.visualstudio.com

注意事项:作为一名软件开发工程师,建议以后安装所有与开发相关的软件,尽量安装在一个没有中文,不带空格的目录下。

三、基础标签 & 样式

1.标题标签

标签:<h1>…</h1>(h1 → h6 重要程度依次降低)

注意:HTML标签都是预定义好的,不能自己随意定义。

2.水平线标签

<hr>

3.图片标签

<img src="…" width="…" height="…">

绝对路径:绝对磁盘路径(D:/xxxx)、绝对网络路径(https://xxxx)

相对路径:从当前文件开始查找。 (./ : 当前目录, ../ : 上级目录)

4.<div>标签

一行只显示一个(独占一行)

宽度默认是父元素的宽度,高度默认由内容撑开

可以设置宽高(width、height)

5.<span>标签

<span> 是一个在开发网页时大量会用到的没有语义的布局标签

特点:一行可以显示多个(组合行内元素),宽度和高度默认由内容撑开

6.超链接标签

标签:<a>

属性:     

href:指定资源访问的url     

target:指定在何处打开资源链接         

_self:默认值,在当前页面打开         

_blank:在空白页面打开

7.音频、视频标签

<audio>  <video>

8.换行、段落标签

换行:<br> ; 段落:<p>

9.文本加粗标签

<b> <strong>

注意:在HTML中无论输入多少个空格,只会显示一个。 可以使用空格占位符:&nbsp;

1.CSS引入方式

行内样式:<h1 style="...">

内嵌样式:<style> … </style>

外联样式:xxx.css     <link href="...">

2.颜色表示

关键字: red、green . . .

rgb表示法:rgb(255,0,0)、rgb(134,100,89)

十六进制: #ff0000、#cccccc、#ccc

3.颜色属性

color: 设置文本内容的颜色

4.CSS选择器

元素选择器:标签名 { … }

id选择器:#id属性值 { … }

类选择器:.class属性值 { … }

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

5.CSS属性

color:设置文本的颜色

font-size:字体大小 (注意:记得加px)

text-decoration:规定添加到文本的修饰,none表示定义标准的文本。 

6.CSS样式

line-height:设置行高

text-indent:定义第一个行内容的缩进

text-align:规定元素中的文本的水平对齐方式

1.CSS盒子模型

盒子:页面中所有的元素(标签),都可以看做是一个 盒子,由盒子将页面中的元素包含在一个矩形区域内,通过盒子的视角更方便的进行页面布局

盒子模型组成:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)

width:设置宽度

height:设置高度

border:设置边框的属性,如:1px solid #000;

padding:内边距

margin:外边距

注意:如果只需要设置某一个方位的边框、内边距、外边距,可以在属性名后加上 –位置,如:padding-top、padding-left、padding-right …

四、表格、表单标签

1.表格标签

2.表单标签

标签:<form>

表单项:不同类型的 input 元素、下拉列表、文本域等。  

<input>:定义表单项,通过type属性控制输入形式  

<select>:定义下拉列表  

<textarea>:定义文本域

属性:  

action:规定当提交表单时向何处发送表单数据,URL  

method:规定用于发送表单数据的方式。GET、POST