HTML
·
HTML
HTML网页常用基础知识
网页结构
JavaSE C/S Client server 客户端--服务器
JavaWeb B/S Broswer Server 浏览器--服务器
网页的组成部分：
内容（结构）、表现、行为
HTML: Hyper Text Markup Language(超文本标记语言)
ALT+F2 选择浏览器
HTML书写规范：
<html>
表示整个 html 页面的开始
<head>
头信息
标题
</head>
<body>
body 是页面的主体内容
页面主体内容
</body>
</html>
表示整个 html 页面的结束
HTML注释 ： <!-- 这是HTML注释 -->
HTML做注释快捷键：ctrl+shift+/
ctrl+d 复制粘贴当前行
标签的格式:
<标签名>封装的数据</标签名>
标签拥有自己的属性
1、基本属性 ： bgcolor="red" 可以修改简单的样式效果 可以修改简单的样式
2、事件属性 ： οnclick="alert('你好！');" 可以直接设置事件响应后的代码
button ： 按钮
标签：单标签，双标签
1、单表签格式：<标签名/> br 换行 hr 水平线
2、双标签格式：<标签名> ....封装的数据.... </标签名>
3、属性必须有值，属性值必须加引号
HTML中常用标签介绍：
1、设置字体标签
font标签
<html> <head> <meta charset="UTF-8"> <title>1.font标签.html</title> </head> <body> <!-- 字体标签 需求 1：在网页上显示 我是字体标签 ，并修改字体为 宋体，颜色为红色。 font标签是字体标签，它可以修改文本的字体，颜色，大小（尺寸） color属性修改颜色 face属性修改字体 size属性修改文本大小 --> <font color ="red" face=" 宋体 " size="7"> 我是字体标签</font> </body> </html>
2、特殊字符
常用br标签换行
3、超链接标签
a标签
<html>
<head>
<meta charset="UTF-8">
<title>4.超链接.html</title>
</head>
<body>
<!-- a标签是超链接
href属性设置连接的地址
target属性设置哪个目标进行跳转
_self 表示当前页面（默认值）
——blank 表示打开新页面来进行跳转
-->
<a href="http://www.baidu.com">百度</a><br/>
<a href="http://www.baidu.com"target="_self">百度_self</a><br/>
<a href="http://www.baidu.com"target="_black">百度_black</a><br/>
4、显示图片标签
img 标签可以在 html 页面上显示图片
<html> <head> <meta charset="UTF-8"> <title>5.img标签.html</title> </head> <body> <!--需求 1：使用 img 标签显示一张美女的照片。并修改宽高，和边框属性 img标签是图片标签，用来显示图片 src属性可以设置图片的路径 width属性设置图片的宽度 height属性设置图片的高度 border属性设置图片边框大小 alt属性设置当路径找不到图片时，用来代替显示的文本内容 在JavaSE中路径分为相对路径和绝对路径 相对路径：从工程名开始 绝对路径：盘符:/目录/文件名 在web中路径分为相对路径和绝对路径 相对路径： . 表示当前文件所在目录 .. 表示文件所在的上一级目录 文件名 表示当前文件所在目录的文件，相当于 ./文件名 ./可以省略 绝对路径： 正确格式是：http://ip:port/工程名/资源路径 错误格式是盘符：盘符:/目录/文件名 --> <img src="../imgs/1.jpg" width="200" hight="260"border="1"alt="美女找不到"/> <img src="../imgs/2.jpg" width="200" hight="260"/> <img src="../imgs/3.jpg" width="200" hight="260"/> <img src="../imgs/4.jpg" width="200" hight="260"/> <img src="../imgs/5.jpg" width="200" hight="260"/> <img src="../imgs/6.jpg" width="200" hight="260"/> <img src="../imgs/7.jpg" width="200" hight="260"/> </body> </html>
5、表格标签
table标签
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>表格标签</title> </head> <body> <!-- 需求 1：做一个 带表头的 ，三行，三列的表格，并显示边框 需求 2：修改表格的宽度，高度，表格的对齐方式，单元格间距。 table标签是表格标签 border 设置表格标签 width 设置表格宽度 height 设置表格高度 alight 设置表格相对于页面的对齐方式 cellspacing 设置单元格间距 tr 是行标签 th 是表头标签 td 是单元格标签 alight 设置单元格文本对齐方式 b 标签是加粗标签 --> <table align="center" border="1" width="300" height="300" 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> </html>
6、跨行跨列标签
属性设置跨列：colspan 属性设置跨行： rowspan
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>7.表格的跨行跨列</title> </head> <body> <!--需求 1：新建一个五行，五列的表格， 第一行，第一列的单元格要跨两列， 第二行第一列的单元格跨两行， 第四行第四 列的单元格跨两行两列。 colspan 属性设置跨列 rowspan 属性设置跨行 --> <table width="500" height="500" cellspacing="0" border="1"> <tr> <td colspan="2">1.1</td> <td>1.3</td> <td>1.4</td> <td>1.5</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.2</td> <td>3.3</td> <td>3.4</td> <td>3.5</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> </html>
7、内嵌窗口
iframe 框架标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>8.iframe标签.html</title> </head> <body> 我是一个单独的完整页面 <!--ifarme标签可以在页面上开辟一个小区域显示一个单独的页面 ifarme和a标签组合使用的步骤； 1、在ifarme标签中使用name属性定义的一个名称 2、在a标签的target属性上设置ifarme的name属性值 --> <iframe src="3.标题标签.html" width="500" height="400" 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>
8、表单标签
8.1 表单标签
forme标签就是表单
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 属性设置每行可以显示几个字符宽度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单的显示</title> </head> <body> <!-- 需求 1:创建一个个人信息注册的表单界面。包含用户名，密码，确认密码。性别（单选），兴趣爱好（多选），国籍（下 拉列表）。隐藏域，自我评价（多行文本域）。重置，提交。 forme标签就是表单 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 align="center"> <tr> <td> 用户名称:</td> <td> <input type="text" value="默认值"/><br/> </td> </tr> <tr> <td>用户密码:</td> <td><input type="password" /><br/></td> </tr> <tr> <td> 确认密码:</td> <td><input type="password" /><br/> </td> </tr> <tr> <td>性别: </td> <td><input type="radio" name="sex" checked="checked"/>男 <input type="radio" name="sex"/>女<br/> </td> </tr> <tr> <td> 兴趣爱好:</td> <td> <input type="checkbox"/>抽烟<input type="checkbox"/>喝酒<input type="checkbox"checked="checked"/>烫头<br/></td> </tr> <tr> <td> 国籍:</td> <td> <select> <option>--请选择国籍</option> <option selected="selected">中国</option> <option>俄罗斯</option> <option>乌克兰</option> </select><br/> </td> </tr> <tr> <td> 自我评价:</td> <td> <textarea rows="10" close="20" >我才是默认值</textarea><br/></td> </tr> <tr> <td> <input type="reset"/></td> <td align="center"> <input type="submit" /></td> </tr> <tr> <!-- <td> <input type="file"/><br/></td>--> <td > <input type="hidden" name="fdejcvhsdg"/></td> </tr> </table> </form> </body> </html>
8.2 表单提交的细节
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单的显示</title> </head> <body> <!-- forme标签是表单标签 action属性设置提交的服务器地址 method属性设置提交的方式get（默认值）或post 表单提交的时候，数据没有发送给服务器的三种情况 1、表单没有name属性值 2、单选、复选（下拉列表中option的标签）都需要添加value属性，以便发送给服务器 3、表单项不在提交的form标签中 get请求的特点是： 1、浏览器地址栏中的地址是：action属性+[？+请求参数] 请求参数的格式是：name=value&name=value password=444 & sex=boy & hobby=perming 2、不安全 3、它有数据长度的限制 post请求的特点是： 1、浏览器地址中只有action属性值 2、相对于get请求要安全 3、理论上没有数据长度的限制 --> <form action="https://locallhost:8080" method="post"> <td > <input type="hidden" name="action" value="login"/></td> <h1 align="center">用户注册</h1> <table align="center"> <tr> <td> 用户名称:</td> <td> <input type="text" name="username" value="默认值"/><br/> </td> </tr> <tr> <td>用户密码:</td> <td><input type="password" name="password"/><br/></td> </tr> <!--<tr> <td> 确认密码:</td> <td><input type="password" /><br/> </td> </tr>--> <tr> <td>性别: </td> <td><input type="radio" name="sex" checked="checked" value="boy"/>男 <input type="radio" name="sex" value="girl"/>女<br/> </td> </tr> <tr> <td> 兴趣爱好:</td> <td> <input name="hobby" type="checkbox" value="Smoking"/>抽烟 <input name="hobby" type="checkbox" value="Drinking"/>喝酒 <input name="hobby" type="checkbox"checked="checked" value="perming"/>烫头 <br/> </td> </tr> <tr> <td> 国籍:</td> <td> <select name="county"> <option value="none">--请选择国籍</option> <option selected="selected" value="cn">中国</option> <option value="ru">俄罗斯</option> <option value="wkl">乌克兰</option> </select><br/> </td> </tr> <tr> <td> 自我评价:</td> <td> <textarea rows="10" close="20" >我才是默认值</textarea><br/></td> </tr> <tr> <td> <input type="reset" /></td> <td align="center"> <input type="submit" /></td> </tr> </table> </form> </body> </html>
9、其他常用标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>其他标签</title> </head> <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> </html>
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
4
0- 0
已为社区贡献1条内容
所有评论(0)