HTML(Hyper Text Markup Language), 即超文本标记语言
超文本(文字 + 图片 + 音频 + 视频 +)
标记语言(浏览器看到什么样的标记就会做出什么样的反应)
HTML 直接用浏览器来执行
HTML 经常用于编写 web 动态页面
这里介绍一个 HTML 的网站, 这里的 HTML 还是比较全面的, 对于入门学习很不错: HTML 教程
HTML 标记语言的特点
标记 (标签或元素) 的形式
双标签
<元素名>内容</ 元素名>
如:<font > 文字</font>
单标签
<元素名 />
如:<img src=a.jpg/>
<元素名>
如:<br/>
HTML 页面的基本结构
- <html> //HTML 起始标签
- <head> // 页面头部起始标签
- <title > 网页标题</title> // 页面标题
- </head> // 页面头部结尾标签
- <body> // 页面正文起始标签
网页正文
- </body> // 页面正文结束标签
- </html>
回车键和空格键在 HTML 中显示时不起作用, 为使代码清晰, 建议不同的标记之间回车编写, 以便于代码的阅读
HTML 编辑时不是所见即所得
HTML 不区分大小写
缩进用 tab, 不要使用空格
HTML 中注释格式为
<!-- 需要注释的内容 -->
空格标签
标题标签
<hn></hn>
n 从 1 到 6, 标题从大到小, 超过 6 的按照 6 级标题显示
水平线标签, 即出现一根横划整个页面的横线
<hr/>
段落标签, 开启一个段落
<p></p>
字体标签
<font></font>
例如:<font size="7" color="#00FFFF" face="楷体">HTML</font>
- 属性 size 表示字体的大小, 有 1 至 7 逐渐递增
- 属性 color 表示颜色, 除了能使用颜色的英文表示, 通常使用 RGB 三原色表示法, 例 #FF0000
- 属性 face 表示字体
图片标签
<img />
例如:<img src="img/shitu_b01.jpg" height="1200px" width="1920px" alt="抱歉, 图片无法显示!">
- src: 指的是显示的图片的路径
- width: 指定图片的宽度, 取值可以是像素值, 也可以是占页面的百分比
- height: 指定图片的高度, 取值可以是像素值, 也可以是占页面的百分比
- alt: 当图片无法正常显示的时候给出的提示信息
表格标签
- <table>
- <tr>
- <td>
- </td>
- </tr>
- </table>
tr 标签标示行
td 标示单元格
table 属性 border 表示边框
table 属性 bordercolor 表示边框颜色, 除了能使用颜色的英文表示, 还通常使用 RGB 三原色表示法, 例 #FF0000
table 属性 width 表示表格宽度, 可以使用像素表示(px), 也可以使用百分比(~%)
table 属性 height 表示表格高度, 可以使用像素表示(px), 也可以使用百分比(~%)
table 属性 cellpadding 表示表格边与内容的距离
table 属性 cellspacing 表示表格边与边的距离, 也就是单元格之间的距离
td 属性 colspan 表示单元格跨列数目
td 属性 rowspan 表示单元格跨行数目
td 属性 align 定义内容在水平方向的排布: left center right
td 属性 valign 定义内容在竖直方向的排布: bottom middle top
form 表单
form 表单是用户可以填写信息提交服务器的控件 form 表单包含如下控件:
<input type=text/> <! 可编辑文本域 -->
<input type=password/> <! 密码框 -->
<input type=checkbox/> <! 多选框 -->
<input type=radio/> <! 单选框 -->
<input type=button/> <! 按钮 -->
<input type=file/> <! 文件浏览 -->
<textarea cols=50 rows=4> </textarea> <! 文本域 -->
<select> <option></option></select> <! 下拉控件 -->
- Example
- <!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>Insert title here</title>
- </head>
- <BODY>
- <!-- 此部分为注释, 并不会出现
- 1html 编辑时不是所见即所得;
- 2HTML 不区分大小写
- 3 段落标签 < p />开启下一段, 或者使用 < p></p>
- 4 换行标签 < br />
- 5 标题标签 H1H6 依次递减
- 6 缩进用 TAB, 不要使用空格
- 6 字体标签 <font></font>
- 属性 size 表示字体的大小, 由 1 至 7 逐渐递增,
- 属性 color 表示颜色, 除了能使用颜色的英文表示, 通常使用 RGB 三原色表示法, 例 #FF0000
- 属性 face 表示字体
- eg:<font color="red" size="5" face="楷体">HTML</font>
- 7 水平线标签 < hr/>
- -->
- <h1>HTML 语言经常用于编写 Web 静态页面</h1>
- <h2>HTML 语言经常用于编写 Web 静态页面</h2>
- <h3>HTML 语言经常用于编写 Web 静态页面</h3>
- <h4>HTML 语言经常用于编写 Web 静态页面</h4>
- <h5>HTML 语言经常用于编写 Web 静态页面</h5>
- <h6>HTML 语言经常用于编写 Web 静态页面</h6>
- <hr/>
- <font size="7" color="#00FFFF" face="楷体">HTML</font>
- <br/>
Java 程序设计教程
- <!-- 段落标签 -->
- <p>
- Textbook for Programming in Java
- </p>
- <br/>
- <!-- 表格标签 < table><tr><td></td> </tr></table>
- <tr > 标签标示行
- <td > 标签标示单元格
- table 属性 border 表示边框
- table 属性 bordercolor 表示边框颜色
- table 属性 width 表示表格宽度, 可以使用像素表示(px), 也可以使用百分比(~%)
- table 属性 height 表示表格高度, 可以使用像素表示(px), 也可以使用百分比(~%)
- table 属性 cellpadding 表示表格边与内容的距离
- table 属性 cellspacing 表示表格边与边的距离, 也就是单元格之间的距离
- td 属性 colspan 表示单元格跨列数目
- td 属性 rowspan 表示单元格跨行数目
- td 属性 align 定义内容在水平方向的排布: left center right
- td 属性 valign 定义内容在竖直方向的排布: bottom middle top
- 表示空格
- -->
- <table border="1" bordercolor="#00FFFF" cellspacing="1px" cellpadding="0px" height="250" width="100%">
- <tr>
- <td > 时间 \ 星期</td><td > 星期一</td><td > 星期二</td><td > 星期三</td><td > 星期四</td><td > 星期五</td>
- </tr>
- <tr>
- <td rowspan="2" align="center">上午</td><td > 数据结构</td><td > 编译原理</td><td>java</td><td > 数据库原理</td><td > 编译原理</td>
- </tr>
- <tr>
- <td > 休息</td><td > 休息</td><td > 操作系统</td><td > 计算方法</td><td > 休息</td>
- </tr>
- <tr>
- <td colspan="6"> </td> <!-- 空格跨 6 列 -->
- </tr>
- <tr>
- <td rowspan="2" align="center">下午</td><td > 休息</td><td > 汇编语言</td><td > 数据结构</td><td > 休息</td><td > 休息</td>
- </tr>
- <tr>
- <td > 数据库原理</td><td > 休息</td><td > 计算方法</td><td > 休息</td><td > 操作系统</td>
- </tr>
- </table>
- <br/>
- <br/>
- <!-- 表单标签
- Form 表单是用户可以填写信息提交服务器的控件 Form 表单包含如下控件:
- <input type="text"/> 可编辑文本域
- <input type="password"/> 密码框
- <input type="checkbox"/> 多选框
- <input type="radio"/> 单选框
- <input type="button"/> 按钮
- <input type="file"/> 文件浏览
- <textarea cols="50" rows="4"></textarea>
- <select> <option></option></select>
- -->
- <table border="1" bordercolor="blue" cellspacing="0px" cellpadding="0px" width="100%">
- <tr>
- <td align="right">用户名:</td>
- <td><input type="text" name="userName" /> </td>
- </tr>
- <tr>
- <td align="right">密 & nbsp; 码:</td>
- <td><input type="password" name="passwd"/> </td>
- </tr>
- <tr>
- <td align="right">专 & nbsp; 业:</td>
- <td>
- <select>
- <option>-- 请选择 --</option>
- <option > 软件工程</option>
- <option > 计算机科学与技术</option>
- <option > 通信工程</option>
- <option > 电子信息</option>
- </select>
- </td>
- </tr>
- <tr>
- <td align="right">性 & nbsp; 别:</td>
- <td><input type="radio" name="gender" />男 <input type="radio" name="gender" />女</td>
- </tr>
- <tr>
- <td align="right">兴 & nbsp; 趣</td>
- <td><input type="checkbox" name="favorate" />羽毛球 <input type="checkbox" name="favorate" />篮球 < input type="checkbox" name="favorate" />乒乓球</td>
- </tr>
- <tr>
- <td align="right">
介 & nbsp; 绍:
- </td>
- <td>
- <textarea rows="3" cols="30"></textarea>
- </td>
- </tr>
- <tr>
- <td align="center">
- <input type="submit" value="提交" />
- </td>
- <td align="center">
- <input type="reset" value="重置"/>
- </td>
- </tr>
- </table>
- <br/>
- <br/>
- <!-- 图片标签
- <img />
- src: 指的是图片显示的路径
- width: 指定图片的宽度, 取值可以是像素值, 也可以是百分比
- height: 指定图片的高度, 取值可以是像素值(px), 也可以是百分比
- alt: 当图片无法正常显示的时候给出的提示信息
- -->
- <img src="img/shitu_b01.jpg" height="1200px" width="1920px" alt="抱歉, 图片无法显示!">
- <br/>
- </BODY>
- </html>
来源: https://www.2cto.com/kf/201803/727294.html