web界面——html基础

html:hypertext markup language
超文本标记语言
作用：用来编写网页。（有很多特定含义的标记对组成：浏览器会根据不同的标记对来展示出对应的样式）
//标记是成对出现的；
<b>文本</b>//加粗显示；e.g.:文本
<i>文本</i>：//斜体显示；e.g.:文本
<br/>//换行；

<center>文本</center>//居中显示<HR/>://水平线<font color="red" size="4">文本</font> //字体的格式

字体的格式:文本
居中显示：

文本

标签的特点：
1：标签的明是标记好的；
2：不区分大小写；
3：标签总是成对出现，前面的标签叫开始标签，后面的标签叫结束标签。
html的格式：

<html><head><title> 网页的标题</title></head><body>网页的内容;</body> </html>

颜色的使用：

<body bgcolor="green" >
//:背景颜色；

bgcolor=rgb(r,g,b): rgb(255,0,5)或者：rgb(100%,50%,20%)
十六进制颜色表示方式：bgcolor=#FF0000;

段落的控制：

<b></b>//将文本显示为粗体
<i></i>//将文本显示为斜体
<u></U>//将文本显示下划线
<sup></sup>//上标
<sub></sub>//下标
<p></P>//段落控制标签

e.g.：
//将文本显示为粗体
//将文本显示为斜体
//将文本显示下划线
上标^//上标
//下标_//下标

//段落控制标签

图像：

<img src="C:\Users\Administrator\Pictures\草图.png"  width="160" heigh="100">

//草图的宽是160，高是：100
表格：
表格由table标签定义：

行使用<tr>
每行被分割为若干单元格用<td>标签定义
表格标题由<caption>定义。
e.g.：

//设置表格格式：
<table border="1" width="98%" align="center">
<caption>班级成绩</caption><tr><td>学号</td><td>姓名</td><td>成绩</td></tr><tr><td></td><td></td><td></td></tr></table>

班级成绩
学号	姓名	成绩
205	jioa	99

链接： a标签

语法：

  <a href="https://www.163.com" target ="_black">标签</a>

标签

！！！注意：*

href中的网页要有:https://
使用超链接可以制定不同类型的文件。如：网页，图片。。。
通过超链接，可打开一个新网页，也可以定位到当前网页的某个位置。通过锚点实现。
target ="_black" 是打开链接时重新开一个网页界面。target ="_self" 是打开当前页面，当前页面被覆盖；
e.g.
” target ="_black"
target ="_self"
//定位到当前网页的某个位置：锚点。:

   //设置锚点/<a name="这是锚点"></a>//<a href="#这是锚点" >锚点(文本)</a>

e.g. 锚点(文本)

//定位到某个网页的某个位置：

<a href="https://blog.csdn.net/traffic_jiao/article/details/81988400#锚点"> wenben</a><a href="网页#锚点name"></a>

定位到某个网页的某个位置 (wenben)

表单：
表单中的组件：

文本框：username:<input type="text" name="me">
密码框：password:<input type="password">
单选框：性别：<input type="radio" name="sex" value="男" checked>男 <input type="radio" name="sex" value="女">女
！！！：
1:以上框组件中 name value并不显示。在编程中使用；
2:单选框中e.g.性别中由男女框，如何用一组单选框只能选择一个：只需要将value改为一致;
3:单选框中checked 为默认勾选。
复选框：
<input type ="checkbox"name="复选框" value="A">A <input type ="checkbox" name="复选框" value="b">b
按钮：
提交键：<input type="submit" value="提交">
重置键：<input type="reset" value="重置">
普通键：<input type="button" value=" ">//普通键可以通过变成实现功能。
下拉列表：

学历：<select name="degree" size="2"><option value="1"  selected>初中</option><option>高中</option><option>小学</option></select>

!!!:
1:selected默认勾选；
2： value=“1” value可以穿参数给程序：

文本框

<textared name=" 我介绍"  rows="5" cols="03">你好</textared>//5行 一行30个默认值为你好

<font color="#5f9ea0" size="3"><b> 注 册 :</b></font><br/>账号：<input type="text" name="username"><br/>密码：<input type="password"name="password"><br/>性别：<input type="radio"name="sex"value="男">男<input type="radio"name="sex"value="女">女<br/>婚否：<input type="radio"name="ismarreid"value="未婚"checked>未婚<input type="radio"name="ismarreid"value="已婚">已婚<input type="radio"name="ismarreid"value="离婚">离婚<br/>爱好：<input type="checkbox"name="hobby"value="读书">读书<input type="checkbox"name="hobby"value="写字">写字<input type="checkbox"name="hobby"value="画画">画画<input type="checkbox"name="hobby"value="音乐">音乐<br/>学历：<select name="degree"><option value="1">小学</option><option value="2">初中</optionvalue><option value="3">高中</option><option value="4" selected>本科</option></select><br/>自我介绍：<br/> >      ><textarea name="自我介绍"rows="5"cols="30"></textarea><br/><input type="submit" value="提交"><input type="reset" value="重置"><br/>
</form>
<a href="fouth.html" target="count">说明</a>

结果：

框架集：
作用：将页面分为多个区域
！！框架集不能用在内

<frameset cols="50%,50%"[rows="50%,50%"]   ><frameset src=" xxxx.html"><frameset src=" xxxxy.html"></framset>//cols**是将页面横向分开//rows是将页面纵向分开

！！！a标签中：
target="_parent" 将整个页面覆盖
target="_self"覆盖一个页面
target="_blank"重新打开一个页面
@@@框架集中设置 <frame src="second.html" name="自定义name">
设置超链接时<a href=" xxx.xxx" target="自定义name">则打开的链接页面将在 name="自定义name"的界面显示。

main.html:

<html lang="en"><js>
</js><frameset rows="50,*"><frame src="second.html"><frameset cols="100,*"><frame src="zuo.html"><frame src="second.html" name="count"></frameset>
</frameset>
</html>

second.html:


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<font color="red" size="5"><center>这是标题</center></font>
</body>
</html>

zuo.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body><a href="third.html"target="count"><font color="black"size="4" ><b>注册</b></font></a><a href="denglu.html"target="count"> <font color="black"size="4"><b>登陆</b></font></a>
</body>
</html>

third.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form><font color="#5f9ea0" size="3"><b> 注 册 :</b></font><br/>账号：<input type="text" name="username"><br/>密码：<input type="password"name="password"><br/>性别：<input type="radio"name="sex"value="男">男<input type="radio"name="sex"value="女">女<br/>婚否：<input type="radio"name="ismarreid"value="未婚"checked>未婚<input type="radio"name="ismarreid"value="已婚">已婚<input type="radio"name="ismarreid"value="离婚">离婚<br/>爱好：<input type="checkbox"name="hobby"value="读书">读书<input type="checkbox"name="hobby"value="写字">写字<input type="checkbox"name="hobby"value="画画">画画<input type="checkbox"name="hobby"value="音乐">音乐<br/>学历：<select name="degree"><option value="1">小学</option><option value="2">初中</optionvalue><option value="3">高中</option><option value="4" selected>本科</option></select><br/>自我介绍：<br/> >      ><textarea name="自我介绍"rows="5"cols="30"></textarea><br/><input type="submit" value="提交"><input type="reset" value="重置"><br/>
</form>
<a href="fouth.html" target="count">说明</a></body>
</html>

denglu.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<form>
<font color="#5f9ea0" size="3"><b> 登陆 :</b></font><br/>
账号：<input type="text" name="username"><br/>
密码：<input type="password"name="password"><br/><input type="submit" value="提交"><input type="reset"value="重置">
</form>
</body>
</html>

运行结果：

web界面——html基础相关推荐

Docker学习（5）——创建私有仓库，为私有仓库添加web界面
一.什么是Docker 仓库? 仓库是集中存放镜像文件的场所.有时候会把仓库和仓库注册服务器(Registry)混为一谈,并不严格区分.实际上,仓库注册服务器上往往存放着多个仓库,每个仓库中又包含了多 ...
如何汉化美化Citrix的WEB界面
如果您有ASP的基础,就能够制作出各种美化方案或将CITRIX的NFUSE组件融入到自己的公司或相关网站中.打造一个个性化的Citrix登陆界面. 1.汉化NFUSE界面 (注:CITRIX WEB界 ...
web登录界面设计_出色的Web界面设计的7条规则
web登录界面设计 When you work on a website or on the design of web pages, remember that their success is n ...
Zookeeper从入门到精通（开发详解，案例实战，Web界面监控）
ZooKeeper是Hadoop的开源子项目(Google Chubby的开源实现),它是一个针对大型分布式系统的可靠协调系统,提供的功能包括:配置维护.命名服务.分布式同步.组服务等. Zookee ...
（转）基于MVC4+EasyUI的Web开发框架经验总结（2）- 使用EasyUI的树控件构建Web界面...
http://www.cnblogs.com/wuhuacong/p/3669575.html 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开 ...
Web前端开发基础三剑客学习知识分享
Web前端开发基础知识学习路线分享,前端开发入门学习三大基础:HTML.CSS.JavaScript.除此之外还要学习数据可视化.Vue.React.Angular相关框架,熟练运用框架提升开发效率, ...
springboot+Rabit实战二：(Rabbit MQ web 界面管理)
本章基于博主上一篇文章:springboot+Rabit实战一:(Rabbit MQ windows 环境搭建)继续深入,介绍rabbit MQ web界面管理操作一:先了解Rabbit MQ 中一 ...
WEB安全全基础漏洞学习
本文省略了SQL注入和xss漏洞,需要的可以网上找资料,资料非常多 web安全全基础漏洞学习 CSRF 简介跨站请求伪造 (Cross-Site Request Forgery, CSRF),也被称 ...
网工必须了解的华为华三设备基础命令行与WEB界面
华为华三操作系统华为VRP (Versatile Routing Platform),通用路由平台,华为企业/运营商产品都使用该系统,目前主流的是VRP5(企业产品),数据中心/运营商产品 ...

web界面——html基础

web界面——html基础相关推荐

最新文章

热门文章