HTML基础之HTML标签-html header（meta,title） html body(p,br,h,form,div,span,input,lable)
摘自：http://www.imdsx.cn/index.php/2017/07/27/html0/
一、HTML标签
<!DOCTYPE html> <!--标准的html规则，类似于Python的解释器-->
<html lang="en"> <!--html标签（只能一个），指定的语言en-->
<head> <!-- html head标签的开始 -->
<meta charset="UTF-8">
<title>页面标题</title>
</head> <!-- html head标签的结束 -->
<body> <!-- html body标签的开始 -->
<h1>我的第一个标题</h1>
<p>我的第一个段落</p> </body> <!-- html body标签的结束 -->
</html>
浏览器显示：
1、html header：
1）meta标签
<!DOCTYPE html> <!--标准的html规则，类似于Python的解释器-->
<html lang="en"> <!--html标签（只能一个），指定的语言en-->
<head> <!-- html head标签的开始 -->
<!--指定编码-->
<meta charset="UTF-8">
<!--每1秒钟刷新一次-->
<meta http-equiv="refresh" content="1">
<!--1秒后跳转页面-->
<meta http-equiv="refresh" content="1;http://www.baidu.com">
<!-- 关键字检索 -->
<meta name="keywords" content="大师兄，aa,bb">
<!-- 网站描述-->
<meta name="description" content="阿里山的积分离开家">
<!-- ie打开时以最高的兼容模式打开 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>页面标题</title>
</head> <!-- html head标签的结束 -->
<body> <!-- html body标签的开始 -->
</body> <!-- html body标签的结束 -->
</html>
2）title标签
<!DOCTYPE html> <!--标准的html规则，类似于Python的解释器-->
<html lang="en"> <!--html标签（只能一个），指定的语言en-->
<head> <!-- html head标签的开始 -->
<!--指定编码-->
<meta charset="UTF-8">
<!-- 在head中所写的所有标签全部都看不到，是内部的一些东西，除了一个标签就是title-->
<title>白羊座</title>
<!-- 前方高能预警，***重要*** -->
<!-- title的图标,告诉浏览器我要把link单做title的图标 -->
<link rel="shortcut icon" href="http://ui.imdsx.cn/static/image/dsx_Small.jpg">
<!--引入css样式表-->
<link rel="stylesheet" href="tmp.css">
<!--css样式-->
<style></style>
<!--引入js和编写js-->
<script src="tmp.js"></script> </head> <!-- html head标签的结束 -->
<body> <!-- html body标签的开始 -->
</body> <!-- html body标签的结束 -->
</html>
2、html body
1）p、br
段落标签和换行标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> </head>
<body>
<!--p 段落标签，占满一整行，段落之间有空行,元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。想换行需要通过<br />标签 自闭合标签建议自己写上/作为区分-->
<p>年轻,就是拿来折腾的。<br />让自己具备独立生活的能力，具备一技之长的资本，是需要无数个夜晚的静思，无数寂寞时光的堆积而成的。</p>
<p>别在最该拼搏的年纪选择稳定，世界上最大的不变是改变，只有每天进步，才能拥抱生命的无限可能！</p>
<p>你以为你给对方留了电话存了微信，应该彼此也能互相帮忙，却忘记了一件很重要的事情，只有关系平等，才能互相帮助。</p>
<p>不要为了户口丢掉生活，为了稳定丢掉青春，为了平淡丢掉梦想，因为你所谓的稳定，不过实在浪费生命。</p>
<p>真正的勇者不是狼狈的逃脱，而是用闲暇时间，磨练自己。</p>
<p>只有等现实的日子富足了，能力够强了，才可以去追求那些美好的生活状态，才该去追求那些伟大的梦。否则那些梦幻般的生活，都只是空中阁楼，不堪一击。</p>
<p>生活是自己的，自己都不求进取，凭什么让别人给你美好的未来？</p>
</body>
</html>
2）h、form、div、span、input、label
h
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> </head>
<body>
<!-- 标题标签 h1最大 h6最小 自带属性 -->
<h1>标题标签</h1>
<h2>标题标签</h2>
<h3>标题标签</h3>
<h4>标题标签</h4>
<h5>标题标签</h5>
<h6>标题标签</h6> </body>
</html>
span
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- 行内标签的代表 什么属性都不带，或叫做内联标签-->
<!-- 行内自己有多大，就占多大。也是白板标签，没有附着任何css样式的就是白板标签-->
<span>滴滴滴</span>
</body>
</html>
div 块级标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- 块级标签的代表 什么属性都不带，html代码中出场率最高，块级标签无论自己有多大 都占了一整行-->
<!--伪白板标签-->
<div>滴滴滴</div>
</body>
</html>
浏览器展示：
input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<!--文本框输入框，默认text-->
<!--name属性是跟后端交互的key,value是跟后端交互的值-->
<!--{"username":"admin","passwd":"123456"}--> <!--placeholder 属性提供可描述输入字段预期值的提示信息（hint）,该提示会在输入字段为空时显示，并会在字段获得焦点时消失。注释：placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。-->
<input type="text" placeholder="请输入用户名" name="username" value="admin"> <!--密码输入框-->
<!--type="password"密文-->
<input type="password" placeholder="请输入密码" name="passwd"> <!--radio单选，name属性相同的时候，互斥-->
<span>男</span><input type="radio" name="sex">
<span>女</span><input type="radio" name="sex"> <!-- 多选框 checkbox {"name"：[1,2,3]} 默认值checked=checked-->
<span>奔驰</span><input type="checkbox" checked="checked">
<span>宝马</span><input type="checkbox"> <!-- 文件类 file 如果上传文件一定要在form中添加特殊属性 enctype="multipart/form-data" 意思是一点一点的发给服务器-->
<!--<p>上传文件</p>-->
<input type="file"> <!-- button按钮 点击什么用也没有 需要结合js绑定事件 -->
<!--submit按钮如果和form表单连用则会直接出发请求-->
<input type="button" value="登录">
<input type="submit" value="登录">
<!--当rest和form表单连用时，会触发重置操作，单独没啥用，和form连用-->
<input type="reset">
</body>
</html>
写一个登录：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- 表单标签 可以理解为载体白纸 input 就是写在纸上的文字，将白纸递交给后台，后端才能接到信息-->
<!--表单里的属性，action：提交到哪个地址（接口信息）；method：具体是什么请求，get或post-->
<form action="http://www.baidu.com" method="post">
<!--div包裹，占一整行，实现换行的效果-->
<div>
<span>用户名：</span><input type="test" name="username" placeholder="请输入用户名">
</div>
<div>
<span>密码：</span><input type="test" name="passwd" placeholder="请输入密码">
</div> <!--button，如果想要有操作 只能通过js绑定事件-->
<input type="button" value="登录">
<!--submit和form表单连用，则会直接出发请求-->
<input type="submit" value="注册">
<!--reset必须和form表单连用-->
<input type="reset" value="重置">
</form>
</body>
</html>
form：表单标签 可以理解为载体白纸 input 就是写在纸上的文字，将白纸递交给后台，后端才能接到信息，input写到form标签里面
lable标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- label 标题标签 与input联合运用，增加input的点击范围 可直接点击文字就输入 for：映射到input的id-->
<label for="i1">用户名</label>
<input id="i1" type="text" placeholder="请输入用户名">
</form>
</body>
</html>
HTML基础之HTML标签-html header（meta,title） html body(p,br,h,form,div,span,input,lable)的更多相关文章
- HTML基础篇（标签和属性整--已剔除不被浏览器支持的部分）
行内元素有:a b span img input select strong 块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p HTML 参考手册- (HTML5 标 ...
- Bootstrap<基础二十> 标签
Bootstrap 标签.标签可用于计数.提示或页面上其他的标记显示.使用 class .label 来显示标签,如下面的实例所示: <!DOCTYPE html> <html> ...
- HTML基础及一般标签
HTML 内容 Hyper Text Markup Language 超文本标记语言(包含文本.表格.图片.声音.视频等,同时也是文档) HTML 元素指的是从开始标签(start t ...
- 前端基础-html 字体标签,排版标签,超链接,图片标签
主要内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...
- 前端基础：HTML标签(上)
前端基础:THML HTML初始 1.web服务本质 import socket sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) so ...
- HTML基础：<a>标签 编写个人收藏夹
编写个人收藏夹 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...
- 0009 CSS基础选择器（ 标签、类、id、通配符）
typora-copy-images-to: media 第01阶段.前端基础.CSS基础选择器 CSS选择器(重点) 学习目标: 理解 能说出选择器的作用 id选择器和类选择器的区别 应用 能够使用 ...
- iOS系列 基础篇 06 标签和按钮 (Label & Button)
iOS系列 基础篇 06 标签和按钮 (Label & Button) 目录: 标签控件 按钮控件 小结 标签和按钮是两个常用的控件,下面咱们逐一学习. 1. 标签控件 使用Single Vi ...
- meta标签详解(meta标签的作用)///////////////////////////转
meta标签详解(meta标签的作用) 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧 ...
随机推荐
- 手把手教你用Strace诊断问题[转]
早些年,如果你知道有个 strace 命令,就很牛了,而现在大家基本都知道 strace 了,如果你遇到性能问题求助别人,十有八九会建议你用 strace 挂上去看看,不过当你挂上去了,看着满屏翻滚的 ...
- hive SQL COALESCE 函数
COALESCE是一个函数, (expression_1, expression_2, ...,expression_n)依次参考各参数表达式,遇到非null值即停止并返回该值.如果所有的表达式都是空 ...
- 在 java 开发接口中需要注意的问题
1 在开发过程中免不了对接上游或下游,有合作就要保证入参.出参的准确性.一个接口一般只能处理有限情况下的情况,因此在逻辑处理前要对入参进行校验. 2 在自己的逻辑处理过程中,要时刻持有怀疑的态度.假设 ...
- 关于java中死锁的总结
关于死锁,估计很多程序员都碰到过,并且有时候这种情况出现之后的问题也不是非常好排查,下面整理的就是自己对死锁的认识,以及通过一个简单的例子来来接死锁的发生,自己是做python开发的,但是对于死锁的理 ...
- Cocos Lua的Touch 点击事件添加
两种方式: -- 触摸开始 local function onTouchBegan(touch, event) return true end -- 触摸结束 local function onTou ...
- 4 Git 基础 - 撤消操作
撤消操作 任何时候,你都有可能需要撤消刚才所做的某些操作.接下来,我们会介绍一些基本的撤消操作相关的命令.请注意,有些撤销操作是不可逆的,所以请务必谨慎小心,一旦失误,就有可能丢失部分工作成果. 修改 ...
- Android 获取外网IP，实测有效
网上有很多获取IP的例子,不过都是获取到的本地ip,还有的是因为走不通了,获取到的ip为空,下面看实测获取到外网IP的代码,注意需要在线程里面执行 /** * 获取外网的IP(要访问Url,要放到后台 ...
- selenium.common.exceptions.UnexpectedAlertPresentException: Alert Text: None；Message: unexpected alert open: {Alert text : 您点击的频率过快！请稍后再试}
报错 Traceback (most recent call last): File "C:/myFiles/code/cnki/cnki_1/core/knavi.py", li ...
- 第四百零五节，centos7下搭建sentry错误日志服务器，接收python以及Django错误，
第四百零五节,centos7下搭建sentry错误日志服务器,接收python以及Django错误, 注意:版本,不然会报错 Docker >=1.11Compose >1.6.0 通过d ...
- 居于U2000手机管理光猫，小区运营商FTTH光猫注册神器，MA5680T手机管理，自动添加光猫
此软件居于U2000开发,需要U2000管理支持 主要功能: 光猫查看->上线情况.下线原因.下线时间.光猫重启.光模块发送功能.接收功能.温度 Radius诊断->用户基本信息.拨打电话 ...