HTML和CSS
网页的组成部分
页面由三部分内容组成：内容（结构）、表现、行为
- 内容：页面中可以看到的数据，一般使用HTML技术来展示
- 表现：内容在页面上的展示形式，比如布局、颜色、大小等，一般使用CSS技术实现
- 行为：页面中的元素与输入设备交互的响应，一般使用JavaScript技术实现
HTML
1. 概述
Hyper Text Markup Language（超文本标记语言）简写：HTML
HTML通过标签来标记要显示的网页的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容
注：Java文件需要先进行编译，再由Java虚拟机运行。而HTML文件无需编译，直接由浏览器解析运行
2. 书写规范
<!DOCTYPE html> <!--表示整个html页面的开始-->
<html lang="en"> <!--头信息-->
<head>
<meta charset="UTF-8"> <!--字符集-->
<title>Title</title> <!--标题-->
</head>
<body> <!--页面的主题内容-->
</body>
</html> <!--html页面的结束-->
3. 标签介绍
-
格式
<标签名>数据</标签名>
-
标签名大小写不敏感
-
属性
- 基本属性：bgcolor="red"，可修改简单的样式效果
- 时间属性：onclick="alert('Hello!')";，可以直接设置事件响应
-
单标签和双标签
- 单标签格式：< 标签名 />
- 双标签格式：<标签名>数据</标签名>
-
语法
<!-- ①标签不能交叉嵌套 --> 正确：<div><span>早安，尚硅谷</span></div> 错误：<span><div>早安，尚硅谷</span></div> <hr /> <!-- ②标签必须正确关闭 --> <!-- i.有文本内容的标签： --> 正确：<div>早安，尚硅谷</div> 错误：<div>早安，尚硅谷 <hr /> <!-- ii.没有文本内容的标签： --> 正确：<br />1 错误：<br >2 <hr /> <!-- ③属性必须有值，属性值必须加引号 --> 正确：<font color="blue">早安，尚硅谷</font> 错误：<font color=blue>早安，尚硅谷</font> 错误：<font color>早安，尚硅谷</font> <hr /> <!-- ④注释不能嵌套 --> 正确：<!-- 注释内容 --> <br/> 错误：<!--注释内容<!--注释内容-->--> <hr />
4. 常用标签
-
font字体标签
<body> <!-- 字体标签 需求1：在网页上显示 我是字体标签 ，并修改字体为 宋体，颜色为红色。 font标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸) color属性修改颜色 face属性修改字体 size属性修改文本大小 --> <font color="red" face="宋体" size="7">我是字体标签</font> </body> -
特殊字符
<body> <!-- 特殊字符 需求1：把 <br> 换行标签 变成文本 转换成字符显示在页面上 常用的特殊字符: < ===>>>> < > ===>>>> > 空格 ===>>>> --> 我是<br>标签<br/> 一二三 四 </body> -
标题标签
<body> <!-- 标题标签 需求1：演示标题1到 标题6的 h1 - h6 都是标题标签 h1 最大 h6 最小 align 属性是对齐属性 left 左对齐(默认) center 剧中 right 右对齐 --> <h1 align="left">标题一</h1> <h2 align="right">标题二</h2> <h3 align="center">标题三</h3> <h4>标题四</h4> <h5>标题五</h5> <h6>标题六</h6> <h7>标题七</h7> </body> -
超链接（重点）
<body> <!-- 超链接 a标签是 超链接 href属性设置连接的地址 target属性设置哪个目标进行跳转 _self 表示当前页面(默认值) _blank 表示打开新页面来进行跳转 --> <a href="https://www.baidu.com/">百度</a><br> <a href="https://www.baidu.com/" target="_self">当前页面百度</a><br> <a href="https://www.baidu.com/" target="_blank">新页面百度</a> </body> -
列表标签
<body> <!--需求1：使用无序，列表方式，把东北F4，赵四，刘能，小沈阳，宋小宝，展示出来 ul 是无序列表 type属性可以修改列表项前面的符号 li 是列表项--> <ul type="none"> <li>赵四</li> <li>刘能</li> <li>小沈阳</li> <li>宋小宝</li> </ul> </body> -
img标签
<body> <!-- 需求1：使用img标签显示一张照片。并修改宽高，和边框属性 img标签是图片标签,用来显示图片 src属性可以设置图片的路径 width属性设置图片的宽度 height属性设置图片的高度 border属性设置图片边框大小 alt属性设置当指定路径找不到图片时,用来代替显示的文本内容 在JavaSE中路径也分为相对路径和绝对路径. 相对路径:从工程名开始算 绝对路径:盘符:/目录/文件名 在web中路径分为相对路径和绝对路径两种 相对路径: . 表示当前文件所在的目录 .. 表示当前文件所在的上一级目录 文件名 表示当前文件所在目录的文件,相当于 ./文件名 ./ 可以省略 绝对路径: 正确格式是: http://ip:port/工程名/资源路径 错误格式是: 盘符:/目录/文件名 --> <img src="../imgs/0.jpg" width="514" height="750" border="1" alt="找不到图片"/> </body> -
表格标签
<body> <!--需求1：做一个带表头的 ，三行，三列的表格，并显示边框 需求2：修改表格的宽度，高度，表格的对齐方式，单元格间距。 table 标签是表格标签 border 设置表格边框 width 设置表格宽度 height 设置表格高度 align 设置表格相对于页面的对齐方式 cellspacing 设置单元格间距 tr 是行标签 th 是表头标签 td 是单元格标签 align 设置单元格文本对齐方式 b 是加粗标签--> <table border="10" width="300" height="300" align="center" cellspacing="0"> <tr> <th>1.1</th> <th>1.2</th> <th>1.3</th> </tr> <tr> <td>2.1</td> <td>2.2</td> <td>2.3</td> </tr> <tr> <td>3.1</td> <td>3.2</td> <td>3.3</td> </tr> </table> </body> -
跨行跨列表格
<body> <!--需求1： 新建一个五行，五列的表格， 第一行，第一列的单元格要跨两列， 第二行第一列的单元格跨两行， 第四行第四列的单元格跨两行两列。 colspan 属性设置跨列 rowspan 属性设置跨行--> <table width="500" height="500" cellspacing="0" border="1"> <tr> <td colspan="2">1.1</td> <td>1.2</td> <td>1.3</td> <td>1.4</td> </tr> <tr> <td rowspan="2">2.1</td> <td>2.2</td> <td>2.3</td> <td>2.4</td> <td>2.5</td> </tr> <tr> <td>3.1</td> <td>3.2</td> <td>3.3</td> <td>3.4</td> </tr> <tr> <td>4.1</td> <td>4.2</td> <td>4.3</td> <td colspan="2" rowspan="2">4.4</td> </tr> <tr> <td>5.1</td> <td>5.2</td> <td>5.3</td> </tr> </table> </body> -
iframe框架标签（内嵌窗口）
<body> 我是一个单独的完整的页面<br/> <!--iframe标签可以在页面上开辟一个小区域显示一个单独的页面 iframe和a标签组合使用的步骤: 1 在iframe标签中使用name属性定义一个名称 2 在a标签的target属性上设置iframe的name的属性值--> <iframe src="5.img标签.html" width="500" height="500" name="abc"></iframe> <br/> <ul> <li><a href="0-标签语法.html" target="abc">0-标签语法.html</a></li> <li><a href="1.font标签.html" target="abc">1.font标签.html</a></li> <li><a href="2.特殊字符.html" target="abc">2.特殊字符.html</a></li> </ul> </body> -
表单标签（重点）
表单是HTML页面中，用来收集用户信息的所有元素的集合，然后将这些信息发送给服务器
<body> <!--需求1:创建一个个人信息注册的表单界面。包含用户名，密码，确认密码。性别（单选），兴趣爱好（多选），国籍（下拉列表）。 隐藏域，自我评价（多行文本域）。重置，提交。--> <!-- form标签就是表单 input type=text 是文件输入框 value设置默认显示内容 input type=password 是密码输入框 value设置默认显示内容 input type=radio 是单选框 name属性可以对其进行分组 checked="checked"表示默认选中 input type=checkbox 是复选框 checked="checked"表示默认选中 input type=reset 是重置按钮 value属性修改按钮上的文本 input type=submit 是提交按钮 value属性修改按钮上的文本 input type=button 是按钮 value属性修改按钮上的文本 input type=file 是文件上传域 input type=hidden 是隐藏域 当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器） select 标签是下拉列表框 option 标签是下拉列表框中的选项 selected="selected"设置默认选中 textarea 表示多行文本输入框 （起始标签和结束标签中的内容是默认值） rows 属性设置可以显示几行的高度 cols 属性设置每行可以显示几个字符宽度 --> <form> <h1 align="center">用户注册</h1> <!--利用table标签进行表单格式化--> <table align="center"> <tr> <td>用户名称：</td> <td><input type="text" value="默认值"/></td> </tr> <tr> <td>用户密码：</td> <td><input type="password"/></td> </tr> <tr> <td>确认密码：</td> <td><input type="password"/></td> </tr> <tr> <td>性别：</td> <td><input type="radio" name="gender" checked="checked"/>男<input type="radio" name="gender"/>女</td> </tr> <tr> <td>兴趣爱好：</td> <td><input type="checkbox"/>Java<input type="checkbox"/>JavaScript<input type="checkbox"/>C++</td> </tr> <tr> <td>国籍：</td> <td><select> <option>请选择国籍</option> <option selected="selected">中国</option> <option>美国</option> <option>日本</option> </select></td> </tr> <tr> <td>自我评价：</td> <td><textarea rows="10" cols="20">默认值</textarea></td> </tr> <tr> <td><input type="reset"/></td> <td><input type="file"/></td> <td><input type="submit"/></td> </tr> </table> <!--<input type="button" value="abc"/><br/>--> </form> </body>表单提交的细节
<body> <!-- form标签是表单标签 action属性设置提交的服务器地址 method属性设置提交的方式GET(默认值)或POST 表单提交的时候，数据没有发送给服务器的三种情况： 1、表单项没有name属性值 2、单选、复选（下拉列表中的option标签）没有添加value属性，服务器无法获取具体的值 3、表单项不在提交的form标签中 GET请求的特点是： 1、浏览器地址栏中的地址是：action属性[+?+请求参数] 请求参数的格式是：name=value&name=value 2、不安全 3、它有数据长度的限制 POST请求的特点是： 1、浏览器地址栏中只有action属性值 2、相对于GET请求要安全 3、理论上没有数据长度的限制 --> <form action="https://www.baidu.com/" method="post"> <input type="hidden" name="action" value="login"/> <h1 align="center">用户注册</h1> <table align="center"> <tr> <td>用户名称：</td> <td><input type="text" name="username" value="默认值"/></td> </tr> <tr> <td>用户密码：</td> <td><input type="password" name="password" value="123"/></td> </tr> <tr> <td>性别：</td> <td><input type="radio" name="gender" checked="checked" value="boy"/>男 <input type="radio" name="gender" value="girl"/>女</td> </tr> <tr> <td>兴趣爱好：</td> <td><input name="hobby" type="checkbox" value="Java"/>Java <input name="hobby" type="checkbox" value="JavaScript"/>JavaScript <input name="hobby" type="checkbox" value="C++"/>C++</td> </tr> <tr> <td>国籍：</td> <td><select name="country"> <option value="none">请选择国籍</option> <option selected="selected" value="CN">中国</option> <option value="US">美国</option> <option value="JP">日本</option> </select></td> </tr> <tr> <td>自我评价：</td> <td><textarea name="desc" rows="10" cols="20">默认值</textarea></td> </tr> <tr> <td><input type="reset"/></td> <td><input type="file"/></td> <td><input type="submit"/></td> </tr> </table> <!--<input type="button" value="abc"/><br/>--> </form> </body> -
其他标签
<body> <!-- 需求1：div、span、p标签的演示 div标签 默认独占一行 span标签 它的长度是封装数据的长度 p段落标签 默认会在段落的上方或下方各空出一行来（如果已有就不再空） --> <div>div标签1</div> <div>div标签2</div> <span>span标签1</span> <span>span标签2</span> <p>p标签1</p> <p>p标签2</p> </body>
CSS
1. 概述
Cascading Style Sheets（层叠样式表）简写：CSS
CSS用于控制（增强）网页样式并允许将样式信息与网页内容分离的一种标记性语言
2. 语法规则
div{ /*div：选择器*/
border: 1px solid blue; /*border：属性；1px solid blue：值*/
}
选择器：浏览器根据”选择器“决定受CSS样式影响的HTML元素（标签）
属性（property）：要改变的样式名，每个属性都有一个值；属性和值被冒号分开，由花括号包围，共同构成了一个完整的样式声明
多个声明：每个声明之间使用分号隔开
3. CSS和HTML的结合方式
-
在标签的style属性上设置”key:value;“，修改标签样式
<body> <!--需求1：分别定义两个 div、span标签，分别修改每个 div 标签的样式为：边框1个像素，实线，红色。--> <div style="border: 1px solid red">div标签1</div> <div style="border: 1px solid red">div标签2</div> <span style="border: 1px solid red">span标签1</span> <span style="border: 1px solid red">span标签2</span> </body>问题：
- 标签如果数量多，样式数量也多，整体代码量非常庞大
- 可读性差
- CSS代码没有复用性
-
在head标签中，使用style标签来定义需要的CSS样式
<head> <meta charset="UTF-8"> <title>2-CSS.html</title> <!--style标签专门用来定义css样式代码--> <style type="text/css"> /* 需求1：分别定义两个 div、span标签，分别修改每个 div 标签的样式为：边框1个像素，实线，红色。*/ div{ border: 1px solid red; } span{ border: 1px solid red; } </style> </head> <body> <div>div标签1</div> <div>div标签2</div> <span>span标签1</span> <span>span标签2</span> </body>问题：
- 只能在同一页面复用代码，不能再多个页面中复用CSS代码
- 实际项目中页面数量繁多，维护不方便
-
把CSS样式写成一个单独的css文件，再通过link标签引入复用
css文件内容
div{ border: 1px solid blue; } span{ border: 1px solid red; }html文件内容
<head> <meta charset="UTF-8"> <title>3-CSS.html</title> <!--link标签专门用来引入css样式代码--> <link rel="stylesheet" type="text/css" href="1.css"/> </head> <body> <div>div标签1</div> <div>div标签2</div> <span>span标签1</span> <span>span标签2</span> </body>
4. CSS选择器
-
标签名选择器
<head> <meta charset="UTF-8"> <title>CSS选择器</title> <style type="text/css"> div{ border: 1px solid yellow; color: blue; font-size: 30px; } span{ border: 5px dashed red; color: yellow; font-size: 20px; } </style> </head> <body> <!-- 需求1：在所有div标签上修改字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。 并且修改所有span 标签的字体颜色为黄色，字体大小20个像素。边框为5像素蓝色虚线。 --> <div>div标签1</div> <div>div标签2</div> <span>span标签1</span> <span>span标签2</span> </body> -
id选择器
<head> <meta charset="UTF-8"> <title>ID选择器</title> <style type="text/css"> #id001{ border: 1px solid yellow; color: blue; font-size: 30px; } #id002{ border: 5px dotted yellow; color: red; font-size: 20px; } </style> </head> <body> <!-- 需求1：分别定义两个 div 标签， 第一个div 标签定义 id 为 id001 ，然后根据id 属性定义css样式修改字体颜色为蓝色， 字体大小30个像素。边框为1像素黄色实线。 第二个div 标签定义 id 为 id002 ，然后根据id 属性定义css样式 修改的字体颜色为红色，字体大小20个像素。边框为5像素蓝色点线。 --> <div id="id001">div标签1</div> <div id="id002">div标签2</div> </body> -
class选择器（类选择器）
<head> <meta charset="UTF-8"> <title>class类型选择器</title> <style type="text/css"> .class01{ color: blue; font-size: 30px; border: 1px solid yellow; } .class02{ color: grey; font-size: 26px; border: 1px solid red; } </style> </head> <body> <!-- 需求1：修改 class 属性值为 class01的 span 或 div 标签，字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。 需求2：修改 class 属性值为 class02的 div 标签，字体颜色为灰色，字体大小26个像素。边框为1像素红色实线。 --> <div class="class01">div标签class01</div> <div class="class02">div标签</div> <span class="class01">span标签class01</span> <span>span标签2</span> </body> -
组合选择器
<head> <meta charset="UTF-8"> <title>class类型选择器</title> <style type="text/css"> .class01,#id01{ color: blue; font-size: 20px; border: 1px solid yellow; } </style> </head> <body> <!-- 需求1：修改 class="class01" 的div 标签 和 id="id01" 所有的span标签， 字体颜色为蓝色，字体大小20个像素。边框为1像素黄色实线。 --> <div class="class01">div标签class01</div> <br /> <span id="id01">span 标签</span> <br /> <div>div标签</div> <br /> <div>div标签id01</div> <br /> </body>
5. 常用样式
-
字体颜色
color:red;
颜色可以写颜色名，如：black，blue，green等
颜色也可以写rgb值和十六进制表示值，如：rgb(255,0,0)，#00F6DE
-
宽度
width:19px;
宽度可以写像素值：19px；也可以写百分比值：20%
-
高度
heitht:20px;
高度可以写像素值：20px；也可以写百分比值：20%
-
背景颜色
background-color:#00F6DE;
-
字体样式
color:#FF0000; 字体颜色红色
font-size:20px; 字体大小
-
边框
border:1px solid red;
-
标签居中
margin-left:auto;
margin-right:auto;
-
文本居中
text-align:center;
-
超链接去下划线
text-decoration:none;
-
表格
table{
border:1px solid black; 设置边框
border-collapse:collapse; 将边框合并
}
td,th{
border:1px solid black; 设置边框
}
-
列表去除修饰
ul{
list-style:none;
}
示例
<head>
<meta charset="UTF-8">
<title>06-css常用样式.html</title>
<style type="text/css">
div{
color: red;
border: 1px yellow solid;
width: 300px;
height: 300px;
background-color: green;
font-size: 30px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
table{
border: 1px red solid;
border-collapse: collapse;
}
td{
border: 1px red solid;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
</ul>
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
</table>
<a href="https://www.baidu.com/">百度</a>
<div>我是div标签</div>
</body>
浙公网安备 33010602011771号