可以完成99%的静态页面的HTML标签
HTML:一套浏览器认知的规则
HTML分为两个部分，头和身体。一个完整的网页相当于一个裸体的人，我们利用HTML给它穿上衣服，使它更好看。
下面我将为大家介绍一下HTML一些基本的标签，而这些基本的标签，基本上可以完成百分之九十以上的页面编写。
首先介绍一下一个网页的基本结构，分为头head，身体body；基本结构如下所示：
<!DOCTYPE html> <html> <head><title></title> </head> <body></body> </html>
HTML的注释为<!--需要注释的内容-->
我们需要做的就是在body中给这个基本的页面穿上美观的衣服。
<html></html>
HTML文档中的第一个标记，用于表示该文档是HTML文档，当浏览器遇到<html>标签时，就会按HTML的标准来解释文本。
<head></head>
头部，一般这里定义编码方式，、刷新页面和跳转时间等等。我们的css样式也写到这里。这里说一句，我们现在所见的网站大部分都是以div＋css组成，老式的网站一般都是使用table完成的。
<title></title>
html表头，也就是我们见到浏览器最上方的一段文字信息。
<body></body>
身体，一个网页所显示的静态效果，用户可以最直观的看到的效果。
废话了这么多，也没有实质性的东西，下面我给大家介绍我们要学习的10个标签，也就是body中的标签。
首先给大家介绍几种特殊符号： 空格 >大于号 < 小于号
为了方便大家学习，我下面给大家结合实例讲解
<p></p> <!--段落标签，及块级标签--><span></span> <!--行内标签--><div></div> <!--块级标签--><h1></h1> <!--块级标签，可以设置为h1到h6,--><br> <!--回车标签-->
结合着四个标签，大家区分一下他们的差别在哪里，可简单写一些代码演示：
eg:
<!DOCTYPE html><html><head><title>区分4个标签</title></head><body><p>这是一个p标签</p><br><span>这是一个span标签</span><br><div>这是一个div标签</div><br><h1>这是一个h1标签</h1><br><h2>这是一个h2标签</h2><br><h6>这是一个h6标签</h6></body></html>
为什么会存在这些标签呢？我们需要利用这些标签进行css操作和JS操作，使页面更加的美观。又扯远了。言归正传。
<input type="text" name="text"> <!--文本框，注册和登录框--><input type="password" name="password"> <!--密码框，一般的浏览器都是密文显示--><input type="button" name="button"> <!--按钮--><form></form> <!--表单，我们提交的登录信息都是通过表单上传到服务的-->
eg：
<!DOCTYPE html><html><head><title>表单</title></head><body><form action="http：//winford.top" method="POST"> <!--action既是提交的表单到那里，method是URL的信息，有两种形式，GET和POST，一般情况下使用POST，不懂得问baiduyixia,google--><input type="text" name="text"><br><input type="password" name="password"><br><input type="button" name="button" value="登录"> <!--value既是值，可以尝试每个input标签都加上value属性，查看效果--><br><p>上传文件</p><input type="file" name="fname"><br><input type="radio" name="gender">男<input type="radio" name="gender">女 <!--单选框，相同则互斥--><br><input type="checkbox" name="favor">写代码<input type="checkbox" name="favor">撩妹 <!--复选框--></form></body></html>
<a href=""></a> <!--超链接标签,herf可以为网址也可以为绝地路径，也可以为相对路径-->
eg：
<!DOCTYPE html><html><head><title>超链接</title></head><body><!--利用超链接也可以做锚--><a href="#i1">我爱你</a><a href="#i2">I LOVE YOU</a><a href="#i3">i love you</a><a href="#i4">wo ai ni</a><div id="i1" style="height: 500px;">我爱你，一生一世</div><div id="i2" style="height: 500px;">我爱你，海枯石烂</div><div id="i3" style="height: 500px;">我爱你，永不分离</div><div id="i4" style="height: 500px;">我爱你，天荒地老</div></body></html>
<img src=""> <!--图片标签，同a标签-->
eg：<!DOCTYPE html><html><head><title>img标签</title></head><body><img src="一个图片的路径" style="height: 200px;width: 200px;" title="鼠标放到图片上显示的文字信息" alt="未找到图片现实的文字信息"></body></html>
<ul> <!--列表标签-->
<li></li>
</ul>
eg：
<!DOCTYPE html><html><head><title>列表</title></head><body><ul type="circle"> <!--type的属性有三种disc：原点；circle：空心点；square:方点--><li>winford.top</li><li>winford.top</li><li>winford.top</li><li>winford.top</li></ul></body></html>
<!--ul和li搭配是无序列表；也可以ol和li搭配是有序列表-->
<table></table> <!--表格标签-->
eg：
<!DOCTYPE html><html><head><title>表格</title> <!--合并单元格，左右合并colspan,上下合并rowspan--></head><body><table border="1px"><thead><tr><th>表头第一列</th><th>表头第二列</th><th>表头第三列</th></tr></thead><tbody><tr><td>表体第一列</td><td>表体第二列</td><td>表体第三列</td></tr><tr><td>表体第一列</td><td>表体第二列</td><td>表体第三列</td></tr></tbody></table></body></html>
<label></label> <!--用于点击文字使关联的标签获取光标-->
eg：
<!DOCTYPE html><html><head><title></title></head><body><label for="username">用户名</label><input type="text" name="user" id="username"><fieldset> <legend>登录</legend> <!--一个登录的界面，用处不大--></fieldset></body></html>
转载于:https://www.cnblogs.com/weimin1314/p/8260474.html
可以完成99%的静态页面的HTML标签相关推荐
- 分享：nuxt个性化特定页面的 Meta 标签
个性化特定页面的 Meta 标签 关于个性化特定页面的 Meta 标签,请参考 页面头部配置API. 注意: 为了避免子组件中的meta标签不能正确覆盖父组件中相同的标签而产生重复的现象,建议利用 h ...
- 关于Jsp页面的jstl标签的级联属性的异常。
使用SpringMVC框架时,当我做表单回显时. 情景描述.Employee 类有一个Department类的属性.这两个类存在多对一关联关系. 下面是Employee类的属性的定义. public ...
- html手机端页面meta,手机页面的 HTMLmeta 标签使用与说明
name="viewport" 设置窗口(网页可绘制的区域) width="device-width" 应用宽与屏幕的宽一样的 (height同width) i ...
- android手机上传不了图片,【报Bug】nvue页面使用web-view组件，安卓手机无法调用页面的input标签上传图片...
详细问题描述 nvue页面,使用web-view原生组件,导致web-view加载的网页页面不能触发input标签进行图片上传,导致这样的原因大致百度了一下是因为安卓5.0及以上使用input typ ...
- mysql获取img标签_前台html页面的img标签图片想动态从数据库获取，如何获取？
展开全部 1.这个在数据库中存储62616964757a686964616fe78988e69d8331333431366235img图片的地址,前台放置img服务器标签,后台读取数据库中的img图片 ...
- html页面的th标签合并,Table tr th td html表格标签
Table tr th td html表格标签教程-- html table tr td�?strong>html table tr th表格布局标签教程�?/p> 学习DIV CSS回头 ...
- 织梦列表页生成的html在哪里,织梦系统给手机版生成静态页HTML的方法
原标题:织梦系统给手机版生成静态页HTML的方法 织梦dedecms默认的手机端不能生成静态,对于使用静态的网站来说多少有些不方便,其实dedecms可以通过一种另类的方法来给手机端生成静态页面的. ...
- seo php,SEO技术：PHP页面的SEO优化
SEO技术:PHP页面的SEO优化 加入时间:2018-08-21 19:42文章来源:朗创网络营销 PHP是一种快速的服务器端语言,通常用于创建MySQL依赖项和新鲜名称,并进行简单的更改,而其相当 ...
- php编译html,将PHP模板文件编译为静态HTML页面的Ant任务
我们当前的站点分解为各种易于使用的PHP包,它们使用这些漂亮的PHP模板库中的一个汇集到一起.将PHP模板文件编译为静态HTML页面的Ant任务 我们目前使用Ant构建来优化大多数关于连接,缩小和图像 ...
最新文章
- Django源码分析8：单元测试test命令浅析
- ZOJ 3820 Building Fire Stations
- Pass NI Certification
- linux脚本调试-bashdb安装及调试
- maven web项目保存log4j日志到WEB-INF
- 机器学习，计算机视觉相关资料
- sql2008能否打开mysql数据库_SQL Server 2008通过LinkServer访问MySQL数据库
- （209）浮点数运算步骤
- Linux中安装tomcat
- 什么是spooling技术 他有哪几部分组成_气调保鲜冷库有哪几部分组成？
- Java之Windows下环境搭建配置
- 水平面：篡命铜钱の2
- 【BIT数据库实验】openGauss数据库实验二：数据库查询
- 叶俊获“约翰·格雷博士中国行”最佳贡献奖
- 教你怎么阅读外文文献
- Privacy Protection in Distributed Fingerprint-based Authentication
- 百旺信息服务器端口,各省百旺参数设置服务器地址
- Android 关于NBA项目 SprintNBA
- python写的简单游戏-1小球碰壁弹跳
- 吸引红杉资本中美两地基金联合领投，英国芯片企业Graphcore有何魔力？