初入HTML
来源：互联网 发布：安卓网络管理软件 编辑：程序博客网 时间：2024/05/16 19:37
一.html的简介
什么是html？
- HyperText MarkUp Language：超文本标记语言,网页语言
- 超文本:超出文本的范畴
- 标记：html所有的操作都是通过标记实现的,标记就是标签,<标签名称>
第一个html程序
- 创建java文件.java
- 先编译,然后再运行(jvm)
- html后缀.html
- 直接通过浏览器就可以运行
- 代码
<html><head> <meta charset="utf-8">//编码改成utf-8 防止乱码 <title>第一个html程序</title>//标题</head><body> 这是我的<font size="5" color="red">第一个html程序!</font></body></html>代码效果如下：
html的规范(遵循)
1.一个html文件开始标签和结束的标签
<html> </html>2.html包含两部分内容
(1)<head> 设置相关信息 </head>(2)<body> 显示在页面上的内容都写在body里面 </body>3.html的标签有开始标签,也要有结束标签
<head></head>4.html的代码不区分大小写的
5.有些标签,没有结束标签 在标签内结束
比如 换行 <br/> 一条水平线 <hr/>html的操作思想(理解)
网页中有很多数据,不同的数据可能需要不同的显示效果,这个时候需要使用标签把要操作的数据包起来(封装起来),通过修改标签的属性值实现标签内数据样式的变化。一个标签相当于一个容器,想要修改容器内数据的样式,只需要改变容器的属性值,就可以实现容器内数据样式的变化。
以下我就来介绍下html常用的标签
二.文字标签和注释标签
1.文字标签:修改文字的样式
<font></font>属性:
- size:文字的大小 取值范围 1-7,超出了7,默认还是7
- color:文字颜色
两种表示方式
英文单词: red green blue black white yellow gray……
使用十六进制数表示 #ffffff: RGB
当然还可以通过工具实现不同的颜色 #66cc66
代码
<html><head> <meta charset="utf-8"> <title>文字标签</title></head><body> <font size="5" color="blue">我是神!</font> //5号字体 蓝色</body></html>
<font size="5" color="#66cc66">我是神!</font>//换成16进制 效果如下
2.注释标签
java注释几种?三种
html的注释 :
<!-- html的注释 -->三.标题标签,水平线标签和特殊字符
1.标题标签
<h1></h1> <h2></h2>..........<h6></h6>从h1到h6 大小是依次变小,同时会自动换行
<html><head> <meta charset="utf-8"> <title>文字标签</title></head><body> <h1>地球</h1> <h2>中国</h2> <h3>四川</h3> <h4>都江堰</h4> <h5>青城山</h5> <h6>成都东软</h6></body></html>
2.水平线标签
<hr> 属性:
- size:水平线的粗细 取值范围 1-7
- color:颜色
代码：
<hr size="5" color="red"/>
3.特殊字符
想要在页面上显示这样的内容 <html>:是网页上的开始!需要对特殊字符进行转义 * < < * > > * 空格 * & &四.列表标签
- 比如现在显示这样的效果
此时我们想呈现这种效果 就需要列表标签
<dl> </dl>:表示列表的范围在dl里面 <dt></dt>:上层内容在dl里面 <dd></dd>:下层内容- 代码
<html><head> <meta charset="utf-8"> <title>文字标签</title></head><body> <dl> <dt>成都皇家东软高中</dt> <dd>计科系</dd> <dd>信管系</dd> <dd>外语系</dd> </dl></body></html>效果如下：
想要在页面上显示这样的效果
<ol></ol>:有序列表的范围属性 type:设置排序方式 1(默认是) a i 在ol标签里面<li>具体内容</li>- 代码
<ol> <li>计科系</li> <li>信管系</li> <li>外语系</li></ol>
- 代码
<html><head> <meta charset="utf-8"> <title>文字标签</title></head><body> <ol type="i"> <li>计科系</li> <li>信管系</li> <li>外语系</li> </ol></body></html>
- 想要在页面上显示这样的效果
特殊符号(方框) 计科系
特殊符号(方框) 信管系
<ul></ul>:表示无序列表的范围属性:type:空心圆circle，实心圆disc，实心方块square，默认disc在ul里面 <li></li>- 代码
<html><head> <meta charset="utf-8"> <title>文字标签</title></head><body> <ul type="disc"> <li>计科系</li> <li>信管系</li> <li>外语系</li> </ul></body></html>- 效果如下
五.图像标签
<img src="图片的路径"/> - src:图片的路径 -width:图片的宽度 -heigth:图片的高度 -ait: 图片上显示的文字 把鼠标移动到图片上,停留片刻显示内容 ** 有些浏览器下不显示(没有效果)六.路径的介绍
1.绝对路径
- C:\Users\asua\Desktop\0413\day\code\a.jpg
- http://www.baidu.com/b.jpg
2.相对路径
- 一个文件相对于另外一个文件的位置
- html文件和图片在一个路径下,可直接写文件名称
<img src="b1.jpg" alt="这是一个美女"/>在html文件中, 使用img文件夹下面的a1.jpg
在html中使用图片 4.html和img在一个路径下img/a1.jpg
图片在html文件的上层目录
html文件所在的目录和图片是一个目录
图片和html文件是什么关系?
图片在html的所在目录的上层目录 code
怎么表示上层路径 ../
../:code
../a2.jpg- 想要表示上层的上层
../../ 七.超链接标签
1.链接资源
- 代码
<a href="链接到资源的路径">显示在页面上的内容</a>使用方法
- href:链接的资源的地址
- target:设置打开的方式,默认是在当前页打开
- _blank:在一个新窗口打开
- _self:在当前页打开 默认
当超链接不需要到任何的地址 在href里面加#
<a href="#">这是第二个超链接</a>2.定位资源
- 如何想要定位资源:定义一个位置
- 代码
<a name="top">顶部</a>- 回到这个位置
<a href="#top">回到顶部</a>点击网页上面的回到顶部 就能够回到网页的顶部了
- 引入一个标签 pre:原样输出
八.表格标签
可以对数据进行格式化,使数据显示更加清晰
<table></table>:表示表格的范围 - border:表格线 - bordercolor:表格线的颜色 - cellspacing:单元格直接的距离 - width:表格的宽度 - height:表格的高度 - 在table里面 <tr></tr> - 设置对齐方式 align:left center right *** 在tr里面 <td></td> - 设置显示方式 align:left center right *** 使用th也可以表示单元格 - 表示可以实现居中和加粗- 代码
<html><head> <meta charset="utf-8"> <title>表格标签</title></head><body> <table> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr> <tr> <td>007</td> <td>男</td> <td>18</td> </tr> <tr> <td>006</td> <td>男</td> <td>19</td> </tr> <tr> <td>005</td> <td>女</td> <td>20</td> </tr> </table></body></html>因为并没有显示表格线 所有效果如下图：
<html><head> <meta charset="utf-8"> <title>表格标签</title></head><body> <table border="1">//加上表格线 <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr> <tr> <td>007</td> <td>男</td> <td>18</td> </tr> <tr> <td>006</td> <td>男</td> <td>19</td> </tr> <tr> <td>005</td> <td>女</td> <td>20</td> </tr> </table></body></html>加上表格线后效果又如下： 
换下表格线的颜色吧！
<html><head> <meta charset="utf-8"> <title>表格标签</title></head><body> <table border="1" bordercolor="red"> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr> <tr> <td>007</td> <td>男</td> <td>18</td> </tr> <tr> <td>006</td> <td>男</td> <td>19</td> </tr> <tr> <td>005</td> <td>女</td> <td>20</td> </tr> </table></body></html>
这里单元格与单元格之间还存在着距离 这时我们为了让单元格与单元格之间不存在距离 所有我们也要进行设置
<html><head> <meta charset="utf-8"> <title>表格标签</title></head><body> <table border="1" bordercolor="red" cellspacing="0">//将单元格间距设置为0 <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr> <tr> <td>007</td> <td>男</td> <td>18</td> </tr> <tr> <td>006</td> <td>男</td> <td>19</td> </tr> <tr> <td>005</td> <td>女</td> <td>20</td> </tr> </table></body></html>
我们还可以设置表格的长宽 我就不再这里详谈这个了
表格的步骤
画图分析表格的写法
- 首先定义一个表格范围视同table
- 定义一行使用tr
- 定义一个单元格使用 td
- 操作技巧:
- 首选数有多少行,再去数多少每行里面有多少个单元格
表格的标题
<caption></caption>我们就拿上面的表格当例子吧！
- 代码
<html><head> <meta charset="utf-8"> <title>表格标签</title></head><body> <table border="1" bordercolor="red" cellspacing="0"> <caption>成都东软</caption>//标题在表格table里面 <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr> <tr> <td>007</td> <td>男</td> <td>18</td> </tr> <tr> <td>006</td> <td>男</td> <td>19</td> </tr> <tr> <td>005</td> <td>女</td> <td>20</td> </tr> </table></body></html>效果如下：
合并单元格
- rowspan:跨行
- colspan:跨列
代码
<html><head> <meta charset="utf-8"> <title>表格标签</title></head><body> <table border="1" bordercolor="red" cellspacing="0"> <caption>成都东软</caption> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr> <tr> <td colspan="3">007</td>//3个单元格合并 </tr> <tr> <td>006</td> <td>男</td> <td>19</td> </tr> <tr> <td>005</td> <td>女</td> <td>20</td> </tr> </table></body></html>
如果想要居中的话
<td colspan="3" align="center">007</td>
如果想要加粗的话 可以直接采用th 来代替td
<th colspan="3">007</th>th可以直接实现加粗+居中
- 跨行
<html><head> <meta charset="utf-8"> <title>表格标签</title></head><body> <table border="1" bordercolor="red" cellspacing="0"> <caption>成都东软</caption> <tr> <td rowspan="4">姓名</td> <td>性别</td> <td>年龄</td> </tr> <tr> <td>男</td> <td>19</td> </tr> <tr> <td>男</td> <td>19</td> </tr> <tr> <td>女</td> <td>20</td> </tr> </table></body></html>
九.表单标签
1.作用：
可以提交数据到开心网的服务器,这个过程可以使用表单标签实现
2.格式
<form></form>:定义一个表单的范围3.属性
action:提交到地址,默认提交到当前的页面
method:表单提交方式 常用的有两种 get和post,默认是get请求
enctype:一般请求下不需要这个属性,做文件上传时候需要设置这个属性
4.面试题目
get和post区别？
1.get请求地址栏会携带提交的数据,post不会携带(请求体里面。http协议)
2.get请求安全级别较低,post较高
3.get请求数据大小的限制,post没有限制
5.表单标签
1.输入项:
1)可以输入内容或者选择内容的部分
2)格式
大部分的输入项 使用 <input type="输入项的类型"/>在输入项里面需要有一个name属性
普通输入项: <input type="text"/> 密码输入项: <input type="password"/>单选输入项: <input type="radio"/>- 在里面需要属性 name
- name的属性值必须相同
- 必须有一个value值
A.普通输入项 密码输入项的例子
<html><head> <meta charset="utf-8"> <title></title></head><body> <form> 请输入你的手机号:<input type="text"name="text1"/><br/> 请输入你的密码:<input type="password" name="psw"/><br/> </form></body></html>B.效果如下：
C.单选输入项的例子
<html><head> <meta charset="utf-8"> <title></title></head><body> <form> 请输入你的手机号:<input type="text"name="text1"/><br/> 请输入你的密码:<input type="password" name="psw"/><br/> 请选择你的性别:<input type="radio" name="sex"/>女//注意此地的name必须相同 不同属性就不一样 这样两个都可以选择 这就不叫单选了 <input type="radio" name="sex">男<br/> </form></body></html>D.效果如下: 
这样就能够只能单选了
3)实现默认选中的属性
checked="checked"4)复选输入项:
<input type="checkbox"/>- 在里面需要属性 name
- name的属性值必须相同
- 必须有一个value值
5)实现默认选中的属性
checked="checked"A.复选输入项的例子
<html><head> <meta charset="utf-8"> <title></title></head><body> <form> 请输入你的手机号:<input type="text"name="text1"/><br/> 请输入你的密码:<input type="password" name="psw"/><br/> 请选择你的性别:<input type="radio" name="sex" value="nv"/>女 <input type="radio" name="sex" value="nan"/>男<br/> 请选择你的爱好:<input type="checkbox" name="love" value="pp"/>乒乓球 <input type="checkbox" name="love" value="bask"/>篮球 <input type="checkbox" name="love" value="foll"/>足球 <input type="checkbox" name="love" value="sha"/>沙滩球<br/> </form></body></html>B.效果
6).文件输入项(在后面上传时候用到)
<input type="file">A.文件输入项例子
<html><head> <meta charset="utf-8"> <title></title></head><body> <form> 请输入你的手机号:<input type="text"name="text1"/><br/> 请输入你的密码:<input type="password" name="psw"/><br/> 请选择你的性别:<input type="radio" name="sex" value="nv"/>女 <input type="radio" name="sex" value="nan"/>男<br/> 请选择你的爱好:<input type="checkbox" name="love" value="pp"/>乒乓球 <input type="checkbox" name="love" value="bask"/>篮球 <input type="checkbox" name="love" value="foll"/>足球 <input type="checkbox" name="love" value="sha"/>沙滩球<br/> 请选择你的头像:<input type="file"><br/> </form></body></html>B.效果
7)下拉输入项(不是在input标签里面的)
<select name="birth"> <option value="1991">1991</option> <option value="1992">1992</option> <option value="1993">1993</option> </select>- 默认选择
- selected=”selected”
A.例子:
<html><head> <meta charset="utf-8"> <title></title></head><body><form> 请输入你的手机号:<input type="text"name="text1"/><br/> 请输入你的密码:<input type="password" name="psw"/><br/> 请选择你的性别:<input type="radio" name="sex" value="nv"/>女 <input type="radio" name="sex" value="nan"/>男<br/> 请选择你的爱好:<input type="checkbox" name="love" value="pp"/>乒乓球 <input type="checkbox" name="love" value="bask"/>篮球 <input type="checkbox" name="love" value="foll"/>足球 <input type="checkbox" checked="checked" name="love" value="sha"/>沙滩球<br/> 请选择你的头像:<input type="file"><br/> 请选择你的出生日期: <select name="brith"> <option value="请选择" selected="selected">请选择</option> <option value="1991">1991</option> <option value="1992">1992</option> <option value="1993">1993</option> </select></form></body></html>B.效果:
2.文本域
1)实现代码
<textarea cols="10" rows="10"></textarea>//设置文本域 10行10列2)效果
3.隐藏项(不会显示在页面上,但是存在于html代码里面)
1)实现代码
<input type="hidden"/>2)效果
4.提交按钮
1)实现代码
<input type="submit"/>2)效果 
3)提交按钮后的效果
- ？输入项name的值=输入的值&
- 参数类似于key-value的形式
5.重置按钮(回到输入项的初始状态)
1)实现代码
<input type="reset"/>2)效果
6.普通按钮
1)实现代码
<input type="button" value=""/>2)效果
7.使用图片提交按钮
1)实现代码
<input type="image" src="图片路径"/>十.实例讲解get和post的不同
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>表单标签</title></head><body><h2>成都东软学院注册账号</h2><form action="hello.html" method="post">//post请求 跳转到hello.html中 <table width="100%"> <tr> <td align="right">注册邮箱:</td> <td><input type="text" name="mail"/></td> </tr> <tr> <td> </td> <td>你可以使用 <a href="#">账号</a>注册或者使用<a href="#">手机号</a>注册</td> </tr> <tr> <td align="right">创建密码:</td> <td><input type="password" name="psw"></td> </tr> <tr> <td align="right">真实姓名:</td> <td><input type="text" name="realname"/></td> </tr> <tr> <td align="right">性别:</td> <td><input type="radio" name="sex" value="nv">女 <input type="radio" name="sex" value="nan">男</td> </tr> <tr> <td align="right">生日:</td> <td> <select name="year"> <option value="1945">1945</option> <option value="1931">1931</option> <option value="1949">1949</option> </select>年 <select name="month"> <option value="10">10</option> <option value="11">11</option> <option value="9">9</option> </select>月 <select name="day"> <option value="30">30</option> <option value="29">29</option> <option value="5">5</option> </select>日 </td> </tr> <tr> <td align="right">我现在:</td> <td> <select name="now"> <option value="study">我正在上学</option> <option value="work">我已经工作</option> </select> </td> </tr> <tr> <td> </td> <td><img src="1.png"><a href="#">看不清换一张？</a></td> </tr> <tr> <td align="right">验证码:</td> <td><input type="text" name="verycode"></td> </tr> <tr> <td> </td> <td><input type="image" src="2.jpg"/></td> </tr> </table></form></body></html>给点注册后 进入hello.html中
也并没有传递什么明显的信息 所以很安全 在来看看给成get呢？
发现传递了明显信息 所有get不如post安全
十一.html中的其他的常用标签的使用
1.b:加粗
2.s:删除线
3.u:下划线
4.i:斜体
5.pre:原样输出
6.sub:下标
7.sup:上标
8.p:段落标签 比br标签多一行
9.div:自动换行
10.span:在一行显示
十二.html的头标签的使用
html两部分组成 head和body
在head里面的标签就是头标签
- title标签：表示在标签上显示的内容
- meta标签：设置页面的一些相关内容
<meta name="keywords" content="毕姥爷,熊出没,刘翔"><meta http-equiv="refresh" content="3;url=hello.html"/>- base标签:设置超链接的基本设置
- 可以统一设置超链接的打开方式
<base target="_blank"/>- link标签:引入外部文件
- 可以使用link标签引入css文件
十三.框架标签
1.使用
<frameset> - rows:按照行进行划分 ** <frameset rows="80,*"> - cols:按照列进行划分 ** <frameset cols="80,*">2.显示的页面
<frame name="lower_left" src="b.html">注意：使用框架标签时候,不能写在body里面,使用了框架标签,需要把body去掉
3.例子
<html><head> <meta charset="utf-8"> <title>框架标签</title></head> <frameset rows="80,*"> <frame name="top" src="a.html"></frame> <frameset cols="80,*"> <frame name="right" src="b.html"></frame> <frame name="left"></frame> </frameset> </frameset></html>
把页面分成三部分
点击超链接1 2 3 分别效果显示在右下角的空框内
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>框架标签</title></head><body> <a href="hello.html" target="left">超链接1</a> <a href="表单标签1.html" target="left"">超链接2</a> <a href="表单标签2.html" target="left"">超链接3</a> </body></html>
十四.扩展a标签
百度是网络资源 当a标签里面访问网络资源时候,必须要加一个协议http: 表示一个网络的公共协议 如果加上http协议之后,自动识别访问资源是一个网络资源 当浏览器里面找到相关协议,首先看这个协议是不是公共协议http 如果不是公共协议,会去本地电脑找支持这个协议的应用程序 1 0
- 初入HTML
- 初入HTML介绍
- 初入HTML-个人简历
- 初入HTML之一
- 初入HTML之二
- 初入android和HTML+js大门
- 初入
- 初入
- 初入
- 初入
- 初入
- 初入django6-在页面中正常显示包含html标记的内容
- 在TWebbrowser 里加入html文本
- JSP登入界面（HTML+JavaBan）
- 初入Android~系统化学习必备（转自http://bbs.weand.com/read-htm-tid-6142.html）
- 初入SOA
- 初入茅庐
- 初入大学
- HDFS读写文件的java代码
- You need to use a Theme.AppCompat theme (or descendant) with this activity
- linux服务器环境的安装和配置
- HDU 5876 Sparse Graph(bfs+set)
- 十二星座
- 初入HTML
- web前端框架之----bootstrap
- HDU2844-Coins（多重背包）
- mysql 设置唯一性约束
- 《算法导论》 读书笔记 （二）
- 1.UITextField 只能输入数字和点 2.textField回收键盘
- 【Unity+Vive】第二篇：Vive Input Utility API详解
- 手游行业展望
- 【计算机视觉】<资料站点>关于计算机视觉的一些测试数据集和源码站点
