可以完成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>
可以完成99%的静态页面的HTML标签的更多相关文章
- 生成静态页面的PHP类
生成静态页面的PHP类: 复制代码代码如下: <?php class html { var $dir; //dir for the htmls(without/) var $ ...
- 高并发分布式系统中生成全局唯一（订单号）Id js返回上一页并刷新、返回上一页、自动刷新页面 父页面操作嵌套iframe子页面的HTML标签元素 .net判断System.Data.DataRow中是否包含某列 .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数
高并发分布式系统中生成全局唯一(订单号)Id 1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(D ...
- 今天做一个项目的时候，要在一个编辑的jsp页面的textarea标签设置value属性，结果发现他没有value属性，但是是编辑页面又必须要回显要修改的内容，所以在参考了w3cschool之后很轻松的解决了这个问题。
今天做一个项目的时候,要在一个编辑的jsp页面的textarea标签设置value属性,结果发现他没有value属性,但是是编辑页面又必须要回显要修改的内容,所以在参考了w3cschool之后很轻松的 ...
- html页面的head标签下
head区是指首页html代码的<head>和</head>之间的内容. 必须加入的标签 1.公司版权注释 <!--- the site is designed b ...
- 一个简单的NodeJs静态页面的web服务器
主要功能 1 显示www文件夹下静态html或文本类型的文件. 2 缺省访问文件功能. 通过config.js的defaultfile属性设置 3 如果文件夹下没有缺省文件,显示文件夹下文件列表 4 ...
- 记一次针对静态页面的DDOS基本防护
可以说是我试图进入安全口的天才第一步了,能走多远鬼知道呢 背景 去年年前接到的一个外包项目,是一个base在日本的中国人留学机构做的静态页面.出于锻炼自己的目的,选择为他们按次结薪做长期服务维护.20 ...
- 删除静态页面的html
function dellist(obj) { $(obj).parent().parent().remove(); }
- 关于Jsp页面的jstl标签的级联属性的异常。
使用SpringMVC框架时,当我做表单回显时. 情景描述.Employee 类有一个Department类的属性.这两个类存在多对一关联关系. 下面是Employee类的属性的定义. public ...
- 手机页面的meta标签
<meta charset="utf-8"/><meta name="viewport" content="width=device ...
随机推荐
- linux多线程编程基本操作（2）
linux c多线程总结: :关于线程和进程 a:使用多线程的理由之一是和进程相比,它是一种非常"节俭"的多任务操作方式.我们知道,在Linux系统下,启动一个新的进程必须分配给 ...
- 整理下react中常见的坑
其实有些也不能算是坑,有些是react的规定,或者是react的模式和平常的js处理的方式不同罢了 1.setState()是异步的this.setState()会调用render方法,但并不会立即改 ...
- redis介绍及在购物车项目中的应用，用户认证
1.redis 2.购物车的构建 api结构: models.py(创建完后自行添加数据) from django.db import models from django.contrib.conte ...
- Restframework介绍
1.REST介绍 REST与技术无关,它代表的是一种软件架构风格,全称Representational State Transfer,中文翻译为“表征状态转移” REST从资源的角度类审视整个网络,它 ...
- Java 依赖、关联、聚合和组合
必须转一个,写的太好了! https://blog.csdn.net/zhengzhb/article/details/7190158
- 涉及自制系统AS的几个协议总结
IGP(Interior Gateway Protocol): 内部网关协议的总称:其下有RIP和OSPF EGP(External Gateway Protocol): 外部网关协议的总称:目前使用 ...
- javascript跳转页面
<script type="text/javascript"> function openNewTab() { parent.addExampleTab({ id: a ...
- span没有name属性
<span id="test" name="测试数据">测试咯</span> 在eclipse中这么写发现会有警告提示.百度发现原来sp ...
- Qt基于model/view数据库编程3
QSqlQueryModel和QSqlQuery类: 工程开发过程中将这两个类合起来使用,用QSqlQueryModel查询展示数据库中的数据,用QSqlQuery类执行sql语言,实现对数据库的操作 ...
- node.js常用的fs文件系统
fs文件系统模块对于系统文件及目录进行一些读写操作. 模块中的方法均有异步和同步版本,例如读取文件内容的函数有异步的 fs.readFile() 和同步的 fs.readFileSync(). 异步的 ...