目录
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的一些基本知识，希望大家学有所成。加油！
851
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
