目录
1.CSS和HTML的用途
2.前端的开发流程
3.HTML的标记
4.HTML文件的书写规范
5.CSS技术
1.HTML和CSS的用途
HTML决定了页面的内容,CSS决定了页面的布局样式效果。
网页的组成部分:内容(结构)、表现(所呈现的效果)、行为。
2.前端的开发流程
1>美术实现:网页设计师根据需求设计网页。
2>前端工程师:前端工程师将设计做成静态网页。
3>Java程序员:后台工程师将静态网页修改为动态网页。
3.HTML的标记
<!DOCTYPE>标记:该标记位于文档的最前面,用于向浏览器说明当前文档使用哪种HTML标准 规范。
<html>标记:位于<!DOCTYPE>标记之后,也称为根标记,用于告知浏览器其自身是一个HTML 文档,<html>标记标志着HTML文档的开始,</html>标记标志着HTML文档的结 束,在他们之间是文档的头部和主体内容。
<head>标记:该标记用于定义HTML文档头部信息,也称为头部标记,紧跟在<html>标记之后。 <body>标记:用于定义HTML文档所要显示的内容,也称为主体标记。浏览器中显示的所有文 本、图像、音频和视频等信息都必须位于<body>标记内,<body>标记中的信息 才是最终展示给用户看的。
注意:一个HTML文档中只能含有一对<head>标记和一对<body>标记。
单标记:单标记也称为空标记,是指用一个标记符号即可完整地描述某个功能的标记。其基本语 法格式如下:<标记名 />,例如,标记<hr />就是单标记,该标记用于定义一条水平线。
双标记:双标记也成为体标记,是指由开始和结束两个标记符组成的标记。其基本与语法如下: <标记名>内容</标记名>,与开始标记相比,结束标记只是在前面加了一个关闭符"/"。
文本控制与文本样式标记
段落标记<p></p>和换行标记<br/>
<body>
<p>使用HTML制作网页时通过br标记<br />可以实现换行效果</p>
</body>
文本样式标记
使用<font>标记来控制网页中的文本样式,如字体、字号和颜色。其基本语法格式如下:
<font 属性="属性值">文本内容</font>
图像标记
要想在HTML网页中显示图像就需要使用图像标记<img />,其基本语法格式如下:
<img src="图像URL" />
表格标记
在HTML网页中创建表格的基本语法格式如下:
<table>
<tr>
<td>单元格内的文字</td>
</tr>
</table>
在的上述语法中,包含了3对HTML标记,分别为<table></table>、<tr></tr>、<td></td>,他们是创建表格的基本标记,缺一不可。<table></table>用于定义一个表格;<tr></tr>用于定义表格中的行,必须嵌套在<table></table>标记中;<td></td>用于定义表格中的单元格,也可称为表格中的列,必须嵌套在<tr></tr>中。
表单标记
表单主要由三部分构成,分别为表单控件、提示信息和表单域。
表单控件:包含了具体的表单功能项。
提示信息:一个表单中通常还需要包含一些说明性的文字,即表单控件前的文字说明,用于 提示用户进行填写和操作。
表单域:它相当于一个容器,用来容纳所有的表单控件和提示信息。
列表标记和超链接标记
无序列表
列表标记分为有序列表和无序列表,定义无序列表的基本语法如下:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
超链接标记
一个网站通常由多个页面构成,进入网站时首先看到的是其首页面,如果想从首页面跳转到 子页面,就需要在首页的相应位置添加超链接,在HTML中创建超链接只需用<a></a>标记环 绕需要被链接的对象即可。其基本语法格式如下所示:
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
<div>标记
其功能是将网页分割为独立的、不同的部分,以实现网页的规划和布局。
4.HTML文件的书写规范
<html> 表示整个html页面的开始
<head> 头信息
<title>标题</title> 标题
</head>
<body> body是页面的主体内容
页面主体内容
</body>
</html> 表示整个html页面的结束
对于HTML代码的注释:<!--这是HTML代码的注释-->
下面举一个例子:
<!DOCTYPE html><!--约束、声明-->
<html lang ="zh_CN"><!--html标签表示html标签表示html的开始 lang="zh_CN"表示中文,若改为lang="en"表示英文 html标签中一般恩威两部分,分别是head和body-->
<head><!--表示头部信息,一般包含三部分内容,title标签,CSS样式,js代码-->
<meta charset="UTF-8"><!--表示当前页面使用UTF-8字符集-->
<title>标题</title><!--表示标题-->
</head>
<body><!--body标签是整个html页面显示的主体内容-->
hello
</body>
</html>
5.CSS技术
CSS定义的规则具体如下:
选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
CSS样式的引用方式
引用CSS的方式由四种,分别是链入式、行内式(也称为内联样式)、内嵌式和导入式。
1>内嵌式
内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中,并用<style>标记定义,其基本语法格式如下:
<head>
<style type="text/css">
选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3}
</style>
</head>
2>链入式
链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过<link />标记将外部样式表文件连接到HTML文件中,其基本语法格式如下:
<head>
<link href="CSS 文件的路径" type"text/css" ref="stylesheet" />
</head>
CSS选择器和常用属性
标记选择器:标记选择器是指用HTML标记名称作为选择器,按标记名称分类,为页面中某一类标记指定统一的样式。其基本语法格式如下:
标记名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
类选择器:类选择器使用".",进行标识,后面紧跟类名,其基本语法格式如下:
.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
id选择器:id选择器使用“#”进行标识,后面紧跟id名,其基本语法格式如下:
#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
通配符选择器:通配符选择器用"*"号表示,它是所有选择器中作用范围最广的,能匹配页面中所有的元素,其基本语法格式如下:
*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
本次内容讲解了HTML和CSS的一些基本知识,希望大家学有所成。加油!