JavaWeb
1. HTML
1.1 基本语法
注释
<!-注释--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--<h1>注释</h1>--> <!--这是注释的内容，不会被浏览器解析--> </body> </html>
标签
-
开始和结束标签<h1></h1> <u></u>
-
自闭合标签
<br/> 换行 <hr/> 水平分割线
-
标签的嵌套
<h1><u>文本</u></h1>
-
块级元素:在页面中以块的形式展现，自己独占一行，后面的内容会自动换行。<p> <hr><div>
-
行内元素:在页面中以行的形式展现，不会换行。<b> <i><<span>
div和span
-
:是一个通用的内容容器，没有特殊语义。一般用来对其它元素进行分组，用于样式化相关的需求。
-
<span>:是一个通用的行内容器，没有特殊语义。一般被用来编织元素以达到某种样式。
-
和标签核心作用是布局页面
1.2 HTML的属性
-
定义格式
-
属性名=属性值
-
-
属性的规范
-
同一个标签中属性的名称必须唯一
-
不区分大小写，建议使用小写
-
属性值可以使用单引号或双引号括起来,建议使用双引号
-
-
常用属性
-
class:定义元素的类名，用来选择和访问1特定的元素
-
id:定义元素的唯一标识，在整个文档中必须是唯一的
-
name:定义1元素的名称，一般用于表单数据提交到服务器
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="cls">第一个1div</div> <div class="cls">第二个1div</div> <div id="d1">第三个</div> <div id="d2">第四个</div> <div style="background-color:red">第五个</div> </body> </html>
1.3 特殊字符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 本网站有 最终解释权 <br> 本网站有 最终解释权 </body> </html>
1.4 注释
html的注释
vscode：CTRL+/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网页标题</title> </head> <body> <!-- 这个是网页身体/主体 --> <!-- 这是注释 --> <strong>文字要变粗</strong> </body> </html>
1.5 标签
-
标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
-
常见标签由两部分组成，我们称之为:双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
-
少数标签由一部分组成，我们称之为:单标签。自成一体，无法包裹内容。
标签关系
-
父子关系（嵌套关系）
-
兄弟关系（并列关系）
1.5.1 标题标签
-
场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题
-
代码：h系列标签
<h1> 1级标题 </h1> <h2> 2级标题 </h2>
-
vs code可以直接敲h1，不需要敲<>
1.5.2 段落标签
-
在新闻和文章的页面中，用于分段显示
-
代码:<p>我是一段文字</p>
-
特点：
-
段落之间存在间隙
-
独占一行
-
1.5.3 换行标签
-
场景:让文字强制换行显示
-
代码
-
语义:换行特点:
-
单标签
-
让文字强制换行
1.5.4 水平分割线
-
场景:分割不同主题内容的水平线
-
代码: <hr>
-
语义:主题的分割转换
-
特点: 单标签 在页面中显示一条水平线
1.5.5 文本格化标签
场景:需要让文字加粗、下划线、倾斜、删除线等效果
代码:
| 标签 | 说明 | 标签 | 说明 |
|---|---|---|---|
| b | 加粗 | strong | 加粗 |
| u | 下划线 | ins | 下划线 |
| i | 倾斜 | em | 倾斜 |
| s | 删除线 | del | 删除线 |
语义:突出重要性的强调语境（用右边单词）
1.5.6 图片标签
场景:在网页中显示图片
代码: <img src="" alt= "">
特点:
-
单标签
-
img标签需要展示对应的效果，需要借助标签的属性进行设置
-
标签名与属性之间必须以空格隔开
-
属性之间没有顺序之分
属性名: alt
属性值:替换文本
-
当图片加载失败时，才显示alt的文本
-
当图片加载成功时，不会显示alt的文本
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <b>加粗</b> <br> <strong>加粗</strong> <br> <u>下划线</u> <br> <ins>下划线</ins> <br> <i>倾斜</i> <br> <em>倾斜</em> <br> <s>删除线</s> <br> <del>删除线</del> <br> <img src="./10327v.gif" alt="替换文本" > <!-- src标签属性后面加路径 --> </body> </html>
图片标签的title属性
属性名: title
属性值:提示文本
-
当鼠标悬停时，才显示的文本
注意点: title属性不仅仅可以用于图片标签，还可以用于其他标签
<img src="./10327v.gif" alt="替换文本" title="title效果" >
width和height属性
属性名: width和height
属性值:宽度和高度（数字)
注意点:
-
如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形)
-
如果同时设置了width和height两个，若设置不当此时图片可能会变形
<!-- width和height只需要写一个，会等比例缩放 --> <img src="./10327.gif" alt="替换文本" title="title效果" width="100" height="200">
1.5.7 路径
绝对路径
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <img src="D:\pic\OIP-C.jpg" alt="显示不出"> </body> </html>
相对路径
相对路径:从当前文件开始出发找目标文件的过程（当前文件=HTML所在的文件夹）
相对路径分类:
同级目录
<img src="目标图片.gif" alt=""> <img src="./目标图片.gif" alt="">
下级目录
<img src="img/目标图片.gif" alt=""> <!-- img是指文件夹,/是指文件夹的意思 -->
上级目录
<img src="../10327.gif" alt=""> <!-- 返回上一级加一个.就欧克 -->
1.5.8 音频标签
场景:在页面中插入音频 代码:<audiosrc=" ./music.mp3"l controls></ audio>常见属性: 属性名 功能 src 音频的路径 controls 显示播放的控件 autoplay 自动播放（部分浏览器不支持) loop 循环播放 注意点
音频标签目前只支持三种格式：MP3，wav,ogg
1.5.9 视频标签
src 音频的路径 controls 显示播放的控件 autoplay 自动播放（谷歌浏览器中需配合muted实现静音播放) loop 循环播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video src="视频.mp4" controls autoplay muted></video>
<!-- <audio src="音频.mp3" controls autoplayt loop></audio> -->
</body>
</html>
视频标签目前只支持三种格式：MP4，webm,ogg
1.5.a 链接标签
场景:点击之后，从一个页面跳转到另一个页面
称呼:a标签、超链接、锚链接
代码: 超链接
特点:
-
双标签，内部可以包裹内容
-
如果需要a标签点击之后去指定页面，需要设置a标签的href属性特点:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 当开发网站初期,我们还不知道跳转地址的时候,href的值书写#(空链接)--> <a href="http://www.baidu.com">跳转到百度</a> </body> </html>
属性名: target 属性值:目标网页的打开形式 取值 效果 _self 默认值,在当前窗口中跳转（覆盖原网页) _blank 在新窗口中跳转（保留原网页)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 当开发网站初期,我们还不知道跳转地址的时候,href的值书写#(空链接)--> <a href="http://www.baidu.com" target="_blank">跳转到百度</a> </body> </html>
1.5.b 列表标签
-
场景:在网页中按照行展示关联性的内容，如:新闻列表、排行榜、账单等
-
特点:按照行的方式，整齐显示内容
-
种类:无序列表、有序列表、自定义列表
无序列表
-
场景:在网页中表示一组无顺序之分的列表，如:新闻列表。
-
标签组成:
-
标签名 说明 ul 表示无序列表的整体,用于包裹li标签 li 表示无序列表的每一项，用于包含每一行的内容 -
显示特点: 列表的每一项前默认显示圆点标识
-
注意点: ul标签中只允许包含li标签
li标签可以包含任意内容
有序列表
-
场景:在网页中表示一组有顺序之分的列表，如:排行榜。
-
标签组成:
-
标签名 说明 ol 表示有序列表的整体,用于包裹li标签 li 表示有序列表的每一项，用于包含每一行的内容 -
显示特点: 列表的每一项前默认显示序号标识
-
注意点: ol标签中只允许包含li标签
li标签可以包含任意内容
自定义列表
-
场景:在网页的底部导航中通常会使用自定义列表实现。
-
标签组成:
-
标签名 说明 dl 表示自定义列表的整体，用于包裹dt/dd标签 dt 表示自定义列表的主题 dd 表示自定义列表的针对主题的每一项内容 -
显示特点:
-
dd前会默认显示缩进效果
-
注意点: dl标签中只允许包含dt/dd标签
dt/dd标签可以包含任意内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul> 无序列表 <strong><li>水果标签</li></strong> <li>榴莲</li> <li>香蕉</li> <li>苹果</li> </ul> <ol> 有序列表 <li>第一名</li> <li>第二名</li> <li>第三名</li> </ol> <dl> <dt>帮助中心</dt> <dd>账户管理</dd> <dd>购物指南</dd> </dl> </html>
1.5.c 表格标签
-
场景:在网页中以行+列的单元格的方式整齐展示和数据，如:学生成绩表
-
基本标签:
-
标签名 说明 table 表格整体。可用于包裹多个tr tr 表格每行，可用于包惠td td 表格单元格，可用于包裹内容 -
注意点: 标签的嵌套关系: table > tr > td
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- table包含tr,tr包含td --> <table border="2" width="500" height="1l00"> <tr> <td>姓名</td> <td>成绩</td> <td>评语</td> </tr> <tr> <td>sb</td> <td>100</td> <td>sb</td> </tr> <tr> <td>傻逼</td> <td>90</td> <td>sb</td> </tr> </table> </body> </html>
表格属性
-
场景:设置表格基本展示效果
-
常见相关属性:
-
属性名 属性值 效果 border 边框宽度 width 表格宽度 height 表格高度 -
注意点:
实际开发时针对于样式效果推荐用CSS设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- table包含tr,tr包含td --> <table border="2" width="500" height="1l00"> <tr> <td>姓名</td> <td>成绩</td> <td>评语</td> </tr> <tr> <td>sb</td> <td>100</td> <td>sb</td> </tr> <tr> <td>傻逼</td> <td>90</td> <td>sb</td> </tr> </table> </body> </html>
表格标题和表头单元格标签
-
场景:在表格中表示整体大标题和一列小标题
-
其他标签:
-
标签名 名称 说明 caption 表格大标题 表示表格整体大标题，默认在表格整体顶部居中位置显示 th 表头单元格 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示
-
注意点: caption标签书写在table标签内部 th标签书写在tr标签内部(用于替换td标签)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <table border="1"> <caption><strong>学生成绩单</strong></caption> <tr> <th>姓名</th> <th>成绩</th> <th>评语</th> </tr> <tr> <td>sb</td> <td>100</td> <td>sb</td> </tr> <tr> <td>sb</td> <td>100</td> <td>sb</td> </tr> <tr> <td>sb</td> <td>100</td> <td>sb</td> </tr> </table> </body> </html>
表格的结构标签
-
场景:让表格的内容结构分组，突出表格的不同部分（头部、主体、底部)，使语义更加清晰
-
结构标签:
-
标签名 名称 thead 表格头部 tbody 表格主体 tfoot 表格底部 -
注意点
表格结构标签内部用于包裹tr标签
表格的结构标签可以省略
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <table border="1"> <caption><strong>学生成绩单</strong></caption> <thead> <tr> <th>姓名</th> <th>成绩</th> <th>评语</th> </tr> </thead> <tbody> <tr> <td>sb</td> <td>100</td> <td>sb</td> </tr> <tr> <td>sb</td> <td>100</td> <td>sb</td> </tr> <tr> <td>sb</td> <td>100</td> <td>sb</td> </tr> </tbody> <tfoot> <tr> <td>12</td> <td>13</td> <td>14</td> </tr> </tfoot> </table> </body> </html>
