公告
欢迎来到我的博客，这里记录生活与技术。
2058 字
10 分钟
HTML
HTML
什么是HTML
-
HyperText MarkUp Language：超文本标记语言
-
超文本标记语言
- 超文本
- 超出文本的功能
- 在文本功能的基础上，提供更加丰富、强大的功能
- 标记
- 语言在使用时，完全发标记的形式体现
- 超文本
html体现形式
-
html
-
htm
html的运行
-
不需要编译，它是解释型语言
-
将html文件直接交给浏览器，就可以直接运行
-
html文件结构
- 文本数据
- 标记
html结构(重点)
- 由两大部分组成
- 头
- 页面信息
- 标题
- 引入工具库
- 页面优化
- 页面信息
- 体
- 整个页面的数据
- 头
基本格式
<html> <head> <title>我的第一个页面</title> </head> <body> 页面内容 </body></html>html常用标记(重点)
字体
-
格式
- <font 属性=“值” …>
-
属性
-
color
- 字体颜色
- 数据形式
- 英文
- 十六进制
-
size
-
字体大小
-
取值范围：1-7
- 注意：如果数值大于7，按7算
-
-
示例
<html>
<head> <title>这是我的第一个页面</title></head>
<body> <font size="5" color="red">正式进入第三阶段：</font> <font color="skygreen">JavaWeb 程序开发</font></body>
</html>标题标记
格式
<h1>到<h6><h1>:最大<h6>:最小示例
<html>
<head> <title>这是我的第一个页面</title></head>
<body> <h1>这是1号标题</h1> <h2>这是2号标题</h2> <h3>这是3号标题</h3> <h4>这是4号标题</h4> <h5>这是5号标题</h5> <h6>这是6号标题</h6></body>
</html>分隔标记
-
格式
-
-
属性
- size
- color
-
示例
<html>
<head> <title>这是我的第一个页面</title></head>
<body> <hr size="1" color="red" /></body>
</html>特殊字符
< -> <> -> > -> 空格& -> &列表标签
基本列表
格式
<dl> <dt>列表名称</dt> <dd>列表数据</dd> <dd>列表数据</dd> <dd>列表数据</dd></dl>示例
<html>
<head> <title>这是我的第一个页面</title></head>
<body> <dl> <dt>图书信息</dt> <dd>Java学习笔记</dd> <dd>Java核心技术</dd> <dd>Java编程思想</dd> </dl></body>
</html>有序列表
格式
<ol type="值"> <li>列表数据1</li> <li>列表数据2</li></ol>- 属性
- 1
- A
- l
- i
- 示例
<html>
<head> <title>这是我的第一个页面</title></head>
<body> <ol type="1"> <li>Java学习笔记</li> <li>Java核心技术</li> <li>Java编程思想</li> </ol></body>
</html>无序列表
格式
<ul type="值"> <li>Java学习笔记</li> <li>Java核心技术</li> <li>Java编程思想</li></ul>- 属性
- circle：空心圆
- disc：实心圆
- square：实心方块
图像标签
-
格式
- <img 属性=“值”…/>
-
属性
- src：图像源
- width：图像宽度
- height：图像高度
- alt：未找到图像源提示文本
-
示例
<html>
<head> <title>这是我的第一个页面</title></head>
<body> <img src="" width="300" height="300" alt="图像丢失" /></body>
</html>超链接标签
-
格式
- <a 属性=“值” …></a>
-
属性
- href：超链接源
- target：链接方式
- blank：打开新页
- selt：本页打开(默认)
-
示例
<html>
<head> <title>这是我的第一个页面</title></head>
<body> <a href="www.baidu.com" target="_blank">百度</a></body>
</html>表格标签
作用：页面布局、数据显示
格式
<table 属性="值"> <caption>表格标题</caption> <tr> <td>列数据</td> <th>自动居中加粗</th> </tr></table>- 属性
- align：设置位置
- 左：left
- 中：center
- 右：right
- border：边框
- borderColor：边框颜色
- cellspacing：外边距
- cellpadding：内边距
- width：宽高
- height：高度
- rowspan：水平单元格合并
- colspan：垂直单元格合并示例
- align：设置位置
<html>
<head> <title>这是我的第一个页面</title></head>
<body> <table align="center" width="800" border="1" bordercolor="#ffb399" cellpadding="10" cellsapcing="5"> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>操作</th> </tr> <tr> <td>张三</td> <td>20</td> <td>男</td> <td><a href="">修改</a>|删除</td> </tr> <tr> <td>小红</td> <td>18</td> <td>女</td> <td><a href="">修改</a>|删除</td> </tr> <tr> <td>王五</td> <td>22</td> <td>男</td> <td><a href="">修改</a>|删除</td> </tr> <tr> <td colspan="2">水平合并单元格</td> <td rowspan="2">垂直合并单元格</td> <td><a href="">修改</a>|删除</td> </tr> </table></body>
</html>表单标签
作用：数据交互(在页面中向后端服务器提交请求)
格式
<form 属性="值"> 表单内容</form>- 属性
- action：将表单提交到哪里(服务器)
- method：提交请求方式(get/post)
示例
<html>
<head> <title>这是我的第一个页面</title></head>
<body> <form action="http://localhost:8080/login.do" method="get"> <!-- 表单内容 --> </form></body>
</html>- 表单内容：input标签
- type属性：
-
text：文本
-
password：密码
-
radio：单选框
-
checkbox：多选框
-
hidden：隐藏域
-
email：邮箱
-
number：数字
-
file：文件
-
date：日期
-
button：按钮
-
color：颜色选择器
-
data-time-local：本地时间
-
image：图片
-
month：年月
-
submit：提交
-
reset：重置
-
- id属性
- name属性
- class属性
- placeholder属性
- style属性
- value属性 示例
- type属性：
<html>
<head> <title>这是我的第一个页面</title></head>
<body> <form action="http://localhost:8080/login.do" method="get"> 帐户:<input type="text" name="userName" /><br /> 密码:<input type="password" name="userPwd" /><br /> 性别:<input type="radio" name="userSex" />男 <input type="radio" name="userSex" />女<br /> 爱好:<input type="checkbox" />抽烟<input type="checkbox" />喝酒<input type="checkbox" />烫头 邮箱:<input type="email" /><Br /> 数字:<input type="number" /><BR /> 文件:<input type="file" /><Br /> 日期:<input type="date" /><br /> 按钮:<input type="button" value="确定" /> 颜色:<input type="color" /><br /> 本地:<input type="datatime-local" /><br /> 图片:<input type="image" src="fish.jpg" width="600" height="300" /><br /> 年月:<input type="month" /><br /> <input type="submit" value="提交" /><input type="reset" value="重置" /> </form></body>
</html>选择标签
格式
<select> <option>选择项</option></select>示例
<html>
<head> <title>这是我的第一个页面</title></head>
<body> 学历:<select> <option>==请选择==</option> <option>专科</option> <option>本科</option> <option>研究生</option> </select></body>
</html>html属性标签
<s> : 删除线<u> : 下划线<i> : 斜体<p> : 段落<b> : 加粗<sup> : 上角标<sub> : 下角标<pre> : 原样输出示例
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <title>Title</title></head>
<body> <p> <s>这是第一个段落</s> </p> <p> <u>这是第二个段落</u> </p> <p> <i>这是第三个段落</i> </p> <p> <b>这是第四个段落</b> </p> <p> <b>2<sup>10</sup></b> </p> <p> <b>n<sub>log</sub></b> </p> <pre>public class Person{private String name;private Integer age;private String sex;}</pre></body>
</html>元数据标签
此标签是在头部进行使用
格式
<!DOCTYPE html><html lang="en"><head> <!-- meta元数据标签 --> <meta 属性="值"> <title>Title</title></head><body></body></html>- 属性
-
name
- 元数据的类型，而不是起名字
- 常用的类型：keywords(关键字搜索)
-
content
- 元数据类型，使用的数据
-
http-equiv
- 通过元数据类型，操作页面
-
示例
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta name="keywords" content="java程序开发,javaWeb程序设计,锅包肉"> <title>Title</title></head>
<body></body>
</html>8. 框架标签
可以使用框架标签对页面进行部局
不同的部局位置可以显示、实现不同的功能与样式
<frameset 属性="值" ...> <frame 属性="值" ...> <frameset 属性="值" ...> <frame 属性="值" ...> </frameset></frameset>- 属性
- rows：行切
- cols：列切
- name：名称
- src：资源
示例
<frameset rows="150,*"> <frame name="top" src="hello.html"> <frameset cols="200,*"> <frame name="left" src="world.html"> <frame name="right" src="right.html"> </frameset></frameset>9. 综合案例
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <title>Title</title></head>
<body> <table width="800" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" height="100" bgcolor="#f0f0f0" align="center"> <h1>前端编程培训中心</h1> <p>专注HTML/CSS/JS 零基础前端教学</p> </td> </tr> <tr> <td colspan="2" height="40" bgcolor="#2c3e50" align="center"> <a href="#" style="color: #fff;text-decoration: none;margin: 0 15px;"> 首页</a> <a href="#" style="color: #fff;text-decoration: none;margin: 0 15px;"> 谭程介绍</a> <a href="#" style="color: #fff;text-decoration: none;margin: 0 15px;"> 师资力量</a> <a href="#" style="color: #fff;text-decoration: none;margin: 0 15px;"> 学员案例</a> <a href="#" style="color: #fff;text-decoration: none;margin: 0 15px;"> 在线报名</a> </td> </tr> <tr> <td width="200" bgcolor="#ecfof1" valign="top" height="400"> <h3 align="center">栏目导航</h3> <hr /> <ul> <li><a href="#">HTML 入门课程</a></li> <li><a href="#">CSS美化样式</a></li> <li><a href="#">JavaScript交互</a></li> <li><a href="#">综合项目案例</a></li> </ul> <hr /> <h3 align="center">联系我们</h3> <p align="center">电话:123-456789</p> <p align="center">地址:黑龙江工商学院</p> </td> <td width="600" valign="top" bgcolor="#ffffff"> <h2 align="center">欢迎来到黑龙江工商学院</h2> <hr> <table width="90%" border="1" align="center" cellpadding="5" cellspacing="0"> <tr> <th>课程名称</th> <th>学习时长</th> <th>适合人群</th> </tr> <tr> <td>HTML 网页搭建</td> <td>5 天</td> <td>零基础学员</td> </tr> <tr> <td>CSS 页面美化</td> <td>7 天</td> <td>掌握HTML基础</td> </tr> <tr> <td>JS 交互开发</td> <td>10 天</td> <td>有前端基础</td> </tr> </table> <br /> <hr /> <h3 align="center">在线报名表单</h3> <form> <table width="80%" align="center" border="0"> <tr> <td width="100" align="right">姓名:</td> <td><input type="text" placeholder="请输入姓名"></td> </tr> <tr> <td align="right">手机号:</td> <td><input type="text" placeholder="请输入手机号"></td> </tr> <tr> <td align="right">意向课程:</td> <td> <select> <option>HTML 入门</option> <option>CSS 美化</option> <option>JS 开发</option> </select> </td> </tr> <tr> <td></td> <td> <input type="submit" value="提交报名" /> <input type="reset" value="重置" /> </td> </tr> </table> </form> </td> </tr> <tr> <td colspan="2" height="60" bgcolor="#2c3e50" align="center"> <p style="color: #fff;">@ 2026 前端编程培训中心 版权所有</p> </td> </tr> </table></body>
</html>Web基础
Related articles
部分信息可能已经过时
