目录:
1.2017-12-24(第一天Web项目):
2.2017-12-25(第二天表格):
3.2017-12-25(第二天框架及表单):
4.2017-12-26(第三天CSS语言):
5.2017-12-28(DIV+CSS):
6.2017-12-29(JavaScript):
7.jQuery:
8.表单验证+正则表达式+BootStrap:
9.Web杂碎知识总结:
10.Web前端(对象+属性+事件)总结:
-------------------》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》2017-12-24(第一天Web项目):
1.飞秋(局域网通信软件)---需要关闭防火墙---在控制面板---系统和安全
2.DeskTopShare(屏幕共享)
3.Hbuilder(代码编辑器)
专业删除软件方法---(控制面板)中添加和删除软件(为了删除注册信息,防止卸载后可以重新安装)
买一台阿里云服务器(一个月9.9)
小项目:
全网最强翻译系统;
<!DOCUMENT HTML>
<html>
<head>
<title>网页名称</title>
<meta charset="utf-8"/>
<meta name="keywords" content="搜索关键词"/>
<meta name="description" content="超链接的描述信息"/>
</head>
<body bgcolor="背景颜色" background="背景图像路径" link="默认链接颜色" alink="正在单击时链接颜色" vlink="访问过的链接颜色" text="页面文字颜色">
<p>
<!--有序列表嵌套-->
<ol type="A/a/i/I/1" start="列表的起始点(默认为1)">
<li type="1/A/a/I/i" start="number(开始计数的数值)">项目一
<ul> <!--嵌套无序列表-->
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
</li>
<li>项目二
<ol> <!--嵌套有序列表-->
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ol>
</li>
</ol>
</p>
<p>
<!--无序列表-->
<ul type="disc(实心圆)/circle(空心圆)/square(实心方块)">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
</p>
<h1 align="right/center/left"><a href="标题的链接地址" target="目标窗口位置">标题内容1(链接文本或图像)</a></h1>
<h2 align="right/center/left"><a href="标题的链接地址" target="目标窗口位置">标题内容2(链接文本或图像)</a></h1>
<h3 align="right/center/left"><a href="标题的链接地址" target="目标窗口位置">标题内容3(链接文本或图像)</a></h3>
<h4 align="right/center/left"><a href="标题的链接地址" target="目标窗口位置">标题内容4(链接文本或图像)</a></h4>
<h5 align="right/center/left"><a href="标题的链接地址" target="目标窗口位置">标题内容5(链接文本或图像)</a></h5>
<h6 align="right/center/left"><a href="标题的链接地址" target="目标窗口位置">标题内容6(链接文本或图像)</a></h6>
<p style="width: px;margin: px auto;">
段落内容
</p>
<p align="left/right/center/justify(段落对其方式)" style="">
段落内容
<img src="top/bottom/middle/left/right(默认为bottom)" width="px/%(图像宽度)" height="px/%(图像高度)" border="px(边框)" hspace="px(图像左右侧空白)" vspace="px(图像上下侧空白)"/>
<font color="字体颜色" face="字体类型-宋体" size="(字体大小1~7默认为3,+2是3+2=5)">段落内容</font>
<b><i><big>段落内容</big></i></b><!--粗体,斜体,大号-->
<b><i><small>段落内容</small></i></b><!--粗体,斜体,小号-->
<br /><!--换行标签-->
段落内容
</p>
<hr align="center/left/right" size="px(高度)" width="px/%(宽度)" color="颜色的表示方法" noshade="noshade(不出现阴影)"></hr>
<p align="left/right/center/justify">黑天鹅出版社</p>
</body>
</html>
<!----------------------------------------------------------------
<html>标签
<head>标签
<title>标签
<base>标签
<meta>标签
第一本书:Web前段技术综合应用新建WEB项目
html:超文本标记语言
<!DOCTYPE HTML>
<html>
<!--不会被浏览器直接读取
双标签:有开始有结束
单标签:只有开始没有结束<meta /> 文字下面加横线<hr /> 换行<br />
-->
<head>
<title>html基本结构</title>
<!--设当前页面采用的字符集-->
<!--搜索引擎优化-->
<meta charset="utf-8"/><!--支持中文显示-->
<meta name="keywords" content="蓝桥"/><!--为了能够搜索到-->
<meta name="description" content="网页描述"/><!--网站描述让搜索的人看,吸引他们进网站-->
</head>
<body bgcolor="blue" background="img/郑航美景2.jpg">
<img src="img/郑航美景1.jpg"/><!--现将图片复制到本项目的文件夹下,然后把这个图片路径复制到此处-->
<br color="red" width="50%" size="10px"/><!--width浏览器窗口宽度值可以是百分比也可以是500px;size是高度-->
<a href="www.baidu.com">百度翻译</a>
</body>
</html>
<body>标签
text和bgcolor属性
background属性
link、alink和vlink属性
代表空格
size属性默认为3
颜色表示形式:
1.英文单词:red、yellow、black,紫色porple等等;
2.rgb(红,绿,蓝)不同的浏览器对rgb的值表示不同;
3.十六进制的数,例如“#FF0000”替
<p style="width:500px;margin:0px auto;">
margin:上下边距;width:左右边距
注释标签
<!--这说使用到HTML中的注释标签-->
/*这是使用到CSS中的<style>标签中的注释标签*/
特殊符号
文本控制
字体标签
<font face="" size="" color=""/>----规范文字的字体,大小和颜色
size的取值可以使绝对值也可以是相对值,其中去绝对值的范围是1~7的整数;color属性值可以用颜色名称、十六进制(例如#00FF00)或RGB值(例如rgb(0,255,0)),默认颜色为黑色。
文字格式
常用字体格式为<b></b>---粗体 <i></i>----斜体 <s></s>--<strike></strike>---删除线,建立使用<del>标签代紫色porple
文本分段
段落标签
<p align="left/right/center/justify"></p>---段落对其属性
<p style="width: px;margin: px auto"></p>
换行标签
<br>或<br/>
水平线标签
<hr>或<hr align="center/left/right" size==" px" width=" px/%" color="颜色的表示方法" nishade="noshade(s水平线不出现阴影)"/>
标题标签
<hn>标题文字</hn>--定义了6级标签,从一级到六级,每级标题的字体大小一次递减
建立列表
有序标签
<ol>
<li>项目一</li>
<li>项目二</li>
</ol>
无序标签
<ul>
<li>项目一</li>
<li>项目二</li>
</ul>
有序列表嵌套
嵌套有序列表
<ol>
<li>项目一</li>
<ol>
<li>项目1</li>
<li>项目2</li>
</ol>
<li>项目二</li>
</ol>
嵌套无序列表
<ol>
<li>项目一</li>
<ul>
<li>项目1</li>
<li>项目2</li>
</ul>
<li>项目二</li>
</ol>
插入图像
<img src="img_URL" align="top/bottom/middle/left/right" width=" px/%" height=" px/%" border=" px" hspace=" px(图像左右侧的空白)" vspace=" px(图像顶部和底部的空白)"/>---图像属性
alt属性作用:
1.图片无法显示时显示alt的值
2.搜索引擎按照alt
插入超链接
超链接标签
<a href="链接地址" target="目标窗口位置">链接文本或图像</a>
同一页面链接
<a name="书签名称">文字</a>---在需要链接的地方建立一个标签
<a href="#name">链接点</a>---定义标签后,链接到书签位置的超链接
作业--2017/12/24做一个网页:http://dasai.lanqiao.cn/pages/dasai/news_detail.html?id=149
----------------------------------------------------------------------------------------------------------->
------------》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》2017-12-25(第二天表格):
<!----------------------------------------------------------------------
表格应用及布局
创建表格
表格标签属性
<table>标签属性
<tr>标签属性
<tr align(水平对其方式)="left/right/center/justify" valign(垂直对其方式)="top/middle/bottom/baseline" bgcolor="颜色的表示方法(表格行的背景颜色)"></tr>
<td>标签属性
<td align="left/right/center/justify" valign="top/bottom/middle/baseline" bgcolor="颜色的表示方法" height="px/%(单元格高度)" width="px/%(单元格宽度)" colspan="number(单元格可横跨的列数)" rowspan="number(单元格可横跨的行数)" nowrap="nowrap(定义单元格中内容是否折行)"></td>
跨行跨列的表格
基本语法------只要对表格的一列或一行的某个元素进宽度高度设置的话,和它同一列或同一行的所有单元格跟着变化
<table align="left/right/center" border="px(边框宽度)" width="px/%(表格宽度)" bordercolor="颜色的表示方法(边框颜色)" bgcolor="颜色的表示方法(表格背景颜色)" frame="void/above/below/box/border/hsides/vsides(表格外侧边框哪部分可见)" rules="none/groups/rows/cols/all(表格内部表框哪部分可见)" background="URL(表格背景图像)" cellpadding="px/%(单元格边框与其内容的空白)" cellspacing="px/%(单元格之间空白)" summary="text(定义表格的摘要)">
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
带标题表格
<table>---表格标题标签<caption>必须紧随<table>标签之后
<caption align="right/left/top/bottom"></caption>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
带表头标题
<table>
<caption>表格标题</caption>
<tr><th></th><th></th><th></th></tr>------表格的第一行用<th></th>标签即表示为带表格标签(默认以粗体、居中的方式显示)
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
页面表格布局
----------------------------------------------------------------------->
---------------》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》2017-12-25(第二天框架及表单):
<!-----------------------------------------------------------------------------------------
框架:
框架集:是网页页面布局时框架的集合
框架:框架集的某一个区域,每个区域都可以放HTML页面
框架基本结构:
属性:rows和cols----同时只能出现一个(其中*号代表的参数为页面的总大小(宽度或高度)减去已经用数值定义的区域)
<frameset rows="100px,*"><frame />----上下分两个区;
<frameset cols="150px,*"><frame />----左右分两个区;
<frameset rows="100px,*,100px"><frame />----上下分三个区;
<frameset border="px" bordercolor="颜色表示方法">----书上没有
<frame src="" noresize="noresize(让框架集中不同区域不能通过鼠标的移动改变区域大小)">
</frame>
</frameset>
页面框架布局:
div+iframe布局;
frameset布局;
表单(重点):
表单名词记忆:单行文本框,单选按钮,下拉列表框,密码框,复选框,多行文本框,文件上传,提交按钮
<form action="(要跳转的页面)">
</from>
------------------------------------------------------------------------------------------->
这两者形式上是一样的
<input type="button">-------不会提交表单
<input type="submit">----点开按钮会自动提交表单
创建表单后需要在<table></table>外层写<from action="地址(接受表单中填写的信息)"></from>---点击后type="submit"的会跳转到改地址对应的页面下
maxlength属性:
控制文本框输入的最大长度
<textrea >内容</textarea>(加入写内容后就不能在页面下进行写操作)
属性:
readonly------不能改变信息但是点击提交之后可以提交信息
disable------文本框不能点也不能提交信息
框架集:
<frameset></frameset>不能放到<body></body>标签内
<frameset rows="20%,*">
<frame frameboder="0"/>
<frame frameboder="0"/>------设置边框宽度(为0是不显示边框)
</frameset>
------------》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》2017-12-26(第三天CSS语言):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*
p{} 标签选择器
#p1{} id选择器
.c1{} 类选择器
*/
.c1{
text-align: center;
color: red;
font-size:30px;
}
p{
color: blue;
}
#p1{
color: #DC143C;
}
/*
ID选择器>类选择器>标签选择器
*/
</style>
</head>
<body>
<p id="p1" class="c1">
使用前端技术展现WEB系统
</p>
<p id="p2" class="c1">
JAVA语言基础与面向对象编程实践
</p>
<p>
JAVA WEB技术综合应用
</p>
</body>
</html>
-------------------------------------------------------------------------------
CSS是辅助HTML的一门语言
CSS可以用来修饰标签,使其美观!!!(化妆师)
一、CSS使用<style>标签来声明样式规则:
<style css="text/css">----标签选择器
p{
text-align: ;文本对齐方式
color: ;字体颜色
font-size: ;字体大小
font-family:宋体/隶属;
1.2017-12-24(第一天Web项目):
2.2017-12-25(第二天表格):
3.2017-12-25(第二天框架及表单):
4.2017-12-26(第三天CSS语言):
5.2017-12-28(DIV+CSS):
6.2017-12-29(JavaScript):
7.jQuery:
8.表单验证+正则表达式+BootStrap:
9.Web杂碎知识总结:
10.Web前端(对象+属性+事件)总结:
-------------------》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》2017-12-24(第一天Web项目):
1.飞秋(局域网通信软件)---需要关闭防火墙---在控制面板---系统和安全
2.DeskTopShare(屏幕共享)
3.Hbuilder(代码编辑器)
专业删除软件方法---(控制面板)中添加和删除软件(为了删除注册信息,防止卸载后可以重新安装)
买一台阿里云服务器(一个月9.9)
小项目:
全网最强翻译系统;
<!DOCUMENT HTML>
<html>
<head>
<title>网页名称</title>
<meta charset="utf-8"/>
<meta name="keywords" content="搜索关键词"/>
<meta name="description" content="超链接的描述信息"/>
</head>
<body bgcolor="背景颜色" background="背景图像路径" link="默认链接颜色" alink="正在单击时链接颜色" vlink="访问过的链接颜色" text="页面文字颜色">
<p>
<!--有序列表嵌套-->
<ol type="A/a/i/I/1" start="列表的起始点(默认为1)">
<li type="1/A/a/I/i" start="number(开始计数的数值)">项目一
<ul> <!--嵌套无序列表-->
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
</li>
<li>项目二
<ol> <!--嵌套有序列表-->
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ol>
</li>
</ol>
</p>
<p>
<!--无序列表-->
<ul type="disc(实心圆)/circle(空心圆)/square(实心方块)">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
</p>
<h1 align="right/center/left"><a href="标题的链接地址" target="目标窗口位置">标题内容1(链接文本或图像)</a></h1>
<h2 align="right/center/left"><a href="标题的链接地址" target="目标窗口位置">标题内容2(链接文本或图像)</a></h1>
<h3 align="right/center/left"><a href="标题的链接地址" target="目标窗口位置">标题内容3(链接文本或图像)</a></h3>
<h4 align="right/center/left"><a href="标题的链接地址" target="目标窗口位置">标题内容4(链接文本或图像)</a></h4>
<h5 align="right/center/left"><a href="标题的链接地址" target="目标窗口位置">标题内容5(链接文本或图像)</a></h5>
<h6 align="right/center/left"><a href="标题的链接地址" target="目标窗口位置">标题内容6(链接文本或图像)</a></h6>
<p style="width: px;margin: px auto;">
段落内容
</p>
<p align="left/right/center/justify(段落对其方式)" style="">
段落内容
<img src="top/bottom/middle/left/right(默认为bottom)" width="px/%(图像宽度)" height="px/%(图像高度)" border="px(边框)" hspace="px(图像左右侧空白)" vspace="px(图像上下侧空白)"/>
<font color="字体颜色" face="字体类型-宋体" size="(字体大小1~7默认为3,+2是3+2=5)">段落内容</font>
<b><i><big>段落内容</big></i></b><!--粗体,斜体,大号-->
<b><i><small>段落内容</small></i></b><!--粗体,斜体,小号-->
<br /><!--换行标签-->
段落内容
</p>
<hr align="center/left/right" size="px(高度)" width="px/%(宽度)" color="颜色的表示方法" noshade="noshade(不出现阴影)"></hr>
<p align="left/right/center/justify">黑天鹅出版社</p>
</body>
</html>
<!----------------------------------------------------------------
<html>标签
<head>标签
<title>标签
<base>标签
<meta>标签
第一本书:Web前段技术综合应用新建WEB项目
html:超文本标记语言
<!DOCTYPE HTML>
<html>
<!--不会被浏览器直接读取
双标签:有开始有结束
单标签:只有开始没有结束<meta /> 文字下面加横线<hr /> 换行<br />
-->
<head>
<title>html基本结构</title>
<!--设当前页面采用的字符集-->
<!--搜索引擎优化-->
<meta charset="utf-8"/><!--支持中文显示-->
<meta name="keywords" content="蓝桥"/><!--为了能够搜索到-->
<meta name="description" content="网页描述"/><!--网站描述让搜索的人看,吸引他们进网站-->
</head>
<body bgcolor="blue" background="img/郑航美景2.jpg">
<img src="img/郑航美景1.jpg"/><!--现将图片复制到本项目的文件夹下,然后把这个图片路径复制到此处-->
<br color="red" width="50%" size="10px"/><!--width浏览器窗口宽度值可以是百分比也可以是500px;size是高度-->
<a href="www.baidu.com">百度翻译</a>
</body>
</html>
<body>标签
text和bgcolor属性
background属性
link、alink和vlink属性
代表空格
size属性默认为3
颜色表示形式:
1.英文单词:red、yellow、black,紫色porple等等;
2.rgb(红,绿,蓝)不同的浏览器对rgb的值表示不同;
3.十六进制的数,例如“#FF0000”替
<p style="width:500px;margin:0px auto;">
margin:上下边距;width:左右边距
注释标签
<!--这说使用到HTML中的注释标签-->
/*这是使用到CSS中的<style>标签中的注释标签*/
特殊符号
文本控制
字体标签
<font face="" size="" color=""/>----规范文字的字体,大小和颜色
size的取值可以使绝对值也可以是相对值,其中去绝对值的范围是1~7的整数;color属性值可以用颜色名称、十六进制(例如#00FF00)或RGB值(例如rgb(0,255,0)),默认颜色为黑色。
文字格式
常用字体格式为<b></b>---粗体 <i></i>----斜体 <s></s>--<strike></strike>---删除线,建立使用<del>标签代紫色porple
文本分段
段落标签
<p align="left/right/center/justify"></p>---段落对其属性
<p style="width: px;margin: px auto"></p>
换行标签
<br>或<br/>
水平线标签
<hr>或<hr align="center/left/right" size==" px" width=" px/%" color="颜色的表示方法" nishade="noshade(s水平线不出现阴影)"/>
标题标签
<hn>标题文字</hn>--定义了6级标签,从一级到六级,每级标题的字体大小一次递减
建立列表
有序标签
<ol>
<li>项目一</li>
<li>项目二</li>
</ol>
无序标签
<ul>
<li>项目一</li>
<li>项目二</li>
</ul>
有序列表嵌套
嵌套有序列表
<ol>
<li>项目一</li>
<ol>
<li>项目1</li>
<li>项目2</li>
</ol>
<li>项目二</li>
</ol>
嵌套无序列表
<ol>
<li>项目一</li>
<ul>
<li>项目1</li>
<li>项目2</li>
</ul>
<li>项目二</li>
</ol>
插入图像
<img src="img_URL" align="top/bottom/middle/left/right" width=" px/%" height=" px/%" border=" px" hspace=" px(图像左右侧的空白)" vspace=" px(图像顶部和底部的空白)"/>---图像属性
alt属性作用:
1.图片无法显示时显示alt的值
2.搜索引擎按照alt
插入超链接
超链接标签
<a href="链接地址" target="目标窗口位置">链接文本或图像</a>
同一页面链接
<a name="书签名称">文字</a>---在需要链接的地方建立一个标签
<a href="#name">链接点</a>---定义标签后,链接到书签位置的超链接
作业--2017/12/24做一个网页:http://dasai.lanqiao.cn/pages/dasai/news_detail.html?id=149
----------------------------------------------------------------------------------------------------------->
------------》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》2017-12-25(第二天表格):
<!----------------------------------------------------------------------
表格应用及布局
创建表格
表格标签属性
<table>标签属性
<tr>标签属性
<tr align(水平对其方式)="left/right/center/justify" valign(垂直对其方式)="top/middle/bottom/baseline" bgcolor="颜色的表示方法(表格行的背景颜色)"></tr>
<td>标签属性
<td align="left/right/center/justify" valign="top/bottom/middle/baseline" bgcolor="颜色的表示方法" height="px/%(单元格高度)" width="px/%(单元格宽度)" colspan="number(单元格可横跨的列数)" rowspan="number(单元格可横跨的行数)" nowrap="nowrap(定义单元格中内容是否折行)"></td>
跨行跨列的表格
基本语法------只要对表格的一列或一行的某个元素进宽度高度设置的话,和它同一列或同一行的所有单元格跟着变化
<table align="left/right/center" border="px(边框宽度)" width="px/%(表格宽度)" bordercolor="颜色的表示方法(边框颜色)" bgcolor="颜色的表示方法(表格背景颜色)" frame="void/above/below/box/border/hsides/vsides(表格外侧边框哪部分可见)" rules="none/groups/rows/cols/all(表格内部表框哪部分可见)" background="URL(表格背景图像)" cellpadding="px/%(单元格边框与其内容的空白)" cellspacing="px/%(单元格之间空白)" summary="text(定义表格的摘要)">
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
带标题表格
<table>---表格标题标签<caption>必须紧随<table>标签之后
<caption align="right/left/top/bottom"></caption>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
带表头标题
<table>
<caption>表格标题</caption>
<tr><th></th><th></th><th></th></tr>------表格的第一行用<th></th>标签即表示为带表格标签(默认以粗体、居中的方式显示)
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
页面表格布局
----------------------------------------------------------------------->
---------------》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》2017-12-25(第二天框架及表单):
<!-----------------------------------------------------------------------------------------
框架:
框架集:是网页页面布局时框架的集合
框架:框架集的某一个区域,每个区域都可以放HTML页面
框架基本结构:
属性:rows和cols----同时只能出现一个(其中*号代表的参数为页面的总大小(宽度或高度)减去已经用数值定义的区域)
<frameset rows="100px,*"><frame />----上下分两个区;
<frameset cols="150px,*"><frame />----左右分两个区;
<frameset rows="100px,*,100px"><frame />----上下分三个区;
<frameset border="px" bordercolor="颜色表示方法">----书上没有
<frame src="" noresize="noresize(让框架集中不同区域不能通过鼠标的移动改变区域大小)">
</frame>
</frameset>
页面框架布局:
div+iframe布局;
frameset布局;
表单(重点):
表单名词记忆:单行文本框,单选按钮,下拉列表框,密码框,复选框,多行文本框,文件上传,提交按钮
<form action="(要跳转的页面)">
</from>
------------------------------------------------------------------------------------------->
这两者形式上是一样的
<input type="button">-------不会提交表单
<input type="submit">----点开按钮会自动提交表单
创建表单后需要在<table></table>外层写<from action="地址(接受表单中填写的信息)"></from>---点击后type="submit"的会跳转到改地址对应的页面下
maxlength属性:
控制文本框输入的最大长度
<textrea >内容</textarea>(加入写内容后就不能在页面下进行写操作)
属性:
readonly------不能改变信息但是点击提交之后可以提交信息
disable------文本框不能点也不能提交信息
框架集:
<frameset></frameset>不能放到<body></body>标签内
<frameset rows="20%,*">
<frame frameboder="0"/>
<frame frameboder="0"/>------设置边框宽度(为0是不显示边框)
</frameset>
------------》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》2017-12-26(第三天CSS语言):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*
p{} 标签选择器
#p1{} id选择器
.c1{} 类选择器
*/
.c1{
text-align: center;
color: red;
font-size:30px;
}
p{
color: blue;
}
#p1{
color: #DC143C;
}
/*
ID选择器>类选择器>标签选择器
*/
</style>
</head>
<body>
<p id="p1" class="c1">
使用前端技术展现WEB系统
</p>
<p id="p2" class="c1">
JAVA语言基础与面向对象编程实践
</p>
<p>
JAVA WEB技术综合应用
</p>
</body>
</html>
-------------------------------------------------------------------------------
CSS是辅助HTML的一门语言
CSS可以用来修饰标签,使其美观!!!(化妆师)
一、CSS使用<style>标签来声明样式规则:
<style css="text/css">----标签选择器
p{
text-align: ;文本对齐方式
color: ;字体颜色
font-size: ;字体大小
font-family:宋体/隶属;